:root {
    color-scheme: light;
    --background: #f4f3ed;
    --surface: #ffffff;
    --surface-soft: #f8faf7;
    --text: #223129;
    --text-muted: #5e6b63;
    --border: #d8ded8;
    --primary: #285b49;
    --primary-dark: #174435;
    --primary-soft: #e1efe8;
    --accent: #a15f27;
    --header-background: #ffffff;
    --heading: #253b2e;
    --section-heading: #2d4235;
    --secondary-button-background: #ffffff;
    --secondary-button-hover: #e1efe8;
    --site-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --danger: #a12e2e;
    --danger-dark: #7c2020;
    --danger-soft: #fbe8e8;
    --warning: #8a5b08;
    --warning-soft: #fff3d8;
    --success: #23663f;
    --success-soft: #e3f4e9;
    --focus: #2563eb;
    --shadow: 0 1.25rem 3.5rem rgba(35, 53, 42, 0.1);
    font-family: var(--site-font);
    color: var(--text);
    background: var(--background);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background-color: var(--background);
    background-image: radial-gradient(circle at top left, rgba(223, 166, 99, 0.12), transparent 34rem);
    font-size: 1rem;
    line-height: 1.55;
}

a {
    color: var(--primary);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--primary-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    background: var(--primary-dark);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

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

.required-fields-note {
    font-size: 0.95rem;
}

.required-marker {
    color: #b42318;
    font-size: 1.1em;
    font-weight: 900;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(40, 91, 73, 0.14);
    background: var(--header-background);
    backdrop-filter: blur(0.75rem);
}

.header-inner {
    width: calc(100% - 2rem);
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.8rem;
    color: #fff;
    background: var(--primary);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.brand-logo {
    width: auto;
    max-width: 10rem;
    height: 2.75rem;
    display: block;
    object-fit: contain;
}

.header-navigation {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.mobile-menu-toggle {
    min-width: 6.25rem;
    min-height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 2px solid var(--primary);
    border-radius: 0.75rem;
    color: var(--primary-dark);
    background: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle[aria-expanded="true"] {
    color: #fff;
    background: var(--primary);
}

.mobile-menu-toggle svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.primary-nav a,
.family-nav-toggle {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
    color: #3f5046;
    font-weight: 650;
    text-decoration: none;
}

.family-nav-toggle {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 650;
    cursor: pointer;
}

.family-nav-toggle svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.primary-nav a:hover,
.family-nav-toggle:hover,
.family-nav-menu:focus-within .family-nav-toggle,
.family-nav-menu.is-open .family-nav-toggle {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.family-nav-menu {
    position: relative;
}

.family-nav-items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 45;
    width: max-content;
    min-width: 14rem;
    display: none;
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(31, 49, 40, 0.18);
}

.family-nav-items a {
    width: 100%;
    min-height: 2.9rem;
}

.family-nav-menu.is-open .family-nav-items {
    display: grid;
}

@media (min-width: 58.0625rem) {
    .family-nav-menu:hover .family-nav-items,
    .family-nav-menu:focus-within .family-nav-items {
        display: grid;
    }
}

.account-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.profile-menu {
    position: relative;
}

.settings-menu {
    position: relative;
}

.reunion-switcher-menu {
    position: relative;
}

.profile-menu > summary,
.settings-menu > summary,
.reunion-switcher-menu > summary {
    list-style: none;
}

.profile-menu > summary::-webkit-details-marker,
.settings-menu > summary::-webkit-details-marker,
.reunion-switcher-menu > summary::-webkit-details-marker {
    display: none;
}

.reunion-switcher-toggle {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    color: var(--primary-dark);
    background: #fff;
    font-weight: 750;
    cursor: pointer;
}

.reunion-switcher-toggle:hover,
.reunion-switcher-menu[open] .reunion-switcher-toggle {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.reunion-switcher-toggle:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}

.reunion-switcher-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.profile-menu-toggle,
.settings-menu-link,
.message-menu-link,
.notification-menu-link {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--primary);
    border-radius: 50%;
    color: var(--primary-dark);
    background: #fff;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.profile-menu-toggle:hover,
.profile-menu[open] .profile-menu-toggle,
.settings-menu[open] .settings-menu-link,
.settings-menu-link:hover,
.message-menu-link:hover,
.notification-menu-link:hover {
    color: #fff;
    background: var(--primary);
}

.profile-menu-toggle:focus-visible,
.settings-menu-link:focus-visible,
.message-menu-link:focus-visible,
.notification-menu-link:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}

.profile-menu-toggle svg,
.settings-menu-link svg,
.message-menu-link svg,
.notification-menu-link svg {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.notification-menu-link, .message-menu-link { position: relative; text-decoration: none; }
.notification-unread-badge, .message-unread-badge { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .25rem; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #c43d4f; font-size: .68rem; font-weight: 900; line-height: 1; }

.notification-page-heading { align-items: end; }
.notification-filters { display: inline-flex; gap: .35rem; margin: 0 0 1rem; padding: .3rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.notification-filters a { padding: .55rem .9rem; border-radius: .55rem; color: var(--primary-dark); font-weight: 800; text-decoration: none; }
.notification-filters a:hover, .notification-filters a.is-active { color: #fff; background: var(--primary); }
.notification-list { display: grid; gap: .8rem; }
.notification-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.1rem; overflow: hidden; }
.notification-card.is-unread { border-color: color-mix(in srgb,var(--primary) 55%,var(--border)); box-shadow: 0 .45rem 1.2rem rgba(30,76,62,.1); }
.notification-card.is-unread::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .3rem; background: var(--primary); }
.notification-card.is-read { background: color-mix(in srgb,#fff 75%,var(--surface-soft)); }
.notification-card-icon, .notification-empty-icon { width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border-radius: .8rem; color: #fff; background: var(--primary); }
.notification-type-reminder .notification-card-icon { background: #6a58ad; }
.notification-type-message .notification-card-icon { background: #2d6855; }
.notification-card-icon svg, .notification-empty-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-card-copy { min-width: 0; display: grid; gap: .35rem; }
.notification-card-copy h2, .notification-card-copy p { margin: 0; }
.notification-card-copy h2 { font-family: var(--font-body); font-size: 1.08rem; }
.notification-card-copy p { color: var(--text); white-space: pre-line; }
.notification-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; color: var(--text-muted); font-size: .8rem; font-weight: 750; }
.notification-card-meta span { color: var(--secondary-dark); letter-spacing: .06em; text-transform: uppercase; }
.notification-card-context { color: var(--text-muted); font-size: .86rem; }
.notification-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.notification-empty-state { display: grid; justify-items: center; gap: .65rem; text-align: center; }
.notification-empty-state h2, .notification-empty-state p { margin: 0; }
@media (max-width: 46rem) {
    .notification-card { grid-template-columns: auto minmax(0,1fr); }
    .notification-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.profile-menu-toggle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.profile-menu-items,
.settings-menu-items {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 40;
    width: max-content;
    min-width: 13rem;
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(31, 49, 40, 0.18);
}

.reunion-switcher-items {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 40;
    width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(31, 49, 40, 0.18);
}

.reunion-switcher-items a {
    min-height: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.65rem 0.8rem;
    border-radius: 0.55rem;
    color: var(--text);
    text-decoration: none;
}

.reunion-switcher-items a:hover,
.reunion-switcher-items a:focus-visible {
    color: var(--primary-dark);
    background: var(--primary-soft);
    outline: none;
}

.reunion-switcher-items strong,
.reunion-switcher-items span {
    display: block;
}

.reunion-switcher-items span {
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.reunion-switcher-items .reunion-switcher-event { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: .7rem; align-items: center; border-left: .22rem solid var(--primary); }
.reunion-switcher-items .reunion-switcher-event:nth-child(3n+2) { border-left-color: #b96528; }
.reunion-switcher-items .reunion-switcher-event:nth-child(3n+3) { border-left-color: #4d65a8; }
.reunion-switcher-items .reunion-switcher-event-icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; margin: 0; border-radius: .65rem; color: #fff; background: var(--primary); }
.reunion-switcher-items .reunion-switcher-event:nth-child(3n+2) .reunion-switcher-event-icon { background: #b96528; }
.reunion-switcher-items .reunion-switcher-event:nth-child(3n+3) .reunion-switcher-event-icon { background: #4d65a8; }
.reunion-switcher-event-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.reunion-switcher-items .reunion-switcher-event-copy { min-width: 0; display: grid; margin: 0; }
.reunion-switcher-items .reunion-switcher-event-copy strong,
.reunion-switcher-items .reunion-switcher-event-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reunion-switcher-items .menu-footer-link { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; white-space: nowrap; }
.reunion-switcher-items .menu-footer-link span { display: inline; margin: 0; color: inherit; }

.profile-menu-items a,
.settings-menu-items a {
    min-height: 2.9rem;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border-radius: 0.55rem;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.profile-menu-items a:hover,
.profile-menu-items a:focus-visible,
.settings-menu-items a:hover,
.settings-menu-items a:focus-visible {
    color: var(--primary-dark);
    background: var(--primary-soft);
    outline: none;
}

.menu-footer-link { margin-top: .35rem; padding-top: .75rem !important; border-top: 1px solid var(--border); color: var(--primary-dark) !important; font-weight: 850; }
.profile-menu-items { min-width: 17rem; max-height: min(36rem, calc(100vh - 5rem)); overflow-y: auto; }
.menu-group-label, .profile-family-switch-label { display: block; padding: .55rem .8rem .2rem; color: var(--text-muted); font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.menu-separator { display: block; height: 1px; margin: .4rem .45rem; background: var(--border); }
.profile-menu-items .profile-family-switch-link { min-height: 2.55rem; padding-left: 1.15rem; font-weight: 650; }
.profile-menu-items .profile-sign-out { color: #a5262c; }
.profile-menu-items .profile-sign-out:hover, .profile-menu-items .profile-sign-out:focus-visible { color: #801b20; background: #fff0f0; }
.settings-menu-items { min-width: 17rem; }
.settings-submenu { position: relative; }
.settings-submenu > summary { min-height: 2.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border-radius: .55rem; color: var(--text); font-weight: 750; list-style: none; cursor: pointer; }
.settings-submenu > summary::-webkit-details-marker { display: none; }
.settings-submenu > summary:hover, .settings-submenu[open] > summary { color: var(--primary-dark); background: var(--primary-soft); }
.settings-submenu > summary span { font-size: 1.3rem; transition: transform .15s ease; }
.settings-submenu[open] > summary span { transform: rotate(90deg); }
.settings-submenu > nav { display: none; position: absolute; top: -.45rem; right: calc(100% - .25rem); z-index: 42; width: 16rem; padding: .45rem; border: 1px solid var(--border); border-radius: .8rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(31,49,40,.18); }
.settings-submenu[open] > nav { display: block; }
@media (hover: hover) and (min-width: 52.01rem) { .settings-submenu:hover > nav { display: block; } }

.content-shell {
    width: calc(100% - 2rem);
    min-width: 0;
    min-height: calc(100vh - 10rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem) 0;
}

/* Give free-standing page text more breathing room while boxed content stays full width. */
.content-shell > .page-heading,
.content-shell > .breadcrumb,
.content-shell > .page-actions,
.content-shell > .inline-actions,
.content-shell > .compact-page-actions,
.content-shell > .form-message:not(.notice),
.content-shell > .section-block > .section-heading-row {
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
}

.site-footer {
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.site-footer-information {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem 1rem;
}

.site-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .9rem;
}

.site-footer-links a {
    color: var(--primary-dark);
    font-weight: 750;
    text-underline-offset: .18em;
}

.page-heading {
    max-width: none;
    margin-bottom: 2rem;
}

.page-heading.section-heading-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.page-heading.section-heading-row > .button {
    min-width: 10rem;
    justify-content: center;
    align-self: flex-start;
    margin-left: auto;
    padding-inline: 1.15rem;
}

.page-heading-actions,
.section-heading-actions {
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

.page-heading-actions .button {
    min-width: 10rem;
    white-space: nowrap;
}

.page-heading p:not(.eyebrow) {
    max-width: 72ch;
}

.page-heading-with-actions,
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.section-heading {
    margin-bottom: 1rem;
}

.section-heading h2,
.edit-panel h2 {
    margin: 0;
    color: var(--section-heading);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 500;
}

.section-heading p,
.edit-panel h2 + p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.section-block {
    margin-top: 2.5rem;
}

.page-heading h1,
.auth-card h1,
.empty-state h1 {
    margin: 0;
    color: var(--heading);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 6vw, 4.25rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.page-heading p:not(.eyebrow),
.auth-intro,
.empty-state p {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.eyebrow {
    margin: 0 0 0.65rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.card,
.panel {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.75rem 2rem rgba(35, 53, 42, 0.06);
}

.family-switcher {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1fr);
    align-items: end;
    gap: 1.25rem 2rem;
    padding: 1.5rem;
}

.family-switcher label,
.form-field label,
fieldset legend {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 750;
}

.event-choice-section {
    margin-top: 1.5rem;
}

.event-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.event-choice-card {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0.75rem 2rem rgba(35, 53, 42, 0.05);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.event-choice-card:hover,
.event-choice-card:focus-visible {
    border-color: #94b5a4;
    color: var(--text);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.event-choice-family {
    color: var(--primary);
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.event-choice-card > strong {
    margin: 0.45rem 0 0.65rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.event-choice-details {
    display: block;
    color: var(--text-muted);
    line-height: 1.5;
}

.event-choice-open {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--primary-dark);
    font-weight: 800;
}

.reuse-event-settings {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.2fr);
    align-items: end;
    gap: 1.25rem 2rem;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: linear-gradient(135deg, var(--primary-soft), #fff 62%);
}

.reuse-event-settings h2,
.reuse-event-settings p {
    margin-top: 0;
}

.event-editor-section {
    margin-top: 1.25rem;
}

.event-editor-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.event-editor-heading h2,
.event-editor-heading p {
    margin-top: 0;
}

.event-editor-heading p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.event-editor-step {
    min-width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-weight: 850;
}

.field-help {
    display: block;
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.inline-actions,
.page-actions,
.table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.action-card {
    min-height: 8rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0.75rem 2rem rgba(35, 53, 42, 0.05);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.action-card:hover {
    border-color: #94b5a4;
    color: var(--text);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.action-card strong,
.action-card small {
    display: block;
}

.action-card strong {
    margin-top: 0.05rem;
    font-size: 1.1rem;
}

.action-card small {
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.action-icon {
    min-width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.action-icon svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.button,
input[type="submit"].button,
button.button {
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 2px solid transparent;
    border-radius: 0.7rem;
    font: inherit;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button-primary {
    color: #fff;
    background: var(--primary);
}

.button-primary:hover {
    color: #fff;
    background: var(--primary-dark);
}

.button-secondary {
    border-color: #b9c7be;
    color: var(--primary-dark);
    background: var(--secondary-button-background);
}

.button-secondary:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--secondary-button-hover);
}

.button-danger {
    color: #fff;
    background: var(--danger);
}

.button-danger:hover {
    color: #fff;
    background: var(--danger-dark);
}

.button-small {
    min-height: 2.4rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
}

.button-full {
    width: 100%;
    margin-top: 0.5rem;
}

.button[disabled],
input[disabled].button {
    opacity: 0.55;
    cursor: not-allowed;
}

.text-input,
.select-input,
.textarea-input,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 2px solid #b9c5bd;
    border-radius: 0.65rem;
    color: var(--text);
    background: #fff;
    font: inherit;
}

textarea,
.textarea-input {
    min-height: 7rem;
    resize: vertical;
}

.text-input:focus,
.select-input:focus,
.textarea-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--focus);
}

.auth-body {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.auth-shell,
.setup-shell {
    width: 100%;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 31rem);
    padding: clamp(1.6rem, 5vw, 3rem);
    border: 1px solid rgba(56, 79, 65, 0.15);
    border-radius: 1.35rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.setup-card {
    width: min(100%, 54rem);
    margin: 2rem 0;
}

.wide-auth-shell .auth-card {
    width: min(100%, 42rem);
}

.auth-secondary-action {
    margin-top: 0.85rem;
}

.friendly-steps {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.friendly-steps li {
    margin-bottom: 0.8rem;
    padding-left: 0.35rem;
}

.setup-key {
    padding: 1rem;
    border: 2px dashed #9eb2a5;
    border-radius: 0.75rem;
    color: var(--primary-dark);
    background: var(--surface-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: clamp(1rem, 4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    text-align: center;
}

.authenticator-setup-grid {
    display: grid;
    grid-template-columns: minmax(13rem, .8fr) minmax(16rem, 1.2fr);
    gap: 1.25rem;
    align-items: start;
    margin: 1.25rem 0;
}

.authenticator-qr-card,
.authenticator-manual-setup {
    min-width: 0;
}

.authenticator-qr-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
    text-align: center;
}

.authenticator-qr-card h2,
.authenticator-qr-card h3,
.authenticator-manual-setup h2,
.authenticator-manual-setup h3 {
    margin-top: 0;
}

.authenticator-qr-code {
    display: grid;
    place-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: .65rem;
    border-radius: .65rem;
    background: #fff;
}

.authenticator-qr-code img,
.authenticator-qr-code canvas {
    display: block;
    max-width: 100%;
    height: auto !important;
}

@media (max-width: 650px) {
    .authenticator-setup-grid {
        grid-template-columns: 1fr;
    }
}

.code-input {
    max-width: 18rem;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

.recovery-code-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.recovery-code-list li {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--surface-soft);
    font-family: Consolas, "Courier New", monospace;
    font-weight: 800;
}

.auth-brand {
    margin-bottom: 2.5rem;
}

.auth-card h1 {
    font-size: clamp(2.5rem, 7vw, 3.75rem);
}

.auth-card form {
    margin-top: 2rem;
}

.form-field {
    margin-bottom: 1.25rem;
}

.field-label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 750;
}

.edit-panel {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.compact-panel {
    margin-bottom: 1.25rem;
}

.aligned-checkbox {
    display: flex;
    align-items: center;
    padding-top: 1.85rem;
}

.checkbox-list,
.permission-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkbox-list li,
.permission-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #edf0ed;
}

.checkbox-list li:last-child,
.permission-list li:last-child {
    border-bottom: 0;
}

.checkbox-list input,
.permission-list input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
}

.member-add-grid {
    grid-template-columns: minmax(14rem, 2fr) minmax(12rem, 1fr) auto;
    align-items: end;
}

.member-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.member-option {
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.member-option h3,
.member-signin-panel h3 {
    margin: 0 0 0.5rem;
    color: var(--section-heading);
    font-size: 1.2rem;
}

.member-signin-panel {
    margin: 1.25rem 0;
    padding: 1.25rem;
    border: 1px solid #b8ccbe;
    border-radius: 0.85rem;
    background: var(--primary-soft);
}

.danger-details {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.danger-details summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    color: var(--danger-dark);
    font-weight: 750;
    cursor: pointer;
}

code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    color: #37473d;
    background: #e8ece8;
    font-size: 0.92em;
}

.form-grid {
    display: grid;
    gap: 1.25rem;
}

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

fieldset {
    min-width: 0;
    margin: 0 0 2rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
}

fieldset legend {
    padding: 0 0.5rem;
    font-size: 1.1rem;
}

.checkbox-field {
    margin: 0.25rem 0 1.25rem;
}

.checkbox-field label {
    margin-left: 0.45rem;
}

.checkbox-field input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

.quiet-link {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
}

.form-message:empty,
.field-error:empty {
    display: none;
}

.form-message {
    display: block;
    margin: 0.8rem 0;
    font-weight: 650;
}

.field-error,
.error-message {
    display: block;
    margin-top: 0.35rem;
    color: var(--danger-dark);
    font-weight: 650;
}

.success-message {
    color: var(--success);
}

.notice {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid;
    border-radius: 0.75rem;
}

.notice-error {
    border-color: #dda4a4;
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.notice-warning {
    border-color: #e1c27d;
    color: #634208;
    background: var(--warning-soft);
}

.notice-success {
    border-color: #a3cdb2;
    color: var(--success);
    background: var(--success-soft);
}

.notice ul {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
}

.completion-panel,
.empty-state {
    text-align: center;
}

.completion-panel h2 {
    margin: 1rem 0 0.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}

.success-mark,
.empty-state-icon {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    color: var(--success);
    background: var(--success-soft);
    font-size: 1.8rem;
    font-weight: 800;
}

.empty-state {
    max-width: 42rem;
    margin: 4rem auto;
    padding: 3rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.empty-state-icon {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.empty-state h1 {
    margin-top: 1.25rem;
    font-size: clamp(2rem, 5vw, 3rem);
}

.empty-state .button {
    margin-top: 1.5rem;
}

.data-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.join-family-panel {
    margin-bottom: 1.25rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.join-family-panel h2 {
    margin-top: 0;
}

.join-family-panel > p {
    max-width: 52rem;
    color: var(--text-muted);
}

.join-family-fields {
    max-width: 58rem;
    margin: 1.25rem 0;
}

.address-lookup-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: stretch;
}

.address-autocomplete {
    position: relative;
    min-width: 0;
}

.address-lookup-input-row .button {
    min-width: 9rem;
}

.address-lookup-results {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    display: grid;
    max-height: 23rem;
    gap: 0.25rem;
    padding: 0.35rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
    box-shadow: 0 1rem 2.5rem rgba(25, 43, 34, 0.18);
}

.address-lookup-results[hidden] {
    display: none;
}

.address-suggestion {
    width: 100%;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--surface-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion:focus-visible,
.address-suggestion.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.address-suggestion span {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-weight: 800;
}

.google-maps-attribution {
    padding: 0.45rem 0.75rem 0.35rem;
    color: #5e5e5e;
    background: #fff;
    font-family: Roboto, Arial, sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.address-attribution {
    display: block;
    margin-top: 0.65rem;
}

.table-scroll {
    overflow-x: auto;
}

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

.data-table th,
.data-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #e7ebe7;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: #435148;
    background: #f4f7f4;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.data-table tr:hover td {
    background: #fbfcfa;
}

.permission-matrix-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
}

.permission-matrix {
    width: 100%;
    min-width: 51rem;
    border-collapse: collapse;
}

.permission-matrix th,
.permission-matrix td {
    padding: 0.85rem 0.7rem;
    border-bottom: 1px solid #e7ebe7;
    text-align: center;
    vertical-align: middle;
}

.permission-matrix thead th {
    color: #435148;
    background: #f4f7f4;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.permission-matrix th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 12rem;
    border-right: 1px solid var(--border);
    background: #f8faf7;
    text-align: left;
}

.permission-matrix thead th:first-child {
    z-index: 2;
    background: #eef3ef;
}

.permission-matrix tr:last-child th,
.permission-matrix tr:last-child td {
    border-bottom: 0;
}

.permission-matrix input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.permission-matrix input[type="checkbox"]:disabled,
.permission-matrix .aspNetDisabled input[type="checkbox"] {
    cursor: not-allowed;
    opacity: .52;
}

.permission-matrix input[type="checkbox"][disabled] {
    cursor: not-allowed;
}

.permission-other-cell {
    min-width: 14rem;
    text-align: left !important;
}

.permission-other-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.permission-other-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.permission-other-list li > span {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}

.permission-other-list input[type="checkbox"] {
    flex: 0 0 1.35rem;
    margin-top: 0.08rem;
}

.permission-other-list label {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.permission-matrix-help {
    margin-top: 0.75rem;
}

.embedded-permission-section {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

.embedded-permission-section > p {
    margin: 0.4rem 0 1.25rem;
    color: var(--text-muted);
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.section-heading-row h2,
.section-heading-row p {
    margin: 0;
}

.section-heading-row p {
    margin-top: 0.35rem;
    color: var(--text-muted);
}

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

.form-grid.align-end {
    align-items: end;
}

.feature-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.feature-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 6.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.feature-choice input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
}

.feature-choice span,
.feature-choice strong,
.feature-choice small {
    display: block;
}

.event-description-placement {
    margin: 0;
    padding: 0;
    border: 0;
}

.event-description-placement legend {
    margin-bottom: 0.55rem;
    color: var(--heading);
    font-weight: 750;
}

.radio-choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.radio-choice-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 3.75rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.radio-choice-list input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
}

.radio-choice-list label {
    flex: 1;
    color: var(--heading);
    font-weight: 700;
    cursor: pointer;
}

.current-event-photo {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(14rem, 1fr);
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.current-event-photo .form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--heading);
    font-weight: 700;
}

.current-event-photo img {
    display: block;
    width: 100%;
    max-height: 13rem;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
}

.remove-photo-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--danger);
    border-radius: 0.7rem;
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.remove-photo-choice input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.remove-photo-choice label {
    cursor: pointer;
}

.form-grid.two-columns > .form-field:not(.full-width) textarea {
    height: 8.25rem;
    resize: vertical;
}

@media (max-width: 720px) {
    .current-event-photo {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .discussion-subscription-panel details > summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .discussion-summary-action {
        grid-column: 2;
    }

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

    .discussion-thread-summary {
        grid-column: 2;
        justify-content: start;
        text-align: left;
    }
}

/* Messaging */
.messages-page .content-shell { width: min(100% - 1.25rem, 92rem); padding-block: clamp(1rem,2vw,1.6rem); }
.messages-shell { min-width: 0; display: grid; gap: .65rem; }
.messages-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; padding: .15rem clamp(.25rem,1vw,.75rem); }
.messages-page-heading h1 { margin: .1rem 0 .2rem; font-size: clamp(2.15rem,4vw,3.45rem); }
.messages-page-heading p { margin: 0; color: var(--text-muted); }
.messages-page-heading .eyebrow { color: var(--accent); }
.messages-connection { min-height: 1.85rem; display: inline-flex; width: fit-content; align-items: center; gap: .48rem; margin-inline: .4rem; padding: .25rem .68rem; border: 1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius: 999px; color: var(--text-muted); background: rgba(255,255,255,.78); font-size: .8rem; font-weight: 750; }
.messages-connection-state { display: inline-flex; align-items: center; gap: .3rem; }
.messages-connection-retry { min-height: 1.55rem; padding: .1rem .2rem; border: 0; color: var(--primary-dark); background: transparent; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: .14rem; cursor: pointer; }
.messages-connection-retry:hover,.messages-connection-retry:focus-visible { color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.messages-connection-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #bd7b22; box-shadow: 0 0 0 .2rem rgba(189,123,34,.15); }
.messages-connection.is-live .messages-connection-dot { background: #25855f; box-shadow: 0 0 0 .2rem rgba(37,133,95,.15); }
.messages-connection.is-offline .messages-connection-dot { background: #9b4b56; box-shadow: 0 0 0 .2rem rgba(155,75,86,.14); }
.messages-connection.is-connecting .messages-connection-dot { animation: messages-connection-pulse 1.2s ease-in-out infinite; }
@keyframes messages-connection-pulse { 50% { opacity: .45; transform: scale(.8); } }
.messages-workspace { min-width: 0; height: clamp(36rem,calc(100dvh - 13rem),55rem); display: grid; grid-template-columns: minmax(19rem,23.5rem) minmax(0,1fr); overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb,var(--primary) 13%,var(--border)); border-radius: 1.2rem; background: #fff; box-shadow: 0 .8rem 2.2rem rgba(31,49,40,.1); }
.messages-conversation-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: color-mix(in srgb,var(--surface-soft) 78%,#fff); }
.messages-pane-heading { min-height: 4.7rem; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); }
.messages-pane-heading > div { min-width: 0; display: grid; gap: .05rem; }
.messages-pane-heading h2 { margin: 0; font-family: var(--site-font); font-size: 1.2rem; }
.messages-pane-kicker { color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.messages-search-button,.messages-header-action { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; color: var(--primary-dark); background: #fff; cursor: pointer; font: inherit; font-size: 1.45rem; font-weight: 900; transition: background-color .16s ease,border-color .16s ease,transform .16s ease; }
.messages-search-button:hover,.messages-search-button:focus-visible,.messages-header-action:hover,.messages-header-action:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 0; }
.messages-search-button:active,.messages-header-action:active { transform: scale(.96); }
.messages-search-button svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.messages-list-tabs { min-height: 2.85rem; display: flex; align-items: end; flex: 0 0 auto; gap: .15rem; padding: .4rem .75rem 0; border-bottom: 1px solid var(--border); background: #fff; }
.messages-list-tabs button { min-height: 2.35rem; padding: .35rem .7rem; border: 0; border-bottom: .2rem solid transparent; color: var(--text-muted); background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.messages-list-tabs button.is-active { border-bottom-color: var(--primary); color: var(--primary-dark); }
.messages-list-tabs span { margin: 0 0 .65rem auto; color: var(--text-muted); font-size: .75rem; }
.messages-list-status,.messages-history-status { padding: 1rem; color: var(--text-muted); text-align: center; }
.messages-list-status.is-loading,.messages-history-status.is-loading { font-weight: 700; }
.messages-list-status.is-empty,.messages-history-status.is-empty { max-width: 28rem; align-self: center; padding: 1.25rem; line-height: 1.45; }
.messages-list-status.is-error,.messages-history-status.is-error { margin: .75rem; border: 1px solid color-mix(in srgb,var(--danger) 30%,var(--border)); border-radius: .7rem; color: var(--danger-dark); background: var(--danger-soft); font-weight: 750; }
.messages-retry-load { justify-self: center; margin: .2rem .75rem .5rem; padding: .42rem .7rem; border: 1px solid color-mix(in srgb,var(--danger) 28%,var(--border)); border-radius: .65rem; color: var(--primary-dark); background: #fff; font: inherit; font-size: .8rem; font-weight: 850; cursor: pointer; }
.messages-retry-load:hover,.messages-retry-load:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 2px solid var(--focus); outline-offset: 1px; }
.messages-conversation-list { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.messages-conversation-card { position: relative; width: 100%; min-height: 5.5rem; display: grid; grid-template-columns: 3rem minmax(0,1fr) auto; gap: .72rem; align-items: start; padding: .82rem .9rem; overflow: hidden; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--border) 68%,transparent); color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: background-color .16s ease,box-shadow .16s ease; }
.messages-conversation-card:hover,.messages-conversation-card:focus-visible { background: color-mix(in srgb,var(--primary-soft) 72%,#fff); }
.messages-conversation-card:focus-visible { z-index: 1; outline: 3px solid var(--focus); outline-offset: -3px; }
.messages-conversation-card.is-active { background: color-mix(in srgb,var(--primary-soft) 88%,#fff); box-shadow: inset .28rem 0 var(--primary); }
.messages-conversation-card.is-unread:not(.is-active) { background: color-mix(in srgb,var(--primary-soft) 48%,#fff); }
.messages-conversation-card.is-unread .messages-conversation-title-row strong { color: var(--primary-dark); font-weight: 900; }
.messages-avatar,.messages-chat-avatar { width: 3rem; height: 3rem; display: grid; place-items: center; flex: 0 0 auto; border: .18rem solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--primary),var(--primary-dark)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--primary) 22%,var(--border)); font-size: .8rem; font-weight: 900; letter-spacing: .03em; }
.messages-avatar.is-group,.messages-chat-avatar.is-group { border-radius: .92rem; background: linear-gradient(145deg,var(--accent),#74451f); }
.messages-conversation-copy { min-width: 0; display: grid; gap: .2rem; padding-top: .05rem; }
.messages-conversation-title-row { min-width: 0; display: flex; gap: .45rem; align-items: baseline; justify-content: space-between; }
.messages-conversation-title-row strong { min-width: 0; overflow: hidden; font-size: .94rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.messages-conversation-title-row time { flex: 0 0 auto; color: var(--text-muted); font-size: .7rem; font-weight: 650; }
.messages-conversation-preview { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: .83rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.messages-conversation-muted { width: fit-content; display: inline-flex; align-items: center; gap: .25rem; color: var(--accent); font-size: .69rem; font-weight: 850; }
.messages-conversation-muted::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
.messages-conversation-unread { min-width: 1.4rem; height: 1.4rem; display: grid; place-items: center; align-self: end; padding-inline: .3rem; border-radius: 999px; color: #fff; background: var(--primary); box-shadow: 0 .15rem .35rem rgba(23,68,53,.2); font-size: .7rem; font-weight: 900; }
.messages-load-more { margin: .75rem; }
.messages-chat-pane { min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 88% 6%,rgba(225,239,232,.7),transparent 22rem),linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--surface-soft) 55%,#fff) 100%); }
.messages-chat-empty { height: 100%; display: grid; align-content: center; justify-items: center; gap: .45rem; padding: 2rem; color: var(--text-muted); text-align: center; }
.messages-chat-empty h2,.messages-chat-empty p { margin: 0; }
.messages-chat-empty h2 { color: var(--heading); }
.messages-empty-icon { width: 4.15rem; height: 4.15rem; display: grid; place-items: center; margin-bottom: .45rem; border-radius: 1.15rem; color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent); }
.messages-empty-icon svg { width: 2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.messages-chat { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto auto auto minmax(0,1fr) auto auto; overflow: hidden; }
.messages-chat-header { position: sticky; top: 0; z-index: 5; min-width: 0; min-height: 4.7rem; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; overflow: hidden; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.94); box-shadow: 0 .2rem .65rem rgba(31,49,40,.06); backdrop-filter: blur(.8rem); }
.messages-chat-heading-copy { min-width: 0; flex: 1; }
.messages-chat-heading-copy h2,.messages-chat-heading-copy p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.messages-chat-heading-copy h2 { font-family: var(--site-font); font-size: 1.08rem; }
.messages-chat-heading-copy p { margin-top: .1rem; color: var(--text-muted); font-size: .78rem; }
.messages-chat-avatar { width: 2.65rem; height: 2.65rem; font-size: .72rem; }
.messages-chat-header-actions { display: flex; align-items: center; gap: .45rem; }
.messages-mobile-back { width: 2.65rem; height: 2.65rem; display: none; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; color: var(--primary-dark); background: var(--primary-soft); cursor: pointer; }
.messages-mobile-back svg { width: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.messages-conversation-notice { z-index: 3; padding: .48rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); background: color-mix(in srgb,var(--surface-soft) 80%,#fff); font-size: .78rem; font-weight: 700; text-align: center; }
.messages-conversation-notice.is-offline { color: var(--warning); background: var(--warning-soft); }
.messages-conversation-notice.is-blocked { color: var(--danger-dark); background: var(--danger-soft); }
.messages-load-earlier { justify-self: center; margin: .4rem 0 0; padding: .35rem .75rem; border: 0; color: var(--primary-dark); background: transparent; font-weight: 800; text-decoration: underline; cursor: pointer; }
.messages-history-region { position: relative; min-width: 0; min-height: 0; display: grid; overflow: hidden; }
.messages-history { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .22rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 1rem clamp(.9rem,2vw,1.6rem); scroll-behavior: smooth; scrollbar-gutter: stable; }
.messages-history:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.messages-new-below { position: absolute; z-index: 4; right: 50%; bottom: .9rem; min-height: 2.35rem; display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .72rem; border: 1px solid color-mix(in srgb,var(--primary) 28%,var(--border)); border-radius: 999px; color: #fff; background: var(--primary-dark); box-shadow: 0 .35rem 1rem rgba(23,68,53,.24); font: inherit; font-size: .78rem; font-weight: 850; cursor: pointer; transform: translateX(50%); transition: background-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.messages-new-below svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.messages-new-below:hover,.messages-new-below:focus-visible { background: var(--primary); box-shadow: 0 .45rem 1.2rem rgba(23,68,53,.3); outline: 3px solid var(--focus); outline-offset: 2px; transform: translateX(50%) translateY(-1px); }
.messages-day-label { align-self: center; margin: .35rem 0; padding: .25rem .65rem; border-radius: 999px; color: var(--text-muted); background: rgba(255,255,255,.9); font-size: .72rem; font-weight: 800; }
.messages-bubble-row { position: relative; min-width: 0; max-width: min(74%,43rem); display: grid; align-self: flex-start; gap: .18rem; margin-top: .62rem; transition: opacity .16s ease,transform .16s ease; }
.messages-bubble-row.is-arriving { animation: messages-arrive .2s ease-out both; }
.messages-bubble-row.is-pending { opacity: .74; }
.messages-bubble-row.is-failed { opacity: 1; }
@keyframes messages-arrive { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.messages-bubble-row.is-grouped { margin-top: .05rem; }
.messages-bubble-row.is-mine { align-self: flex-end; justify-items: end; }
.messages-sender { padding-inline: .38rem; color: var(--text-muted); font-size: .72rem; font-weight: 850; }
.messages-bubble-row.is-grouped .messages-sender { display: none; }
.messages-bubble-line { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: .35rem; }
.messages-bubble-row.is-mine .messages-bubble-line { flex-direction: row-reverse; }
.messages-bubble { min-width: 0; max-width: 100%; flex: 0 1 auto; padding: .66rem .85rem; border: 1px solid color-mix(in srgb,var(--border) 85%,transparent); border-radius: .35rem 1rem 1rem 1rem; background: #fff; box-shadow: 0 .18rem .55rem rgba(31,49,40,.06); white-space: pre-wrap; overflow-wrap: anywhere; }
.messages-bubble-row.is-mine .messages-bubble { border-color: transparent; border-radius: 1rem .35rem 1rem 1rem; color: #fff; background: linear-gradient(145deg,var(--primary),var(--primary-dark)); }
.messages-bubble-row.is-failed .messages-bubble { border-color: color-mix(in srgb,var(--danger) 45%,var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--danger-soft) 72%,transparent); }
.messages-message-action { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 50%; opacity: 0; color: var(--text-muted); background: rgba(255,255,255,.92); font-size: 1.2rem; line-height: 1; cursor: pointer; pointer-events: none; transform: translateX(-.2rem); transition: opacity .14s ease,transform .14s ease,background-color .14s ease; }
.messages-bubble-row.is-mine .messages-message-action { transform: translateX(.2rem); }
.messages-bubble-row:hover .messages-message-action,.messages-bubble-row:focus-within .messages-message-action,.messages-message-action:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
.messages-message-action:hover,.messages-message-action:focus-visible { border-color: color-mix(in srgb,var(--primary) 25%,var(--border)); color: var(--primary-dark); background: var(--primary-soft); outline: 2px solid var(--focus); outline-offset: 1px; }
.messages-meta { display: flex; align-items: center; gap: .3rem; padding-inline: .38rem; color: var(--text-muted); font-size: .69rem; }
.messages-bubble-row.is-mine .messages-meta { justify-content: flex-end; }
.messages-send-state { display: inline-flex; align-items: center; gap: .25rem; font-weight: 750; }
.messages-send-state::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; opacity: .75; }
.messages-send-state.is-sending::before { animation: messages-connection-pulse 1s ease-in-out infinite; }
.messages-send-state.is-failed { color: var(--danger-dark); font-weight: 850; }
.messages-send-state.is-delivered,.messages-send-state.is-read { color: var(--success); font-weight: 850; }
.messages-retry-send { min-height: 1.6rem; padding: .08rem .28rem; border: 0; color: var(--danger-dark); background: transparent; font: inherit; font-size: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: .13rem; cursor: pointer; }
.messages-retry-send:hover,.messages-retry-send:focus-visible { color: var(--primary-dark); outline: 2px solid var(--focus); outline-offset: 1px; }
.messages-typing { min-height: 1.5rem; padding: .1rem 1.25rem; color: var(--text-muted); font-size: .78rem; font-style: italic; }
.messages-composer { position: sticky; bottom: 0; z-index: 5; min-width: 0; display: grid; gap: .5rem; padding: .72rem .9rem .85rem; overflow: hidden; border-top: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: 0 -.35rem 1rem rgba(31,49,40,.07); backdrop-filter: blur(.8rem); }
.messages-composer textarea { width: 100%; min-height: 2.75rem; max-height: 9rem; resize: none; padding: .68rem .82rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: #fff; font: inherit; line-height: 1.4; }
.messages-composer textarea:focus { outline: 3px solid color-mix(in srgb,var(--focus) 35%,transparent); border-color: var(--primary); }
.messages-composer-row { min-width: 0; display: grid; grid-template-columns: 2.75rem minmax(0,1fr) auto; align-items: end; gap: .55rem; }
.messages-composer-row > .button { min-height: 2.75rem; flex: 0 0 auto; }
.messages-composer-help { color: var(--text-muted); font-size: .72rem; }
.messages-composer .form-message { min-height: 0; margin: 0; padding: 0; font-size: .8rem; }
.messages-upload-progress { display: grid; gap: .24rem; padding-inline: .15rem; color: var(--text-muted); font-size: .76rem; }
.messages-upload-progress > div { display: flex; justify-content: space-between; gap: .75rem; }
.messages-upload-progress strong { color: var(--primary-dark); }
.messages-upload-progress progress { width: 100%; height: .42rem; overflow: hidden; border: 0; border-radius: 999px; accent-color: var(--primary); }
.messages-composer-feedback { min-height: 1.1rem !important; color: var(--text-muted); font-weight: 700; }
.messages-composer-feedback.is-working { color: var(--primary-dark); }
.messages-composer-feedback.is-success { color: var(--success); }
.messages-composer-feedback.is-error { color: var(--danger-dark); }
.messages-connection-retry[hidden],.messages-retry-load[hidden],.messages-new-below[hidden],.messages-upload-progress[hidden] { display: none !important; }
.messages-dialog { width: min(42rem,calc(100% - 2rem)); max-height: min(48rem,calc(100vh - 2rem)); padding: 0; overflow: hidden; border: 0; border-radius: 1.05rem; color: var(--text); background: #fff; box-shadow: 0 1.5rem 4rem rgba(17,35,28,.3); }
.messages-dialog[open] { display: flex; flex-direction: column; }
.messages-dialog::backdrop { background: rgba(18,31,26,.66); backdrop-filter: blur(2px); }
.messages-dialog-header { display: flex; align-items: start; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1.25rem 1.35rem 1rem; border-bottom: 1px solid var(--border); }
.messages-dialog-header h2,.messages-dialog-header p { margin: 0; }
.messages-dialog-header h2 { margin-top: .25rem; font-size: 1.6rem; }
.messages-dialog-body { min-height: 0; max-height: calc(100vh - 13rem); display: grid; flex: 1 1 auto; gap: 1rem; overflow-y: auto; padding: 1.15rem 1.35rem; }
.messages-dialog-body label,.messages-recipient-fieldset legend { color: var(--text); font-weight: 850; }
.messages-dialog-body .field-help { margin: -.5rem 0 0; color: var(--text-muted); font-size: .88rem; }
.messages-dialog-actions { display: flex; justify-content: flex-end; flex: 0 0 auto; gap: .65rem; padding: .9rem 1.35rem 1.2rem; border-top: 1px solid var(--border); background: #fff; }
.messages-recipient-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.messages-recipient-list { display: grid; gap: .45rem; margin-top: .55rem; }
.messages-recipient-option { min-height: 3.25rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); cursor: pointer; }
.messages-recipient-option input { width: 1.15rem; height: 1.15rem; }
.messages-recipient-option small { color: var(--text-muted); }
.messages-recipient-option.is-unavailable { cursor: default; opacity: .72; }
.messages-invite-link { font-weight: 800; }
.messages-participant-list { display: grid; gap: .5rem; }
.messages-participant { min-height: 3.5rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .75rem; }
.messages-participant-copy { display: grid; gap: .1rem; }
.messages-participant-copy small { color: var(--text-muted); }
.messages-participant-actions { display: flex; align-items: center; gap: .45rem; }
.messages-participant-actions select { min-height: 2.35rem; padding: .35rem 1.9rem .35rem .55rem; }
.messages-participant-actions button { min-height: 2.35rem; }
.messages-group-dialog section { display: grid; gap: .6rem; }
.messages-group-dialog h3 { margin: 0; font-family: var(--site-font); font-size: 1.05rem; }
.messages-history-choice { align-items: start; padding: .75rem; border-radius: .75rem; background: var(--primary-soft); }
.messages-history-choice span { display: grid; gap: .15rem; }
.messages-history-choice small { color: var(--text-muted); font-weight: 500; }
.messages-actions-dialog .messages-dialog-body > .button { width: 100%; justify-content: center; }
.messages-actions-dialog .field-help { margin: 0; }
.messages-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; }
.messages-search-status { min-height: 1.3rem; color: var(--text-muted); }
.messages-search-results { display: grid; gap: .55rem; }
.messages-search-result { display: grid; gap: .3rem; width: 100%; padding: .8rem; border: 1px solid var(--border); border-radius: .8rem; color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.messages-search-result:hover,.messages-search-result:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 2px solid color-mix(in srgb,var(--focus) 55%,transparent); }
.messages-search-result-heading { display: flex; justify-content: space-between; gap: 1rem; }
.messages-search-result-heading time,.messages-search-result small { color: var(--text-muted); font-size: .78rem; }
.messages-search-result-body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-wrap; overflow-wrap: anywhere; }
.messages-report-context { display: grid; gap: .45rem; }
.messages-report-preview { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface-soft); }
.messages-report-preview.is-reported { border: 2px solid var(--accent); background: var(--primary-soft); }
.messages-report-preview p { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.messaging-report-list { display: grid; gap: 1rem; }
.messaging-rollout-panel { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.messaging-rollout-fields { display: grid; grid-template-columns: minmax(16rem,1fr) minmax(18rem,1.25fr); gap: 1rem; align-items: end; }
.messaging-send-toggle { min-height: 3.2rem; align-items: start; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
.messaging-send-toggle span { display: grid; gap: .15rem; }
.messaging-send-toggle small { color: var(--text-muted); font-weight: 500; }
.messaging-operational-detail { margin-top: 1rem; }
.messaging-operational-detail > summary { width: fit-content; color: var(--primary-dark); font-weight: 850; cursor: pointer; }
.messaging-operational-detail[open] > summary { margin-bottom: .75rem; }
.messages-send-paused { margin: 0 0 .75rem; }
.messaging-report-card { display: grid; gap: .9rem; padding: 1rem; }
.messaging-report-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.messaging-report-card h3 { margin: .3rem 0 0; font-family: var(--font-body); }
.messaging-report-card time { color: var(--text-muted); font-size: .85rem; }
.messaging-report-facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; }
.messaging-report-facts div { display: grid; gap: .15rem; }
.messaging-report-facts dt { color: var(--text-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.messaging-report-facts dd { margin: 0; font-weight: 800; }
.messaging-report-details p { margin: .25rem 0 0; }
.messaging-report-context pre { max-height: 20rem; margin: .35rem 0 0; overflow: auto; padding: .8rem; border-radius: .7rem; background: var(--surface-soft); color: var(--text); font: inherit; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-messaging-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,32rem),1fr)); align-items: stretch; gap: 1rem; margin: 1.5rem 0; }
.profile-messaging-grid .profile-section { min-width: 0; margin: 0; }
.profile-messaging-settings,.profile-guardian-messaging { display: grid; gap: 1rem; }
.profile-messaging-preview { margin: 0; padding: 0; border: 0; }
.profile-messaging-preview legend { margin-bottom: .45rem; font-weight: 850; }
.profile-radio-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.profile-radio-list li { display: flex; align-items: flex-start; gap: .65rem; margin: 0; }
.profile-radio-list input[type="radio"] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: .18rem 0 0; }
.profile-radio-list label { margin: 0; line-height: 1.45; cursor: pointer; }
.profile-messaging-email-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(10rem,1fr); gap: .8rem; align-items: end; }
.profile-data-export { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.profile-data-export > div { display: grid; gap: .15rem; }
.profile-data-export small,.profile-dependent-message-option small { color: var(--text-muted); }
.profile-dependent-message-list { display: grid; gap: .55rem; }
.profile-dependent-message-option { display: grid; gap: .2rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
.profile-dependent-message-control,
.profile-dependent-message-control > .aspNetDisabled { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.profile-dependent-message-control input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; flex: 0 0 auto; }
.profile-dependent-message-control label { margin: 0; line-height: 1.35; font-weight: 650; }

@media (max-width: 48rem) {
    .messages-page .content-shell { width: 100%; padding: .6rem; }
    .messages-shell { gap: .5rem; }
    .messages-page-heading { align-items: center; }
    .messages-page-heading h1 { font-size: 2.05rem; }
    .messages-page-heading > div > p:not(.eyebrow) { display: none; }
    .messages-page-heading .button { padding-inline: .8rem; }
    .messages-connection { margin-inline: .2rem; }
    .messages-workspace { height: calc(100dvh - 15.5rem); min-height: 28rem; max-height: none; display: block; border-radius: .9rem; }
    .messages-conversation-pane,.messages-chat-pane { width: 100%; height: 100%; min-height: 0; border: 0; }
    .messages-chat-pane { display: none; }
    .messages-workspace.is-conversation-open .messages-conversation-pane { display: none; }
    .messages-workspace.is-conversation-open .messages-chat-pane { display: block; }
    .messages-pane-heading,.messages-chat-header { min-height: 4.2rem; padding: .55rem .75rem; }
    .messages-pane-kicker { display: none; }
    .messages-mobile-back { display: grid; }
    .messages-chat-avatar { width: 2.4rem; height: 2.4rem; }
    .messages-chat-heading-copy h2 { font-size: 1rem; }
    .messages-chat-heading-copy p { font-size: .7rem; }
    .messages-conversation-notice { padding: .38rem .7rem; font-size: .72rem; }
    .messages-history { padding: .7rem .65rem; }
    .messages-new-below { bottom: .65rem; max-width: calc(100% - 1.5rem); }
    .messages-bubble-row { max-width: calc(100% - .35rem); }
    .messages-message-action { opacity: 1; pointer-events: auto; transform: none !important; }
    .messages-meta { font-size: .66rem; }
    .messages-typing { padding-inline: .8rem; }
    .messages-composer { gap: .38rem; padding: .55rem .65rem .65rem; }
    .messages-composer textarea { min-height: 2.75rem; max-height: 6.5rem; resize: none; padding: .65rem .75rem; }
    .messages-composer-row { align-items: end; gap: .55rem; }
    .messages-composer-row > .button { min-width: 4.4rem; }
    .messages-composer-help { display: none; }
    .messages-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
    .messages-dialog-body { max-height: calc(100dvh - 11rem); padding-inline: 1rem; }
    .messages-dialog-header,.messages-dialog-actions { padding-inline: 1rem; }
    .messages-participant { grid-template-columns: auto minmax(0,1fr); }
    .messages-participant-actions { grid-column: 2; flex-wrap: wrap; }
    .messages-search-form { grid-template-columns: 1fr; }
    .profile-messaging-email-row { grid-template-columns: 1fr; }
    .profile-data-export { align-items: stretch; flex-direction: column; }
    .messaging-rollout-fields { grid-template-columns: 1fr; }
}

@media (max-width: 29rem) {
    .messages-page-heading .eyebrow { display: none; }
    .messages-page-heading h1 { font-size: 1.85rem; }
    .messages-connection { margin-inline: 0; }
    .messages-workspace { height: calc(100dvh - 14.5rem); }
    .messages-chat-avatar { display: none; }
    .messages-conversation-card { grid-template-columns: 2.75rem minmax(0,1fr) auto; padding-inline: .7rem; }
    .messages-avatar { width: 2.75rem; height: 2.75rem; }
    .messages-composer { padding-inline: .55rem; }
    .messages-dialog-actions .button { flex: 1; }
}

@media (hover: none), (pointer: coarse) {
    .messages-message-action { opacity: 1; pointer-events: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .messages-history { scroll-behavior: auto; }
    .messages-dialog::backdrop { backdrop-filter: none; }
    .messages-connection-dot,.messages-send-state::before,.messages-bubble-row.is-arriving,.messages-bubble-row.is-highlighted { animation: none !important; }
    .messages-bubble-row,.messages-new-below,.messages-message-action,.messages-search-button,.messages-header-action,.messages-attach-button { transition: none !important; }
}

.event-feature-settings {
    margin-top: 1rem;
    border-left: 0.35rem solid var(--primary);
    background: linear-gradient(105deg, var(--primary-soft), var(--surface) 26%);
}

.event-feature-settings[hidden] {
    display: none !important;
}

.event-settings-icon {
    min-width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: 1.15rem;
    font-weight: 850;
}

.event-section-order-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: event-section-order;
}

.event-section-order-list > li {
    counter-increment: event-section-order;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.event-section-order-list > li > div:first-child {
    position: relative;
    padding-left: 2.5rem;
}

.event-section-order-list > li > div:first-child::before {
    content: counter(event-section-order);
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: 0.85rem;
    font-weight: 850;
}

.event-section-order-list strong,
.event-section-order-list small {
    display: block;
}

.event-section-order-list small {
    margin-top: 0.2rem;
    color: var(--text-muted);
}

.order-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.feature-choice strong {
    color: var(--heading);
    font-size: 1.05rem;
}

.feature-choice small {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin-top: 1.25rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -0.6rem 1.5rem rgba(35, 53, 42, 0.08);
}

.form-card-narrow {
    max-width: 56rem;
}

.event-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.event-hero h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(2.2rem, 6vw, 4.7rem);
    line-height: 1;
}

.event-lead {
    max-width: 54rem;
    margin: 0.8rem 0 0;
    color: var(--text-muted);
    font-size: 1.15rem;
}

.event-fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.event-fact {
    min-height: 7rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
}

.event-fact span,
.event-fact strong,
.event-fact small {
    display: block;
}

.event-fact span {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.event-fact strong {
    margin-top: 0.35rem;
    color: var(--heading);
    font-size: 1.05rem;
}

.event-fact small {
    margin-top: 0.3rem;
    color: var(--text-muted);
}

.event-primary-actions {
    margin-bottom: 1.25rem;
}

.event-info-block {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 0.3rem solid var(--primary);
    border-radius: 0.35rem;
    background: var(--primary-soft);
}

.event-info-block h3,
.event-info-block p {
    margin: 0;
}

.event-info-block p {
    margin-top: 0.4rem;
}

.contribution-panel {
    border-top: 0.3rem solid var(--accent);
}

.contribution-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0.4rem 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.7rem;
    background: var(--warning-soft);
}

.contribution-amount span {
    color: var(--text-muted);
}

.contribution-amount strong {
    color: var(--heading);
    font-size: 1.45rem;
}

.attendance-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.attendance-totals > div {
    padding: 0.9rem;
    border-radius: 0.75rem;
    background: var(--primary-soft);
    text-align: center;
}

.attendance-totals strong,
.attendance-totals span {
    display: block;
}

.attendance-totals strong {
    color: var(--heading);
    font-size: 1.75rem;
}

.attendance-totals span {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.allergy-warning {
    margin-bottom: 1rem;
    border-left: 0.4rem solid var(--warning);
}

.allergy-warning h2,
.allergy-warning p {
    margin: 0;
}

.allergy-warning p {
    margin-top: 0.45rem;
}

.allergy-acknowledgement {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 2px solid var(--warning);
    border-radius: 0.75rem;
    background: var(--warning-soft);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: var(--success);
    background: var(--success-soft);
    font-size: 0.8rem;
    font-weight: 750;
}

.status-pill.inactive {
    color: #6d4c16;
    background: var(--warning-soft);
}

.status-pill.not-expected {
    color: var(--text-muted);
    background: #edf1ee;
}

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

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    white-space: nowrap;
}

.breadcrumb > * {
    flex: 0 0 auto;
}

.breadcrumb a {
    font-weight: 700;
}

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

.settings-card {
    min-height: 9rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0.75rem 2rem rgba(35, 53, 42, 0.05);
    text-decoration: none;
}

.settings-card:hover {
    border-color: #94b5a4;
    color: var(--text);
    box-shadow: var(--shadow);
}

.settings-card strong,
.settings-card small {
    display: block;
}

.settings-card strong {
    font-size: 1.15rem;
}

.settings-card small {
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.97rem;
    line-height: 1.55;
}

.advanced-settings-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.35rem 1.5rem;
}

.advanced-settings-link h2,
.settings-form h2 {
    margin: 0;
    color: var(--section-heading);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.advanced-settings-link p,
.settings-form h2 + p,
.section-title-row p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.settings-form {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.settings-section {
    padding: 0 0 2rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--border);
}

.settings-section:last-of-type {
    margin-bottom: 1.5rem;
}

.settings-section > h2 + p,
.settings-section > .section-title-row + .checkbox-field {
    margin-top: 1rem;
}

.section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.settings-field-medium {
    max-width: 26rem;
    margin-top: 1.25rem;
}

.input-with-suffix {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.input-with-suffix .text-input {
    max-width: 8rem;
}

.large-check {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    margin: 0.75rem 0;
}

.large-check input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0 0.6rem 0 0;
    vertical-align: middle;
}

.large-check label {
    font-weight: 650;
}

.unavailable-setting {
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 2rem;
    margin-top: 1rem;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.split-actions {
    justify-content: space-between;
}

.split-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.color-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.color-setting {
    margin-bottom: 0;
}

input[type="color"].color-input {
    width: 5.5rem;
    min-height: 3.25rem;
    padding: 0.25rem;
    border: 2px solid #b9c5bd;
    border-radius: 0.65rem;
    background: #fff;
    cursor: pointer;
}

.current-logo-panel {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-soft);
    font-weight: 750;
}

.current-logo {
    width: auto;
    max-width: min(18rem, 65%);
    max-height: 5rem;
    object-fit: contain;
}

.file-input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.65rem;
    border: 2px solid #b9c5bd;
    border-radius: 0.65rem;
    background: #fff;
    font: inherit;
}

.profile-section + .profile-section {
    margin-top: 1.5rem;
}

.sensitivity-editor {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(11rem, 1fr);
    gap: 0 1rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.sensitivity-notes,
.sensitivity-actions {
    grid-column: 1 / -1;
}

.profile-table {
    margin-top: 1.5rem;
}

.header-compact .header-inner {
    min-height: 3.75rem;
}

.header-compact .brand-mark {
    width: 2.2rem;
    height: 2.2rem;
}

.header-compact .brand-logo {
    height: 2.25rem;
}

/* Reunion detail experience */
.event-details-page .content-shell {
    width: 100%;
    padding-top: 0;
}

.event-details-page .content-shell > .form-message {
    margin-inline: 1rem;
}

.event-details-page .event-visual-section {
    margin-inline: 1rem;
}

.event-visual-hero {
    position: relative;
    min-height: clamp(20rem, 48vw, 31rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(223, 166, 99, 0.46), transparent 26rem),
        linear-gradient(135deg, #315f4e 0%, #173f33 68%, #112e27 100%);
    box-shadow: var(--shadow);
    isolation: isolate;
}

.event-details-page .event-visual-hero {
    min-height: clamp(24rem, 52vw, 38rem);
    border-radius: 0;
}

.event-visual-hero-image,
.event-visual-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.event-visual-hero-image {
    z-index: -2;
    display: block;
    object-fit: cover;
}

.event-visual-hero-shade {
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 15%, rgba(0, 0, 0, 0.76) 100%);
}

.event-visual-hero:not(.has-photo) .event-visual-hero-shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.34));
}

.event-visual-hero-content {
    width: min(100%, 90rem);
    padding: clamp(1.5rem, 5vw, 3.5rem);
}

.event-visual-hero h1 {
    max-width: 28ch;
    margin: 0.35rem 0 0.6rem;
    color: #fff;
    font-size: clamp(2.25rem, 6vw, 4.75rem);
    line-height: 1.02;
    text-wrap: balance;
    text-shadow: 0 0.15rem 1.2rem rgba(0, 0, 0, 0.32);
}

.event-hero-status {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.34);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.5rem;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 700;
}

.event-hero-meta span + span::before {
    content: "\2022";
    margin-right: 1.5rem;
    opacity: 0.7;
}

.event-hero-description {
    max-width: 72ch;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-left: 0.25rem solid rgba(255, 255, 255, 0.78);
    color: #fff;
    background: rgba(0, 0, 0, 0.34);
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    line-height: 1.6;
    text-shadow: 0 0.08rem 0.5rem rgba(0, 0, 0, 0.45);
}

.event-detail-menu {
    position: relative;
}

.event-menu-toggle {
    display: none;
}

.event-detail-nav {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    min-height: 4.25rem;
    margin-bottom: 1.5rem;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 1.25rem 1.25rem;
    background: var(--surface);
    box-shadow: 0 0.8rem 2rem rgba(35, 53, 42, 0.08);
}

.event-details-page .event-detail-nav {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.event-detail-nav > a,
.event-more-menu > summary,
.event-more-menu-items a {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    border-radius: 0.65rem;
    color: var(--text);
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.event-detail-nav > a:hover,
.event-more-menu > summary:hover,
.event-more-menu[open] > summary,
.event-more-menu-items a:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.event-detail-nav .event-detail-nav-back {
    margin-right: auto;
    color: var(--primary);
}

.event-detail-nav-back span {
    margin-right: 0.4rem;
    font-size: 1.35rem;
}

.event-more-menu {
    position: relative;
}

.event-more-menu > summary {
    height: 100%;
    list-style: none;
}

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

.event-more-menu > summary::after {
    content: "\25BE";
    margin-left: 0.45rem;
    font-size: 0.78rem;
}

.event-more-menu-items {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    width: max-content;
    min-width: 13.5rem;
    display: none;
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.event-more-menu[open] .event-more-menu-items,
.event-more-menu:hover .event-more-menu-items,
.event-more-menu:focus-within .event-more-menu-items {
    display: grid;
}

.event-visual-section {
    position: relative;
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: var(--surface);
    box-shadow: 0 0.9rem 2.5rem rgba(35, 53, 42, 0.07);
}

.event-visual-section h2 {
    margin: 0.1rem 0 0.25rem;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.event-visual-section .section-heading-row {
    margin-bottom: 1.25rem;
}

.event-description-copy {
    max-width: 78ch;
    color: var(--text);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
}

.event-section-guidance {
    margin: 0 0 1.25rem;
    line-height: 1.65;
}

.event-program-overviews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.event-program-overview {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--primary-soft);
}

.event-program-overview h3,
.event-program-overview p {
    margin-top: 0;
}

.event-program-overview p {
    margin-bottom: 0;
    line-height: 1.65;
}

.event-program-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
}

.event-program-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
}

.event-program-card h3 {
    margin: 0.55rem 0 0.35rem;
}

.event-program-card p {
    margin: 0.35rem 0 0;
    line-height: 1.55;
}

.event-program-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.event-program-location:not(:empty)::before {
    content: "Location: ";
    color: var(--text-muted);
    font-weight: 750;
}

.meal-safety-note {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.contribution-simple-section .eyebrow {
    color: var(--text-muted);
}

.meal-menu-item strong {
    white-space: pre-line;
}

.anchor-target {
    position: absolute;
    top: -6rem;
}

.meal-calendar-carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.meal-calendar-scroll {
    overflow-x: auto;
    padding: 0.2rem 0;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
}

.meal-calendar-scroll::-webkit-scrollbar {
    display: none;
}

.meal-calendar-grid {
    min-width: max-content;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(17.5rem, 21vw, 20rem);
    gap: 0.85rem;
}

.meal-calendar-arrow {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 0.55rem 1.25rem rgba(35, 53, 42, 0.14);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.meal-calendar-arrow:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.meal-calendar-arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

.meal-calendar-swipe-hint {
    display: none;
    margin: 0.7rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.meal-calendar-day {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.meal-calendar-day > header {
    min-height: 3.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.75rem;
    color: #fff;
    background: var(--primary);
}

.meal-calendar-day > header span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meal-calendar-day > header strong {
    font-size: 1.45rem;
    line-height: 1;
}

.meal-day-items {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

.meal-day-items:empty::after {
    content: "No shared meals";
    min-height: 6rem;
    display: grid;
    place-items: center;
    padding: 0.65rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.meal-calendar-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface);
}

.meal-calendar-card p {
    margin: 0.45rem 0;
    font-size: 0.92rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.meal-card-kicker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.meal-menu-item {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    border-radius: 0.65rem;
    color: var(--text);
    background: var(--primary-soft);
}

.meal-menu-item span,
.meal-headcount span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meal-menu-item strong {
    color: var(--primary-dark);
    font-size: 1.1rem;
    line-height: 1.3;
}

.reunion-dinner-tag {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.65rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: #6f3d12;
    background: #f9dfbd;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meal-volunteer span {
    color: var(--text-muted);
}

.meal-cleanup-assignment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.45rem 0 0;
    padding: 0.55rem 0.65rem;
    border-left: 0.22rem solid var(--primary);
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.meal-cleanup-assignment span {
    color: var(--text-muted);
}

.meal-headcount {
    display: grid;
    gap: 0.12rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
}

.meal-headcount strong {
    color: var(--heading);
    font-size: 1.08rem;
    line-height: 1.35;
}

.meal-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.8rem;
}

.meal-card-actions > :only-child {
    grid-column: 1 / -1;
}

.meal-card-actions .button {
    width: 100%;
    min-height: 2.55rem;
    padding: 0.48rem 0.55rem;
    white-space: normal;
}

/* A one-day reunion should use the available desktop width instead of looking like
   the first card in an eight-day carousel. */
.single-day-meal-calendar .meal-calendar-carousel {
    display: block;
}

.single-day-meal-calendar .meal-calendar-arrow,
.single-day-meal-calendar .meal-calendar-swipe-hint {
    display: none;
}

.single-day-meal-calendar .meal-calendar-scroll {
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.single-day-meal-calendar .meal-calendar-grid {
    min-width: 0;
    display: block;
}

.single-day-meal-calendar .meal-calendar-day {
    width: 100%;
}

.single-day-meal-calendar .meal-day-items {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: start;
    padding: 1rem;
}

.single-day-meal-calendar .meal-calendar-card {
    height: 100%;
}

.gallery-upload-panel,
.photo-details-editor,
.discussion-subscription-panel,
.discussion-create-panel,
.discussion-reply-form {
    margin-top: 1.25rem;
}

.gallery-filter-field {
    width: 100%;
    margin-bottom: 0;
}

.gallery-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(11rem, 0.7fr) minmax(28rem, 2fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: end;
    margin-bottom: 1.5rem;
}

.gallery-filter-intro {
    display: grid;
    gap: 0.2rem;
    align-self: center;
}

.gallery-filter-intro strong {
    font-size: 1.05rem;
}

.gallery-filter-intro span {
    color: var(--text-muted);
}

.gallery-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
    gap: 1rem;
    align-items: end;
}

.gallery-upload-launcher .button {
    min-width: 10rem;
}

.gallery-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
}

.gallery-bulk-actions > div:first-child {
    display: grid;
    gap: 0.2rem;
}

.gallery-bulk-actions .page-actions {
    margin: 0;
}

.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gallery-grid {
    columns: 18rem;
    column-gap: 0.55rem;
}

.gallery-photo-card {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.55rem;
    overflow: visible;
    break-inside: avoid;
    border: 0;
    border-radius: 0.35rem;
    background: #17251f;
    box-shadow: 0 0.35rem 1rem rgba(16, 33, 25, 0.12);
    vertical-align: top;
}

.gallery-photo-card:hover,
.gallery-photo-card:focus-within {
    z-index: 8;
}

.gallery-photo-card.is-selected {
    outline: 0.22rem solid var(--primary);
    outline-offset: -0.22rem;
}

.gallery-photo-selection {
    position: absolute;
    z-index: 3;
    top: 0.65rem;
    left: 0.65rem;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(10, 20, 16, 0.82);
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.gallery-photo-selection input {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.45rem;
}

.gallery-photo-open {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #e8ece8;
    border-radius: inherit;
    cursor: zoom-in;
}

.gallery-photo-open img,
.event-photo-preview-grid img {
    width: 100%;
    display: block;
}

.gallery-photo-open img {
    height: auto;
}

.event-photo-preview-grid img {
    height: 100%;
    object-fit: cover;
}

.gallery-photo-open:hover img,
.gallery-photo-open:focus-visible img {
    transform: scale(1.025);
}

.gallery-photo-details {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    bottom: auto;
    left: 0;
    display: grid;
    gap: 0.38rem;
    min-height: 100%;
    overflow: visible;
    padding: 4rem 0.85rem 0.85rem;
    color: #fff;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(10, 20, 16, 0.55), rgba(10, 20, 16, 0.96) 38%);
    box-shadow: 0 1rem 2.5rem rgba(7, 14, 11, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.4rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.gallery-photo-details p,
.gallery-photo-details small {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.gallery-description {
    white-space: normal;
}

.gallery-tags span {
    font-weight: 750;
}

.gallery-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.gallery-photo-card:hover .gallery-photo-selection,
.gallery-photo-card:focus-within .gallery-photo-selection,
.gallery-photo-card.is-selected .gallery-photo-selection,
.gallery-photo-card:hover .gallery-photo-details,
.gallery-photo-card:focus-within .gallery-photo-details {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gallery-photo-card .gallery-card-actions .button-secondary {
    color: #123428;
    background: #fff;
    border-color: #fff;
}

@media (hover: none) {
    .gallery-photo-card {
        overflow: hidden;
    }

    .gallery-photo-selection,
    .gallery-photo-details {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .gallery-photo-details {
        position: static;
        min-height: 0;
        padding: 0.85rem;
        border-radius: 0;
        background: #17251f;
        box-shadow: none;
    }
}

.gallery-load-more {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.gallery-photo-dialog {
    width: min(calc(100% - 1.5rem), 76rem);
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
    padding: 1rem;
    border: 0;
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.38);
}

.gallery-photo-dialog::backdrop {
    background: rgba(12, 25, 20, 0.8);
}

.gallery-photo-editor-dialog {
    width: min(calc(100% - 1.5rem), 62rem);
}

.gallery-photo-editor-dialog .photo-details-editor {
    margin: 0;
}

.gallery-dialog-header,
.gallery-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-dialog-header h2,
.gallery-dialog-header p {
    margin-top: 0;
}

.gallery-original-frame {
    min-height: 12rem;
    display: grid;
    place-items: center;
    margin: 0.75rem 0;
    border-radius: 0.75rem;
    background: #111;
}

.gallery-original-frame img {
    max-width: 100%;
    max-height: calc(100vh - 15rem);
    display: block;
    object-fit: contain;
}

.gallery-dialog-copy {
    padding: 0.25rem 0 1rem;
}

.gallery-dialog-actions {
    position: sticky;
    bottom: -1rem;
    padding: 0.8rem 0;
    background: var(--surface);
}

.event-photo-quick-upload {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.event-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.event-photo-preview-grid a {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--surface-soft);
}

.event-location-information {
    display: contents;
}

.weather-card-grid,
.nearby-place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.weather-card,
.nearby-place-card {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.weather-card {
    position: relative;
    overflow: hidden;
    min-height: 17rem;
    align-content: start;
    border: 0;
    color: #17332a;
    background: linear-gradient(145deg, #d9f3ff, #effbff);
    box-shadow: 0 0.75rem 1.75rem rgba(23, 51, 42, 0.1);
}

.weather-card::after {
    content: "";
    position: absolute;
    width: 9rem;
    height: 9rem;
    top: -4.5rem;
    right: -3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.weather-card-sun { background: linear-gradient(145deg, #fff2b8, #fff9df); }
.weather-card-night { color: #fff; background: linear-gradient(145deg, #26395d, #536b91); }
.weather-card-rain { background: linear-gradient(145deg, #c8e8f5, #e7f5fa); }
.weather-card-storm { color: #fff; background: linear-gradient(145deg, #46546e, #727f98); }
.weather-card-snow { background: linear-gradient(145deg, #e7f7ff, #fff); }
.weather-card-cloud { background: linear-gradient(145deg, #dce8e5, #f4f8f7); }

.weather-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.weather-card-top > div {
    display: grid;
    gap: 0.2rem;
}

.weather-period-name {
    font-size: 1.05rem;
}

.weather-condition {
    color: inherit !important;
    opacity: 0.78;
}

.weather-temperature-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.55rem;
}

.weather-temperature-range > span {
    display: grid;
    gap: 0.12rem;
}

.weather-temperature-range small {
    color: inherit;
    opacity: 0.72;
}

.weather-temperature-range strong {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.weather-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.weather-details-grid > span {
    display: grid;
    gap: 0.1rem;
    color: inherit;
}

.weather-details-grid small {
    opacity: 0.72;
}

.weather-card-night strong,
.weather-card-storm strong,
.weather-card-night .weather-period-name,
.weather-card-storm .weather-period-name {
    color: #fff;
}

.weather-attribution {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

a.nearby-place-card {
    color: var(--text);
    text-decoration: none;
}

a.nearby-place-card:hover,
a.nearby-place-card:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.weather-symbol {
    position: relative;
    z-index: 1;
    color: inherit !important;
    font-size: 2.35rem;
    line-height: 1;
}

.weather-card strong {
    color: var(--heading);
    font-size: 1.15rem;
}

.weather-card span,
.nearby-place-card span {
    color: var(--text-muted);
}

.weather-card-night,
.weather-card-storm,
.weather-card-night strong,
.weather-card-storm strong,
.weather-card-night span,
.weather-card-storm span,
.weather-card-night small,
.weather-card-storm small {
    color: #fff;
}

.weather-card-night .weather-condition,
.weather-card-storm .weather-condition,
.weather-card-night small,
.weather-card-storm small {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1;
}

.weather-card .weather-temperature-range strong {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
}

.nearby-place-card .button {
    align-self: end;
    margin-top: 0.4rem;
}

.discussion-subscription-panel details > summary {
    min-height: 3.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    list-style: none;
}

.discussion-subscription-panel {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: linear-gradient(120deg, var(--primary-soft), var(--surface) 58%);
}

.discussion-subscription-panel details > summary::-webkit-details-marker {
    display: none;
}

.discussion-notification-icon,
.discussion-topic-icon,
.discussion-empty-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    color: var(--primary);
    background: var(--primary-soft);
}

.discussion-notification-icon svg,
.discussion-topic-icon svg,
.discussion-empty-icon svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discussion-summary-copy,
.discussion-summary-copy strong,
.discussion-summary-copy span {
    display: block;
}

.discussion-summary-copy span {
    color: var(--text-muted);
}

.discussion-summary-action {
    color: var(--primary);
    font-weight: 750;
}

.subscription-options {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.discussion-thread-list,
.event-discussion-preview-list,
.discussion-post-list {
    display: grid;
    gap: 0.75rem;
}

.discussion-thread-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.discussion-thread-row .discussion-thread-card {
    min-width: 0;
}

.discussion-delete-button {
    min-height: 2.75rem;
}

.discussion-thread-card,
.event-discussion-preview-list > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0.35rem 1rem rgba(24, 47, 39, 0.05);
    text-decoration: none;
}

.discussion-thread-card:hover,
.event-discussion-preview-list > a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0.55rem 1.3rem rgba(24, 47, 39, 0.1);
}

.discussion-thread-card > div,
.event-discussion-preview-list > a {
    min-width: 0;
}

.discussion-thread-card strong,
.discussion-thread-card span,
.event-discussion-preview-list strong,
.event-discussion-preview-list span {
    display: block;
}

.discussion-thread-summary {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.15rem 0.65rem;
    text-align: right;
}

.discussion-thread-summary small {
    grid-column: 1 / -1;
    color: var(--text-muted);
}

.discussion-reply-count {
    color: var(--primary);
    font-weight: 750;
}

.discussion-open-arrow {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--primary);
    font-size: 1.25rem;
}

.discussion-topic-copy strong {
    color: var(--heading);
    font-size: 1.08rem;
}

.discussion-topic-copy > span {
    margin-top: 0.25rem;
    color: var(--text-muted);
}

.discussion-thread-card .discussion-topic-icon {
    display: inline-grid;
    place-items: center;
}

.discussion-thread-card .discussion-topic-icon svg {
    display: block;
}

.discussion-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(2rem, 7vw, 4.5rem);
    text-align: center;
}

.discussion-empty-state h3,
.discussion-empty-state p {
    margin: 0;
}

.discussion-empty-icon {
    width: 4rem;
    height: 4rem;
}

.discussion-empty-icon svg {
    width: 2rem;
    height: 2rem;
}

.discussion-post {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.35rem 1rem rgba(24, 47, 39, 0.045);
}

.discussion-original-post {
    border-left: 0.35rem solid var(--primary);
}

.discussion-post > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.discussion-post > header strong,
.discussion-post > header span {
    display: block;
}

.reply-context {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.discussion-post-body {
    padding: 1rem 0;
    overflow-wrap: anywhere;
}

.discussion-post-actions,
.discussion-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.planning-rotation-panel {
    margin: 1.5rem 0;
}

.planning-rotation-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planning-rotation-card {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.planning-rotation-card.is-next {
    border: 2px solid var(--primary);
    background: var(--primary-soft);
}

.rotation-position {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    font-size: 1.2rem;
    font-weight: 850;
}

.planning-rotation-card strong,
.planning-rotation-card small {
    display: block;
}

.planning-rotation-card strong {
    color: var(--heading);
    font-size: 1.2rem;
}

.rotation-year {
    color: var(--primary-dark);
    font-weight: 800;
}

.rotation-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.contribution-simple-section {
    display: block;
}

.contribution-simple-section > .section-heading-row {
    margin-bottom: 0;
}

.contribution-simple-section > .event-section-guidance,
.contribution-simple-section > .notice {
    margin-top: 0.85rem;
}

.contribution-quick-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    align-items: end;
    margin-top: 1rem;
}

.contribution-amount-fields {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    align-items: end;
}

.contribution-preset-field,
.contribution-custom-amount {
    margin: 0;
}

.contribution-field-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 750;
}

.contribution-preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contribution-custom-amount {
    width: min(18rem, 100%);
}

.input-with-prefix {
    display: flex;
    align-items: stretch;
}

.input-with-prefix > span {
    min-width: 3rem;
    display: grid;
    place-items: center;
    border: 2px solid #b9c5bd;
    border-right: 0;
    border-radius: 0.65rem 0 0 0.65rem;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: 1.1rem;
    font-weight: 800;
}

.input-with-prefix .text-input {
    border-radius: 0 0.65rem 0.65rem 0;
}

.contribution-provider-panel[hidden] {
    display: none;
}

.contribution-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.contribution-summary-card {
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.5rem 1.5rem rgba(35, 53, 42, 0.05);
}

.contribution-summary-card span {
    color: var(--text-muted);
    font-weight: 750;
}

.contribution-summary-card strong {
    margin-top: 0.35rem;
    color: var(--heading);
    font-family: var(--heading-font);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.05;
}

.contribution-status-section,
.contribution-ledger-section {
    margin-top: 1.25rem;
}

.contribution-manual-notice {
    line-height: 1.6;
}

.contribution-manual-notice strong {
    display: block;
    color: var(--heading);
}

.contribution-expectation-summary {
    display: block;
    margin-top: 0.45rem;
    color: var(--text-muted);
}

.contribution-amount-choice {
    min-width: 5rem;
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--primary);
    border-radius: 0.7rem;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
}

.contribution-amount-choice:hover {
    color: #fff;
    background: var(--primary);
}

.currency-input {
    position: relative;
}

.currency-input span {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    color: var(--text-muted);
    font-weight: 750;
    transform: translateY(-50%);
}

.currency-input input {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.75rem 0.65rem 1.8rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    color: var(--text);
    background: #fff;
    font: inherit;
}

.contribution-simple-section > .field-help {
    margin: 0.85rem 0 0;
}

.attendance-inline-form {
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
}

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

.form-grid.attendance-single-day {
    grid-template-columns: minmax(0, 32rem);
}

.related-attendance-panel {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface);
}

.related-attendance-panel h3,
.related-attendance-panel p {
    margin-top: 0;
}

.related-member-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-member-checklist li {
    min-height: 3rem;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
}

.related-member-checklist input {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    margin-right: 0.55rem;
}

.related-member-checklist label {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.meal-dialog {
    width: min(100% - 1.5rem, 46rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 0;
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.34);
}

.gallery-upload-dialog,
.rotation-settings-dialog,
.add-rotation-member-dialog,
.join-family-dialog,
.discussion-create-dialog,
.copy-event-settings-dialog,
.event-photo-upload-dialog,
.meal-editor-dialog,
.unit-editor-dialog,
.schedule-editor-dialog,
.contribution-payment-dialog,
.contribution-tracker-settings-dialog,
.lodging-editor-dialog,
.home-offer-dialog,
.family-group-dialog,
.reminder-dialog,
.add-family-member-dialog {
    width: min(100% - 1.5rem, 52rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 0;
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.34);
}

.add-family-member-dialog {
    width: min(100% - 1.5rem, 76rem);
}

.gallery-upload-dialog::backdrop,
.rotation-settings-dialog::backdrop,
.add-rotation-member-dialog::backdrop,
.join-family-dialog::backdrop,
.discussion-create-dialog::backdrop,
.copy-event-settings-dialog::backdrop,
.event-photo-upload-dialog::backdrop,
.meal-editor-dialog::backdrop,
.unit-editor-dialog::backdrop,
.schedule-editor-dialog::backdrop,
.contribution-payment-dialog::backdrop,
.contribution-tracker-settings-dialog::backdrop,
.lodging-editor-dialog::backdrop,
.home-offer-dialog::backdrop,
.family-group-dialog::backdrop,
.reminder-dialog::backdrop,
.add-family-member-dialog::backdrop {
    background: rgba(12, 25, 20, 0.72);
    backdrop-filter: blur(0.15rem);
}

.gallery-upload-dialog .gallery-upload-panel,
.join-family-dialog .join-family-panel {
    margin: 0;
    padding: 0;
}

.meal-dialog::backdrop {
    background: rgba(12, 25, 20, 0.72);
    backdrop-filter: blur(0.15rem);
}

.meal-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.meal-dialog-header h2,
.meal-dialog-header p {
    margin-top: 0;
}

.dialog-close {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface-soft);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.modal-dialog {
    width: min(100% - 1.5rem, 52rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 0;
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.34);
}

.modal-dialog::backdrop {
    background: rgba(12, 25, 20, 0.72);
    backdrop-filter: blur(0.15rem);
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dialog-header h2,
.dialog-header p {
    margin-top: 0;
}

.dialog-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.event-save-status-dialog {
    width: min(100% - 1.5rem, 38rem);
}

.event-save-status-dialog > p {
    color: var(--muted);
    line-height: 1.6;
}

.event-save-status-options {
    display: grid;
    gap: .75rem;
    margin: 1.25rem 0;
    padding: 0;
    border: 0;
}

.event-save-status-options legend {
    margin-bottom: .65rem;
}

.event-save-status-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .8rem;
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.event-save-status-option:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.event-save-status-option input {
    width: 1.2rem;
    height: 1.2rem;
    margin: .15rem 0 0;
    accent-color: var(--primary);
}

.event-save-status-option span,
.event-save-status-option small {
    display: block;
}

.event-save-status-option strong {
    color: var(--heading);
}

.event-save-status-option small {
    margin-top: .25rem;
    color: var(--muted);
    line-height: 1.5;
}

.event-save-status-actions {
    justify-content: flex-end;
}

.meal-dialog-editor {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.current-event-photo {
    max-width: 32rem;
    margin: 0.75rem 0 1rem;
}

.current-event-photo img {
    width: 100%;
    max-height: 16rem;
    display: block;
    object-fit: cover;
    border-radius: 0.8rem;
}

.schedule-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0 1.25rem;
}

.schedule-filter {
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.schedule-filter:hover,
.schedule-filter:focus-visible,
.schedule-filter.is-active {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}

.schedule-card[hidden],
.reminder-audience-detail[hidden] {
    display: none !important;
}

.schedule-location-link {
    display: inline-flex;
    margin: 0.45rem 0;
    color: var(--primary);
    font-weight: 750;
}

.lodging-card-grid,
.family-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
}

.lodging-card,
.family-group-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.lodging-card h3,
.family-group-card p {
    margin-top: 0;
}

.lodging-card:not(.home-stay-card) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.lodging-card .card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.lodging-card.is-archived,
.family-group-card.is-archived {
    opacity: 0.68;
}

.home-stay-card {
    justify-content: flex-start;
}

.home-stay-copy {
    min-width: 0;
    flex: 1;
}

.home-stay-contact,
.home-stay-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.home-stay-contact > span,
.home-stay-address > span {
    color: var(--text-muted);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.home-offer-contact-fields {
    margin-top: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.home-stay-capacity {
    min-width: 4.75rem;
    display: grid;
    place-items: center;
    padding: 0.7rem;
    border-radius: 0.8rem;
    color: var(--primary);
    background: var(--surface-soft);
}

.home-stay-capacity strong {
    font-size: 1.75rem;
    line-height: 1;
}

.family-tag {
    display: inline-flex;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: var(--primary);
    background: var(--surface-soft);
    font-weight: 800;
}

.member-picker {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
}

.member-picker legend {
    padding: 0 0.35rem;
    font-weight: 800;
}

.meal-cleanup-list {
    display: grid;
    gap: 0.8rem;
}

.meal-cleanup-row {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1.4fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
}

.meal-cleanup-summary {
    display: grid;
    gap: 0.35rem;
}

.meal-cleanup-picker {
    margin: 0;
}

.meal-cleanup-member-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meal-cleanup-member-list li {
    min-height: 3rem;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface-soft);
}

.meal-cleanup-member-list input {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-right: 0.5rem;
}

.reminder-composer {
    max-width: 70rem;
}

.reminder-dialog {
    width: min(100% - 1.5rem, 64rem);
}

.reminder-dialog .reminder-composer {
    margin-top: 1.25rem;
}

.rotation-add-choice + .rotation-add-choice {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.rotation-add-choice h3 {
    margin-top: 0;
}

.reminder-preview {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.lodging-summary-section .section-heading-row {
    align-items: center;
}

.compact-page-actions {
    margin-bottom: 1rem;
}

.attendance-report-unit + .attendance-report-unit {
    margin-top: 1rem;
}

.family-unit-assignment-table .compact-input {
    min-width: 9.5rem;
}

.upcoming-list {
    display: grid;
    gap: 0.8rem;
}

.upcoming-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.4rem 1.2rem rgba(24, 47, 39, 0.055);
}

.upcoming-card.is-today {
    border-color: var(--primary);
    background: linear-gradient(90deg, var(--primary-soft), var(--surface) 60%);
}

.upcoming-date {
    width: 4.4rem;
    min-height: 4.6rem;
    display: grid;
    place-content: center;
    border-radius: 0.8rem;
    color: #fff;
    background: var(--primary);
    text-align: center;
}

.upcoming-birthday .upcoming-date {
    color: var(--heading);
    background: #fff0bc;
}

.upcoming-date span {
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.upcoming-date strong {
    color: inherit;
    font-size: 1.75rem;
    line-height: 1.1;
}

.upcoming-copy {
    min-width: 0;
}

.upcoming-copy h2 {
    margin: 0.35rem 0;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}

.upcoming-copy p {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
}

.upcoming-copy p strong {
    color: var(--text);
}

.upcoming-type.birthday {
    color: #754f00;
    background: #fff0bc;
}

.upcoming-action {
    min-width: 7.5rem;
}

.upcoming-empty-icon {
    font-size: 2.5rem;
}

.upcoming-view-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.upcoming-view-toggle .button {
    min-width: 6rem;
    min-height: 2.75rem;
    border-color: transparent;
}

.upcoming-calendar-panel {
    overflow: hidden;
}

.upcoming-calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.upcoming-calendar-toolbar h2,
.upcoming-calendar-toolbar p {
    margin: 0;
}

.upcoming-calendar-toolbar .upcoming-month-button:first-child {
    justify-self: start;
}

.upcoming-calendar-month-actions {
    display: flex;
    gap: .5rem;
    justify-self: end;
}

.calendar-header-tools { display: grid; justify-items: end; gap: .35rem; }
.calendar-header-tools .page-actions { margin: 0; }
.upcoming-calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(9.5rem,auto); gap: 1rem; align-items: start; margin-top: 1rem; }
.upcoming-calendar-column { min-width: 0; }
.upcoming-calendar-key {
    display: grid;
    gap: .85rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}
.upcoming-calendar-key > div { display: grid; gap: .42rem; }
.upcoming-calendar-key strong { color: var(--heading); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.upcoming-calendar-key.is-desktop { position: sticky; top: 1rem; padding: .85rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
.upcoming-calendar-key.is-mobile { display: none; }

.upcoming-calendar-key span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.upcoming-calendar-key i {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.22rem;
}

@media (max-width: 52rem) {
    .upcoming-calendar-layout { grid-template-columns: 1fr; }
    .upcoming-calendar-key.is-desktop { display: none; }
    .upcoming-calendar-key.is-mobile { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
    .upcoming-calendar-key.is-top { margin-bottom: .75rem; }
    .upcoming-calendar-key.is-bottom { margin-top: .75rem; }
}

.calendar-key-event {
    background: var(--primary);
}

.calendar-key-birthday {
    background: #e6ac2f;
}

.upcoming-calendar-empty {
    margin: 0 0 0.75rem;
}

.upcoming-calendar {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--border);
}

.upcoming-calendar-weekdays,
.upcoming-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
}

.upcoming-calendar-weekdays span[role="columnheader"] {
    padding: 0.65rem 0.35rem;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
}

.weekday-short {
    display: none;
}

.upcoming-calendar-day {
    min-width: 0;
    min-height: 8.5rem;
    padding: 0.55rem;
    background: var(--surface);
}

.upcoming-calendar-day.is-outside-month {
    color: var(--text-muted);
    background: var(--surface-soft);
}

.upcoming-calendar-day.is-outside-month .calendar-item,
.home-calendar-day.is-outside .home-calendar-dot {
    opacity: .58;
}

.upcoming-calendar-day.is-past {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
}

.upcoming-calendar-day.is-today {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.calendar-day-number {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    color: var(--text);
    font-weight: 800;
}

.upcoming-calendar-day.is-today .calendar-day-number {
    color: #fff;
    background: var(--primary);
}

.calendar-day-items {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.calendar-item {
    min-width: 0;
    display: block;
    overflow: hidden;
    padding: 0.35rem 0.45rem;
    border-radius: 0.38rem;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.calendar-item:hover,
a.calendar-item:focus-visible {
    color: #fff;
    filter: brightness(0.9);
}

.calendar-event {
    background: var(--primary);
}

.calendar-birthday {
    color: #5f4100;
    background: #ffd978;
}

.upcoming-calendar-agenda {
    display: none;
}

.subscription-heading {
    max-width: 64rem;
}

.subscription-current-card {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 1.1rem;
    background: linear-gradient(135deg, var(--primary-soft), var(--surface) 72%);
    box-shadow: 0 0.7rem 1.8rem rgba(24, 47, 39, 0.07);
}

.subscription-current-card h2,
.subscription-current-card p,
.subscription-plan-card h3,
.subscription-plan-card p,
.subscription-discount-note h2,
.subscription-discount-note p {
    margin-top: 0;
}

.subscription-current-card h2 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.subscription-current-card p,
.subscription-plan-card p,
.subscription-discount-note p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.subscription-current-label,
.subscription-plan-kicker {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.subscription-current-status {
    min-width: 13rem;
    display: grid;
    gap: 0.65rem;
    justify-items: end;
    color: var(--text-muted);
    text-align: right;
}

.subscription-usage-section {
    margin-bottom: 1.25rem;
    padding: clamp(1.15rem, 2.5vw, 1.6rem);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: var(--surface);
}

.subscription-usage-section .section-heading-row {
    margin-bottom: 1rem;
}

.subscription-usage-section h2,
.subscription-usage-section p {
    margin: 0;
}

.subscription-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.8rem;
}

.subscription-usage-card {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.subscription-usage-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.subscription-usage-title strong,
.subscription-usage-title span,
.subscription-usage-card small {
    display: block;
}

.subscription-usage-title span,
.subscription-usage-card small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.subscription-usage-title b {
    color: var(--primary);
    white-space: nowrap;
}

.subscription-usage-meter {
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 68%, transparent);
}

.subscription-usage-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.subscription-usage-card.is-at-limit {
    border-color: color-mix(in srgb, #b42318 46%, var(--border));
    background: color-mix(in srgb, #fff1f0 55%, var(--surface));
}

.subscription-usage-card.is-at-limit .subscription-usage-meter span {
    background: #b42318;
}

.subscription-usage-card.is-unlimited .subscription-usage-meter span {
    width: 100% !important;
    background: color-mix(in srgb, var(--primary) 52%, var(--surface));
}

.subscription-pricing-showcase {
    position: relative;
    isolation: isolate;
    margin-top: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.35rem;
    background: var(--surface);
    box-shadow: 0 1rem 2.8rem rgba(24, 47, 39, 0.1);
}

.subscription-pricing-showcase::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 19rem;
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--primary-soft) 88%, transparent) 0 10rem, transparent 10.1rem),
        radial-gradient(circle at 94% 0%, color-mix(in srgb, #f4c95d 22%, transparent) 0 8rem, transparent 8.1rem),
        linear-gradient(120deg, var(--surface-soft), var(--surface));
    pointer-events: none;
}

.subscription-showcase-intro {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.4rem) 0;
}

.subscription-showcase-intro h2,
.subscription-showcase-intro p {
    margin-top: 0;
}

.subscription-showcase-intro h2 {
    max-width: 48rem;
    margin-bottom: 0.45rem;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.subscription-showcase-intro p:last-child {
    margin-bottom: 0;
    color: var(--text-muted);
}

.billing-cycle-toggle {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
}

.billing-cycle-choice {
    min-height: 3rem;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 0.65rem;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.billing-cycle-choice span {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.billing-cycle-choice.is-active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 0.25rem 0.7rem rgba(24, 47, 39, 0.16);
}

.billing-cycle-choice.is-active span {
    color: rgba(255, 255, 255, 0.85);
}

.subscription-mobile-plan-grid,
.subscription-mobile-feature-list {
    display: none;
}

.subscription-plan-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.25rem, 2.5vw, 1.7rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.45rem 1.4rem rgba(24, 47, 39, 0.06);
}

.subscription-plan-card.is-popular {
    border: 2px solid var(--primary);
    box-shadow: 0 0.85rem 2rem rgba(24, 47, 39, 0.12);
}

.subscription-popular-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    margin: -0.35rem 0 -0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    color: #17352a;
    background: #f4c95d;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.subscription-plan-badges {
    min-height: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: flex-start;
}

.subscription-plan-card.is-current {
    border: 2px solid var(--primary);
    box-shadow: 0 0.7rem 1.7rem rgba(24, 47, 39, 0.11);
}

.subscription-plan-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.subscription-plan-heading h3 {
    margin-bottom: 0;
    font-size: 1.35rem;
}

.subscription-price {
    min-height: 5.2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.45rem;
    align-items: baseline;
}

.subscription-price-main {
    color: var(--heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
}

.subscription-price-period,
.subscription-price-note {
    color: var(--text-muted);
}

.subscription-price-note {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
}

.subscription-plan-action {
    width: 100%;
    margin-top: auto;
    text-align: center;
}

.subscription-plan-action.is-disabled {
    cursor: default;
    opacity: 0.8;
}

.subscription-billing-note {
    margin: 1rem 0 0;
    color: var(--text-muted);
}

.subscription-access-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    margin: 1.25rem clamp(1.25rem, 3vw, 2.4rem) 0;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 0.9rem;
    background: linear-gradient(120deg, var(--primary-soft), var(--surface));
}

.subscription-access-summary-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.subscription-access-summary > div > strong,
.subscription-access-summary > div > span {
    display: block;
}

.subscription-access-summary > div > span {
    margin-top: 0.2rem;
    color: var(--text-muted);
}

.subscription-comparison-shell {
    margin: 2rem clamp(1.25rem, 3vw, 2.4rem) 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 1.15rem;
    background: var(--surface);
    box-shadow: 0 0.85rem 2.2rem rgba(24, 47, 39, 0.09);
}

.subscription-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.subscription-comparison-table thead th {
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 1.8rem);
    vertical-align: top;
    text-align: left;
}

.subscription-comparison-guide {
    width: 29%;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 48%),
        var(--primary-dark);
}

.subscription-comparison-guide span,
.subscription-comparison-guide strong,
.subscription-comparison-guide small {
    display: block;
}

.subscription-guide-kicker {
    margin-bottom: 1.2rem;
    color: #f4d57f;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.subscription-comparison-guide strong {
    max-width: 13rem;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.15;
}

.subscription-comparison-guide small {
    max-width: 14rem;
    margin-top: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5;
}

.subscription-plan-column {
    position: relative;
    border-left: 1px solid var(--border);
    color: var(--heading);
    background: #f7f8f5;
}

.subscription-plan-column.plan-unlimited {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 65%, #fff), #fff 74%);
}

.subscription-plan-column.is-popular {
    border-top: 0.38rem solid #f4c95d;
    border-left: 0;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.14), transparent 8rem),
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow: 0 0.65rem 1.8rem rgba(24, 47, 39, 0.24);
}

.subscription-plan-column h3 {
    min-height: 3.3rem;
    margin: 0.25rem 0 0.8rem;
    color: inherit;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.1;
}

.subscription-plan-column .subscription-plan-kicker {
    min-height: 2.1rem;
    margin-bottom: 0;
}

.subscription-plan-column.is-popular .subscription-plan-kicker,
.subscription-plan-column.is-popular .subscription-price-period,
.subscription-plan-column.is-popular .subscription-price-note,
.subscription-plan-column.is-popular > p {
    color: rgba(255, 255, 255, 0.82);
}

.subscription-plan-column .subscription-price {
    min-height: 6.6rem;
}

.subscription-plan-column .subscription-price-main {
    font-size: clamp(2.3rem, 3.4vw, 3.7rem);
    letter-spacing: -0.055em;
}

.subscription-plan-column.is-popular .subscription-price-main {
    color: #fff;
}

.subscription-plan-column > p {
    min-height: 6.8rem;
    margin: 0 0 1.1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.subscription-plan-column .subscription-plan-action {
    min-height: 3.15rem;
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}

.subscription-plan-column .subscription-plan-action:hover {
    color: #fff;
    background: var(--primary-dark);
}

.subscription-plan-column.is-popular .subscription-plan-action {
    border-color: #f4c95d;
    color: #17352a;
    background: #f4c95d;
    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.16);
}

.subscription-plan-column.is-popular .subscription-plan-action:hover {
    background: #ffdc7f;
}

.subscription-plan-column .subscription-plan-action.is-disabled {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    color: var(--primary-dark);
    background: var(--surface);
}

.subscription-plan-column.is-popular .subscription-plan-action.is-disabled {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
}

.subscription-table-badge,
.subscription-current-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.subscription-table-badge {
    color: #17352a;
    background: #f4c95d;
}

.subscription-current-badge {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.subscription-plan-column.is-popular .subscription-current-badge {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.subscription-comparison-table tbody th,
.subscription-comparison-table tbody td {
    padding: 1.1rem clamp(0.8rem, 1.5vw, 1.25rem);
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.subscription-comparison-table tbody th {
    color: var(--heading);
    background: var(--surface);
    text-align: left;
}

.subscription-comparison-table tbody th strong {
    display: inline;
    margin-left: 0.55rem;
    vertical-align: middle;
}

.subscription-comparison-table tbody td {
    border-left: 1px solid var(--border);
    background: #fbfcfa;
    text-align: center;
}

.subscription-comparison-table tbody tr:nth-child(even) th,
.subscription-comparison-table tbody tr:nth-child(even) td {
    background: var(--surface-soft);
}

.subscription-comparison-table tbody td.is-popular,
.subscription-comparison-table tbody tr:nth-child(even) td.is-popular {
    border-left-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 82%, #fff);
    box-shadow: inset -1px 0 color-mix(in srgb, var(--primary) 24%, transparent);
}

.subscription-feature-value {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: center;
    color: var(--heading);
    font-weight: 800;
    line-height: 1.35;
}

.subscription-feature-value::before {
    content: "\2713";
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow: 0 0.25rem 0.55rem rgba(24, 47, 39, 0.18);
    font-size: 0.88rem;
    font-weight: 900;
}

.subscription-comparison-table td.is-popular .subscription-feature-value::before {
    color: #17352a;
    background: #f4c95d;
}

.subscription-feature-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.65rem;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 0.25rem 0.65rem rgba(24, 47, 39, 0.16);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

.subscription-feature-icon.feature-creation {
    background: #a15f27;
}

.subscription-feature-icon.feature-events {
    background: #397489;
    font-size: 0.68rem;
}

.subscription-feature-icon.feature-tools {
    background: #675a8c;
}

.subscription-feature-icon.feature-members {
    background: #26766d;
    font-size: 0.72rem;
    letter-spacing: -0.2rem;
    text-indent: -0.2rem;
}

.subscription-feature-icon.feature-photos {
    background: #9a5367;
}

.subscription-feature-icon.feature-messages {
    background: #956f18;
}

.subscription-comparison-footnote {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
}

.subscription-showcase-footer {
    padding: 0.8rem clamp(1.25rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem);
}

.subscription-discount-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.subscription-discount-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.2rem;
    font-weight: 900;
}

.event-type-page .content-shell {
    min-height: calc(100vh - 9rem);
    display: grid;
    place-items: center;
}

.event-type-page .global-breadcrumb {
    display: none;
}

.event-type-dialog {
    width: min(calc(100% - 2rem), 76rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--border);
    border-radius: 1.3rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 2rem 6rem rgba(12, 25, 20, 0.32);
}

.event-type-dialog::backdrop {
    background: rgba(23, 40, 33, 0.68);
    backdrop-filter: blur(0.18rem);
}

.event-type-dialog-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
}

.event-type-dialog-heading h1,
.event-type-dialog-heading h2,
.event-type-dialog-heading p {
    margin-top: 0;
}

.event-type-dialog-heading h1,
.event-type-dialog-heading h2 {
    margin-bottom: 0.45rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.event-type-dialog-heading p:last-child {
    max-width: 48rem;
    margin-bottom: 0;
    color: var(--text-muted);
}

.event-type-dialog-heading .dialog-close {
    text-decoration: none;
}

.event-type-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.event-type-choice {
    min-width: 0;
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    border: 2px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface-soft);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.event-type-choice:hover,
.event-type-choice:focus-visible {
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0.8rem 2rem rgba(24, 47, 39, 0.12);
    transform: translateY(-0.2rem);
}

.event-type-choice.reunion-choice {
    background: linear-gradient(145deg, var(--primary-soft), #fff 70%);
}

.event-type-choice.generic-choice {
    background: linear-gradient(145deg, #e1eff4, #fff 70%);
}

.event-type-choice.party-choice {
    background: linear-gradient(145deg, #fff1d9, #fff 70%);
}

.event-type-choice-icon {
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    color: #fff;
    background: var(--primary);
}

.generic-choice .event-type-choice-icon {
    background: #397489;
}

.party-choice .event-type-choice-icon {
    background: #a15f27;
}

.event-type-choice-icon svg,
.generic-event-form-icon svg,
.generic-event-info-icon svg {
    width: 1.9rem;
    height: 1.9rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.event-type-choice strong,
.event-type-choice small,
.event-type-choice-action {
    display: block;
}

.event-type-choice strong {
    color: var(--heading);
    font-size: 1.35rem;
}

.event-type-choice small {
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

.event-type-choice-action {
    margin-top: auto;
    color: var(--primary-dark);
    font-weight: 850;
}

.generic-event-heading {
    max-width: none;
}

.generic-event-form {
    position: relative;
    overflow: hidden;
    max-width: 76rem;
    margin-inline: auto;
    padding-top: clamp(4.5rem, 8vw, 6rem);
}

.generic-event-form::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3.7rem;
    background: linear-gradient(100deg, #397489, var(--primary));
}

.generic-event-form-icon {
    position: absolute;
    top: 1rem;
    left: clamp(1rem, 3vw, 2rem);
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border: 0.3rem solid var(--surface);
    border-radius: 0.9rem;
    color: #fff;
    background: #397489;
}

.generic-event-name {
    min-height: 3.6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.generic-event-when {
    display: grid;
    grid-template-columns: minmax(14rem, 1.25fr) repeat(2, minmax(10rem, 0.75fr));
    gap: 1rem;
}

.generic-all-day-choice {
    width: fit-content;
    margin: 0.15rem 0 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-soft);
}

.generic-event-secondary-fields {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.generic-event-audience {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.generic-event-audience > legend {
    margin-bottom: 0.2rem;
    color: var(--heading);
    font-size: 1rem;
    font-weight: 850;
}

.generic-event-audience-intro {
    margin: 0 0 0.8rem;
    color: var(--muted);
}

.generic-event-everyone-choice {
    margin: 0;
    padding: 0.9rem 1rem;
    border: 2px solid var(--primary);
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.generic-event-audience-group {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.generic-event-audience-group h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.generic-event-unit-list,
.generic-event-member-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.generic-event-audience-choice,
.generic-event-member-list li {
    min-height: 3.4rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.generic-event-audience-choice:hover,
.generic-event-member-list li:hover,
.generic-event-audience-choice:focus-within,
.generic-event-member-list li:focus-within {
    border-color: var(--primary);
}

.generic-event-audience-choice input,
.generic-event-member-list input {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    margin: 0;
}

.generic-event-audience-choice span {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.generic-event-audience-choice small {
    color: var(--muted);
    font-size: 0.82rem;
}

.generic-event-member-list label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.generic-event-actions {
    margin-top: 1.25rem;
}

.single-day-event-heading {
    max-width: none;
}

.single-day-event-form {
    max-width: 82rem;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
}

.guided-form-section {
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.guided-form-section + .guided-form-section {
    border-top: 1px solid var(--border);
}

.guided-form-section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.guided-form-section-heading h2,
.guided-form-section-heading p {
    margin: 0;
}

.guided-form-section-heading p {
    margin-top: 0.25rem;
    color: var(--text-muted);
}

.guided-step-number {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #a15f27, #7d4518);
    font-weight: 900;
}

.single-day-event-name {
    min-height: 3.6rem;
    font-size: 1.15rem;
    font-weight: 750;
}

.single-day-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.single-day-tool-choice {
    min-height: 7.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.single-day-tool-choice:hover,
.single-day-tool-choice:focus-within {
    border-color: var(--primary);
}

.single-day-tool-choice input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.single-day-tool-choice span,
.single-day-tool-choice strong,
.single-day-tool-choice small {
    display: block;
}

.single-day-tool-choice small {
    margin-top: 0.25rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.single-day-conditional-field,
.single-day-photo-field {
    margin-top: 1rem;
}

.single-day-publish-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.single-day-publish-row .form-field {
    width: min(100%, 22rem);
    margin: 0;
}

.single-day-event-actions {
    margin: 0;
}

.generic-event-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    padding: clamp(1.3rem, 3vw, 2.3rem);
    border-radius: 1.2rem;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.14), transparent 13rem),
        linear-gradient(115deg, #397489, var(--primary-dark));
    box-shadow: var(--shadow);
}

.generic-event-date-tile {
    width: 5.5rem;
    min-height: 6rem;
    display: grid;
    place-content: center;
    border-radius: 1rem;
    color: var(--heading);
    background: #fff;
    text-align: center;
    box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.18);
}

.generic-event-date-tile span {
    color: #397489;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.generic-event-date-tile strong {
    color: inherit;
    font-size: 2.4rem;
    line-height: 1;
}

.generic-event-detail-heading h1,
.generic-event-detail-heading p {
    color: #fff;
}

.generic-event-detail-heading h1 {
    margin: 0.45rem 0 0.25rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.generic-event-detail-heading p {
    margin: 0;
    opacity: 0.88;
    font-weight: 700;
}

.generic-event-type-pill {
    color: #17352a;
    background: #f4d57f;
}

.generic-event-detail-actions .button-secondary {
    border-color: rgba(255, 255, 255, 0.72);
}

.generic-event-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.generic-event-info-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.generic-event-info-card h2,
.generic-event-info-card p {
    margin-top: 0;
}

.generic-event-info-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    color: #fff;
    background: #397489;
}

.generic-event-info-icon.detail-icon {
    background: var(--primary);
}

.generic-event-description {
    white-space: normal;
}

.party-preview-card {
    max-width: 55rem;
    margin-inline: auto;
}

.stripe-test-safety-note {
    border-color: #a8c5d0;
    color: var(--text);
    background: #eff7fa;
}

.stripe-test-safety-note strong,
.stripe-test-result strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--heading);
}

.stripe-test-result p {
    margin: 0;
}

.stripe-test-result-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.stripe-environment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stripe-mode-card {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    border-top: 0.35rem solid #6578c8;
}

.stripe-mode-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.stripe-mode-heading h2,
.stripe-mode-heading p,
.stripe-mode-card > p {
    margin: 0;
}

.stripe-mode-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.stripe-mode-fieldset legend {
    margin-bottom: 0.65rem;
    color: var(--heading);
    font-weight: 750;
}

.stripe-mode-options li:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(47, 93, 80, 0.14);
    background: var(--surface);
}

.stripe-mode-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.stripe-mode-actions .notice {
    flex: 1 1 30rem;
    margin: 0;
}

.stripe-live-mode-status {
    color: #7b241c;
    background: #fde8e6;
}

.stripe-environment-card {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 0.35rem solid #6578c8;
}

.stripe-live-card {
    border-top-color: var(--primary);
}

.stripe-environment-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.stripe-environment-heading h2,
.stripe-environment-heading p,
.stripe-environment-card > p {
    margin: 0;
}

.stripe-environment-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    color: #fff;
    background: #6578c8;
}

.stripe-live-icon {
    background: var(--primary);
}

.stripe-environment-icon svg {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.stripe-environment-card code {
    display: block;
    padding: 0.75rem;
    overflow-wrap: anywhere;
    border-radius: 0.65rem;
    color: var(--heading);
    background: var(--surface-soft);
}

.stripe-environment-card > .button {
    align-self: flex-start;
    margin-top: auto;
}

.google-connection-card {
    max-width: 56rem;
    display: grid;
    gap: 1rem;
}

.google-connection-card > p,
.google-connection-card .notice p {
    margin: 0;
}

.google-connection-card code {
    display: block;
    padding: 0.75rem;
    overflow-wrap: anywhere;
    border-radius: 0.65rem;
    color: var(--heading);
    background: var(--surface-soft);
}

.google-connection-requirements {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-soft);
}

.google-connection-requirements h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.google-connection-requirements ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.25rem;
}

.google-connection-card > .button {
    width: fit-content;
}

.google-maps-connection-icon {
    background: #3d70b2;
}

.email-connection-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.email-readiness-card,
.email-test-card {
    display: grid;
    gap: 1rem;
}

.email-readiness-card > p,
.email-test-card > p {
    margin: 0;
}

.email-connection-icon {
    color: #fff;
    background: var(--primary);
}

.email-test-icon {
    color: #fff;
    background: #3d70b2;
}

.email-readiness-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.email-readiness-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-soft);
}

.email-readiness-item.needs-attention {
    border-color: #d7a7a7;
    background: #fff4f3;
}

.email-readiness-mark {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-weight: 900;
}

.email-readiness-item.needs-attention .email-readiness-mark {
    background: var(--danger);
}

.email-readiness-copy {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.email-readiness-name {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.email-readiness-name > span {
    color: var(--muted);
    font-weight: 800;
}

.email-readiness-copy code {
    overflow-wrap: anywhere;
    color: var(--primary-dark);
}

.email-readiness-copy small,
.email-test-note {
    color: var(--muted);
    line-height: 1.5;
}

.email-test-card .button {
    width: fit-content;
}

.email-port-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
}

.email-port-card > p,
.email-port-card .notice p {
    margin: 0;
}

.email-port-icon {
    color: #fff;
    background: #8b5a22;
}

.email-port-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.email-port-shortcuts .button {
    min-width: 3.75rem;
}

.email-technical-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid currentColor;
}

.email-technical-details span {
    font-weight: 800;
}

.email-technical-details code {
    overflow-wrap: anywhere;
}

.email-port-results {
    display: grid;
    gap: 0.65rem;
}

.email-port-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.email-port-item {
    display: grid;
    gap: 0.3rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    background: var(--surface);
}

.email-port-item > span {
    color: var(--danger-dark);
    font-weight: 900;
}

.email-port-item.is-ready > span {
    color: var(--primary-dark);
}

.email-port-item small {
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 62rem) {
    .email-connection-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 35rem) {
    .email-readiness-name {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .email-port-shortcuts .button {
        flex: 1 1 calc(50% - 0.4rem);
    }
}

@media (max-width: 62rem) {
    .contribution-simple-section {
        grid-template-columns: 1fr;
    }

    .contribution-quick-form {
        grid-template-columns: minmax(14rem, 1fr) auto;
    }

    .subscription-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 58rem) {
    .header-inner {
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        padding: 0.75rem 0;
    }

    .brand {
        min-width: 0;
        flex: 1;
    }

    .brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .header-navigation {
        width: 100%;
        display: none;
        flex: 0 0 100%;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

    .header-navigation.is-open {
        display: grid;
        gap: 0.75rem;
    }

    .primary-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        overflow: visible;
    }

    .primary-nav a,
    .family-nav-toggle {
        justify-content: center;
        border: 1px solid var(--border);
        text-align: center;
        white-space: normal;
    }

    .family-nav-menu,
    .family-nav-toggle {
        width: 100%;
    }

    .family-nav-items {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.35rem;
        box-shadow: none;
    }

    .account-menu {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

    .family-switcher {
        grid-template-columns: 1fr;
    }

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

    .member-add-grid {
        grid-template-columns: 1fr;
    }

    .gallery-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .settings-grid,
    .color-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 42rem) {
    .single-day-tool-grid,
    .generic-event-when {
        grid-template-columns: 1fr;
    }

    .single-day-publish-row {
        align-items: stretch;
        flex-direction: column;
    }

    .single-day-publish-row .form-field,
    .single-day-event-actions,
    .single-day-event-actions .button {
        width: 100%;
    }

    .page-heading.section-heading-row > .button {
        width: 100%;
        min-width: 0;
        align-self: stretch;
        margin-left: 0;
    }

    .content-shell,
    .site-footer,
    .header-inner {
        width: min(100% - 1.25rem, 76rem);
    }

    .content-shell {
        padding: 2rem 0;
    }

    .address-lookup-input-row {
        grid-template-columns: 1fr;
    }

    .upcoming-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .upcoming-action {
        width: 100%;
        grid-column: 1 / -1;
    }

    .page-heading .page-actions,
    .upcoming-view-toggle {
        width: 100%;
    }

    .upcoming-view-toggle .button {
        flex: 1 1 50%;
    }

    .upcoming-calendar-panel {
        padding-inline: 0.65rem;
    }

    .upcoming-calendar-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .upcoming-calendar-toolbar > .upcoming-calendar-heading {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .upcoming-calendar-toolbar > .upcoming-month-button:first-child {
        width: 100%;
        justify-self: stretch;
    }

    .upcoming-calendar-month-actions {
        width: 100%;
        justify-self: stretch;
    }

    .upcoming-calendar-month-actions .upcoming-month-button {
        min-width: 0;
        flex: 1 1 auto;
    }

    .upcoming-calendar-key {
        justify-content: center;
    }

    .weekday-long {
        display: none;
    }

    .weekday-short {
        display: inline;
    }

    .upcoming-calendar-day {
        min-height: 3.6rem;
        padding: 0.28rem;
    }

    .calendar-day-number {
        width: 1.65rem;
        height: 1.65rem;
        margin: 0 auto;
        font-size: 0.82rem;
    }

    .calendar-day-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.18rem;
        margin-top: 0.2rem;
    }

    .calendar-item {
        width: 0.48rem;
        height: 0.48rem;
        overflow: hidden;
        padding: 0;
        border-radius: 50%;
        color: transparent;
        font-size: 0;
    }

    .upcoming-calendar-agenda {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .upcoming-calendar-agenda h3 {
        margin-bottom: 0;
    }

    .subscription-current-card,
    .subscription-discount-note {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .subscription-current-card {
        flex-direction: column;
    }

    .subscription-current-status {
        min-width: 0;
        justify-items: start;
        text-align: left;
    }

    .billing-cycle-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .subscription-comparison-table td:first-child {
        min-width: 0;
    }

    .address-lookup-input-row .button {
        width: 100%;
    }

    .address-suggestion {
        align-items: flex-start;
        flex-direction: column;
    }

    .event-details-page .content-shell {
        width: 100%;
        padding-top: 0;
    }

    .event-details-page .content-shell > .form-message,
    .event-details-page .event-visual-section {
        margin-inline: 0.625rem;
    }

    .primary-nav {
        grid-template-columns: 1fr;
    }

    .primary-nav a,
    .family-nav-toggle {
        justify-content: flex-start;
        padding-inline: 1rem;
        text-align: left;
    }

    .account-menu {
        justify-content: space-between;
    }

    .reunion-switcher-menu {
        flex: 1;
    }

    .reunion-switcher-toggle {
        width: 100%;
        justify-content: center;
    }

    .profile-menu-items,
    .settings-menu-items,
    .reunion-switcher-items {
        position: fixed;
        top: auto;
        right: 0.625rem;
        left: 0.625rem;
        width: auto;
    }

    .settings-menu-items { max-height: calc(100vh - 6rem); overflow-y: auto; }
    .settings-submenu > nav { position: static; width: auto; margin: 0 .3rem .35rem; padding: .2rem; border: 0; border-left: 3px solid var(--primary-soft); border-radius: 0; box-shadow: none; }
    .settings-submenu > nav a { padding-left: 1rem; font-weight: 650; }

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

    .form-grid.three-columns,
    .contribution-quick-form {
        grid-template-columns: 1fr;
    }

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

    .contribution-quick-form,
    .contribution-amount-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .contribution-custom-amount {
        width: 100%;
    }

    .event-visual-hero {
        min-height: 22rem;
        border-radius: 0.9rem 0.9rem 0 0;
    }

    .event-details-page .event-visual-hero {
        min-height: clamp(22rem, 72vh, 34rem);
        border-radius: 0;
    }

    .event-detail-menu {
        margin-bottom: 1.5rem;
    }

    .event-menu-toggle {
        width: 100%;
        min-height: 3.75rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border: 0;
        color: #fff;
        background: var(--primary);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

    .event-menu-toggle:hover,
    .event-menu-toggle:focus-visible,
    .event-menu-toggle[aria-expanded="true"] {
        background: var(--primary-dark);
    }

    .event-menu-toggle svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .event-menu-toggle-chevron {
        margin-left: auto;
        transition: transform 150ms ease;
    }

    .event-menu-toggle[aria-expanded="true"] .event-menu-toggle-chevron {
        transform: rotate(180deg);
    }

    .event-detail-nav {
        display: none;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        min-height: 0;
        margin-bottom: 0;
        padding: 0.75rem;
        border-top: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
        border-radius: 0 0 0.9rem 0.9rem;
        background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
    }

    .event-detail-nav.is-open {
        display: grid;
    }

    .event-details-page .event-detail-nav {
        border-radius: 0 0 0.9rem 0.9rem;
    }

    .event-detail-nav .event-detail-nav-back {
        grid-column: 1 / -1;
        margin-right: 0;
    }

    .event-detail-nav > a,
    .event-more-menu > summary {
        width: 100%;
        justify-content: flex-start;
        border: 1px solid var(--border);
        background: var(--surface);
        text-align: left;
    }

    .event-more-menu {
        width: 100%;
    }

    .event-more-menu-items {
        position: static;
        width: 100%;
        min-width: 0;
        gap: 0.4rem;
        margin-top: 0.4rem;
        padding: 0 0 0 0.65rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .event-more-menu-items a {
        min-height: 3rem;
        border: 1px solid var(--border);
        background: var(--surface);
    }

    .event-visual-section {
        padding: 1.15rem;
    }

    .event-program-overviews {
        grid-template-columns: 1fr;
    }

    .meal-calendar-grid {
        grid-auto-columns: 17.25rem;
    }

    .meal-calendar-carousel {
        display: block;
    }

    .meal-calendar-arrow {
        display: none;
    }

    .meal-calendar-swipe-hint {
        display: block;
    }

    .contribution-submit,
    .contribution-amount-choice {
        width: 100%;
    }

    .form-field.full-width {
        grid-column: auto;
    }

    .feature-choice-grid,
    .radio-choice-list,
    .event-fact-grid,
    .attendance-totals {
        grid-template-columns: 1fr;
    }

    .event-section-order-list > li {
        align-items: stretch;
        flex-direction: column;
    }

    .order-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .order-buttons .button {
        width: 100%;
    }

    .event-hero {
        flex-direction: column;
    }

    .settings-grid,
    .settings-check-grid,
    .color-settings-grid,
    .sensitivity-editor {
        grid-template-columns: 1fr;
    }

    .member-option-grid,
    .recovery-code-list {
        grid-template-columns: 1fr;
    }

    .sensitivity-notes,
    .sensitivity-actions {
        grid-column: auto;
    }

    .page-heading-with-actions,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-actions,
    .page-actions,
    .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-actions .button,
    .page-actions .button,
    .table-actions .button,
    .inline-actions input[type="submit"] {
        width: 100%;
    }

    .site-footer {
        flex-direction: column;
    }

    .advanced-settings-link,
    .section-title-row,
    .section-heading-row,
    .split-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .table-scroll {
        overflow-x: visible;
        border: 0;
        background: transparent;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        width: 100%;
        display: block;
    }

    .data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .data-table tr.responsive-table-header {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .data-table tbody {
        display: grid;
        gap: 0.8rem;
    }

    .data-table tr {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 0.85rem;
        background: var(--surface);
        box-shadow: 0 0.35rem 1rem rgba(35, 53, 42, 0.05);
    }

    .data-table td {
        min-height: 2.9rem;
        display: grid;
        grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid #e7ebe7;
        overflow-wrap: anywhere;
    }

    .data-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .data-table td[data-label=""] {
        display: block;
    }

    .data-table td[data-label=""]::before {
        display: none;
    }

    .data-table .table-actions {
        min-width: 0;
    }

    .subscription-access-summary {
        grid-template-columns: 1fr;
    }

    .subscription-comparison-table {
        table-layout: auto;
    }

    .subscription-comparison-table td:first-child {
        padding: 1rem;
        background: var(--surface-soft);
    }

    .subscription-comparison-table td.is-popular {
        border-left: 0.28rem solid var(--primary);
        background: var(--primary-soft);
        box-shadow: none;
    }

    .subscription-comparison-table td.is-popular::before {
        color: var(--primary-dark);
    }

    .single-day-meal-calendar .meal-day-items,
    .gallery-grid,
    .event-photo-preview-grid,
    .weather-card-grid,
    .nearby-place-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        columns: 1;
    }

    .gallery-filter-row,
    .gallery-filter-field {
        width: 100%;
    }

    .gallery-filter-row {
        grid-template-columns: 1fr;
    }

    .discussion-thread-row {
        grid-template-columns: 1fr;
    }

    .discussion-delete-button {
        width: 100%;
    }

    .event-photo-quick-upload,
    .planning-rotation-card {
        grid-template-columns: 1fr;
    }

    .event-photo-quick-upload .button {
        width: 100%;
    }

    .gallery-bulk-actions,
    .gallery-dialog-header,
    .gallery-dialog-actions,
    .discussion-thread-card,
    .discussion-post > header {
        align-items: stretch;
        flex-direction: column;
    }

    .gallery-bulk-actions .page-actions,
    .gallery-dialog-actions .button,
    .gallery-dialog-actions a {
        width: 100%;
    }

    .discussion-thread-summary {
        text-align: left;
    }

    .rotation-manage-actions .button {
        flex: 1 1 auto;
    }
}

@media (max-width: 42rem) {
    .meal-cleanup-row,
    .lodging-card,
    .family-group-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .meal-cleanup-row .button,
    .lodging-card .card-actions,
    .lodging-card .button,
    .family-group-card .card-actions,
    .family-group-card .button {
        width: 100%;
    }

    .schedule-filter-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-filter:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 52rem) {
    .subscription-pricing-showcase {
        overflow: hidden;
        border-radius: 1rem;
    }

    .subscription-showcase-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 1.25rem;
    }

    .subscription-showcase-intro .billing-cycle-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .subscription-access-summary {
        grid-template-columns: 1fr;
    }

    .subscription-comparison-shell {
        display: none;
    }

    .subscription-mobile-plan-grid,
    .subscription-mobile-feature-list {
        display: grid;
        gap: 1rem;
        padding: 0 clamp(1rem, 4vw, 1.5rem);
    }

    .subscription-mobile-plan-grid {
        margin-top: 1.5rem;
    }

    .subscription-mobile-plan-grid .subscription-plan-card {
        gap: 0.8rem;
    }

    .subscription-mobile-plan-grid .subscription-plan-card h3 {
        margin: 0;
        font-size: 1.55rem;
    }

    .subscription-mobile-plan-grid .subscription-plan-card.is-popular {
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 62%, #fff), #fff);
    }

    .subscription-mobile-feature-list {
        margin-top: 1.5rem;
    }

    .subscription-mobile-feature-card {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 0.9rem;
        background: var(--surface);
        box-shadow: 0 0.35rem 1rem rgba(24, 47, 39, 0.06);
    }

    .subscription-mobile-feature-card > h3,
    .subscription-mobile-feature-card > p {
        margin: 0;
        padding-inline: 1rem;
    }

    .subscription-mobile-feature-card > h3 {
        padding-top: 1rem;
        font-size: 1.1rem;
    }

    .subscription-mobile-feature-card > p {
        padding-top: 0.3rem;
        padding-bottom: 0.9rem;
        color: var(--text-muted);
        font-size: 0.88rem;
    }

    .subscription-mobile-feature-card dl,
    .subscription-mobile-feature-card dt,
    .subscription-mobile-feature-card dd {
        margin: 0;
    }

    .subscription-mobile-feature-card dl > div {
        display: grid;
        grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: center;
        padding: 0.85rem 1rem;
        border-top: 1px solid var(--border);
        background: var(--surface-soft);
    }

    .subscription-mobile-feature-card dl > div.is-popular {
        border-left: 0.28rem solid var(--primary);
        background: var(--primary-soft);
    }

    .subscription-mobile-feature-card dt {
        color: var(--heading);
        font-weight: 850;
    }

    .subscription-mobile-feature-card dt small {
        display: block;
        margin-top: 0.2rem;
        color: var(--primary);
        font-size: 0.67rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .subscription-mobile-feature-card .subscription-feature-value {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .subscription-mobile-feature-card .subscription-feature-value::before {
        width: 1.4rem;
        height: 1.4rem;
        flex: 0 0 auto;
        font-size: 0.76rem;
    }

    .subscription-showcase-footer {
        padding-top: 1rem;
    }
}

@media (max-width: 58rem) {
    .stripe-mode-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stripe-mode-options {
        grid-template-columns: 1fr;
    }

    .stripe-environment-grid {
        grid-template-columns: 1fr;
    }

    .stripe-environment-card {
        min-height: 0;
    }

    .event-type-choice-grid {
        grid-template-columns: 1fr;
    }

    .event-type-choice {
        min-height: 0;
    }

    .generic-event-when,
    .generic-event-detail-grid {
        grid-template-columns: 1fr;
    }

    .generic-event-detail-hero {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .generic-event-detail-actions {
        width: 100%;
        grid-column: 1 / -1;
    }

    .generic-event-detail-actions .button {
        flex: 1 1 12rem;
    }
}

@media (max-width: 42rem) {
    .event-type-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1rem;
        border-radius: 0.9rem;
    }

    .event-type-dialog-heading h1 {
        font-size: 1.8rem;
    }

    .generic-event-detail-hero {
        grid-template-columns: 1fr;
    }

    .generic-event-date-tile {
        width: 4.7rem;
        min-height: 5rem;
    }

    .generic-event-detail-actions,
    .generic-event-detail-actions .button {
        width: 100%;
    }

    .generic-event-info-card {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}
/* Embedded subscription billing and reporting */
.billing-page-heading { position: relative; padding-right: 13rem; }
.billing-page-heading .page-heading-action { position: absolute; top: .15rem; right: 0; min-width: 11.5rem; justify-content: center; }
.billing-checkout-layout, .billing-manage-grid { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(25rem, 1.28fr); gap: 1.25rem; align-items: start; }
.billing-order-card, .billing-payment-card, .billing-summary-card, .billing-card-card { padding: clamp(1.35rem, 2.5vw, 2.25rem); }
.billing-order-price { margin: .7rem 0; color: var(--main-heading-color); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; }
.billing-sandbox-note, .report-mode-banner { display: flex; gap: .65rem 1rem; align-items: center; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #d39a42; border-radius: 10px; background: #fff4d6; color: #583c0d; }
.billing-sandbox-note { flex-direction: column; align-items: flex-start; gap: .2rem; }
.billing-secure-heading { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.2rem; }
.billing-secure-heading h2, .billing-secure-heading p { margin: 0; }
.billing-lock-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: #e2f1eb; font-size: 1.3rem; }
.stripe-element-shell { min-height: 7rem; padding: 1rem; border: 1px solid #d9dfd8; border-radius: 12px; background: #fff; }
.billing-consent { display: grid; grid-template-columns: 1.35rem 1fr; gap: .7rem; align-items: start; margin: 1.25rem 0; font-weight: 600; line-height: 1.5; }
.billing-consent input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.billing-confirm-button { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.billing-result-card { max-width: 48rem; margin: 2rem auto; padding: clamp(2rem, 5vw, 4rem); text-align: center; }
.billing-result-icon { display: grid; width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; place-items: center; border-radius: 50%; font-size: 2rem; font-weight: 800; }
.billing-result-icon.is-success { background: #dff3e8; color: #17613f; }
.billing-result-icon.is-pending { background: #fff0c7; color: #7a5000; }
.billing-summary-list { display: grid; gap: 0; margin: 1.25rem 0; }
.billing-summary-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #e1e6e1; }
.billing-summary-list dt { color: #62736c; }
.billing-summary-list dd { margin: 0; font-weight: 700; text-align: right; }
.saved-card-display { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 1.25rem; padding: 1rem; border-radius: 12px; background: #edf5f1; }
.saved-card-display div { display: flex; flex-direction: column; gap: .2rem; }
.saved-card-icon { font-size: 2rem; }
.billing-card-dialog { width: min(38rem, calc(100vw - 2rem)); }
.subscription-current-status .button { margin-top: .7rem; }
.subscription-payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; padding: 1.1rem 1.25rem; }
.subscription-payment-summary div { display: flex; flex-direction: column; gap: .25rem; }
.subscription-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.35rem; }
.subscription-kpi-card { display: flex; min-height: 9rem; gap: 1rem; align-items: center; padding: 1.3rem; border: 1px solid #d8e0da; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(23,54,45,.07); }
.subscription-kpi-card.is-monthly { background: linear-gradient(145deg, #dff2e9, #fff); }
.subscription-kpi-card.is-annual { background: linear-gradient(145deg, #e1edf8, #fff); }
.subscription-kpi-card.is-attention { background: linear-gradient(145deg, #fff0d8, #fff); }
.subscription-kpi-icon { display: grid; flex: 0 0 3rem; height: 3rem; place-items: center; border-radius: 12px; background: #2d6855; color: #fff; font-size: 1.25rem; font-weight: 800; }
.subscription-kpi-card div { display: flex; min-width: 0; flex-direction: column; }
.subscription-kpi-card span:not(.subscription-kpi-icon) { color: #52645d; font-size: .9rem; font-weight: 700; }
.subscription-kpi-card strong { color: #17362d; font-size: clamp(1.6rem, 3vw, 2.45rem); line-height: 1.05; }
.subscription-kpi-card small { color: #6b756f; }
.subscription-report-section { margin-top: 1.25rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.subscription-plan-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.subscription-plan-report-card { padding: 1.25rem; border-radius: 14px; background: #eef5f1; }
.subscription-plan-report-card h3 { margin-top: 0; }
.subscription-plan-report-card > strong { display: block; margin: .75rem 0; color: #1f5c49; font-size: 2rem; }
.subscription-plan-report-card > strong small { font-size: .85rem; }
.subscription-plan-report-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.subscription-plan-report-card dl div { display: flex; flex-direction: column; }
.subscription-plan-report-card dd { margin: .15rem 0 0; font-size: 1.3rem; font-weight: 800; }
.subscription-report-table td:first-child small { display: block; margin-top: .2rem; color: #68766f; }

@media (max-width: 900px) {
    .billing-page-heading { padding-right: 0; }
    .billing-page-heading .page-heading-action { position: static; width: fit-content; margin-top: 1.25rem; }
    .billing-checkout-layout, .billing-manage-grid { grid-template-columns: 1fr; }
    .subscription-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .billing-page-heading .page-heading-action { width: 100%; }
    .report-mode-banner { align-items: flex-start; flex-direction: column; }
    .subscription-kpi-grid { grid-template-columns: 1fr; }
    .billing-summary-list div { flex-direction: column; gap: .2rem; }
    .billing-summary-list dd { text-align: left; }
    .subscription-payment-summary { grid-template-columns: 1fr; }
}

/* Personal Upcoming page colors and filters */
.upcoming-filter-toolbar { position: relative; z-index: 12; display: flex; width: fit-content; max-width: 100%; gap: .4rem; align-items: center; margin: 0 0 1rem auto; }
.upcoming-filter-toolbar .upcoming-view-toggle { width: auto; flex: 1 1 auto; }
.upcoming-more-filters { position: relative; flex: 0 0 auto; }
.upcoming-filter-menu-button { display: grid; width: 3rem; min-width: 3rem; height: 3.25rem; min-height: 3.25rem; padding: 0; place-items: center; list-style: none; }
.upcoming-filter-menu-button::-webkit-details-marker { display: none; }
.upcoming-filter-menu-button span { display: block; font-size: 1.75rem; font-weight: 900; line-height: 1; transform: translateY(-.04em); }
.upcoming-more-filters[open] > .upcoming-filter-menu-button { color: #fff; border-color: var(--primary); background: var(--primary); }
.upcoming-filter-menu { position: absolute; z-index: 100; top: calc(100% + .45rem); right: 0; display: grid; width: min(20rem, calc(100vw - 2rem)); gap: .85rem; padding: 1rem; box-shadow: 0 1rem 2.5rem rgba(24, 45, 37, .2); }
.upcoming-filter-menu .eyebrow { margin: 0; }
.upcoming-filter-menu .form-field { display: grid; gap: .35rem; margin: 0; }
.upcoming-filter-menu label { font-weight: 800; }
.upcoming-filter-menu select { width: 100%; min-width: 0; }
.upcoming-card { border-left: .42rem solid var(--upcoming-status-color, var(--primary)); }
.upcoming-card .upcoming-date { color: var(--upcoming-type-foreground, #fff); background: var(--upcoming-type-color, var(--primary)); }
.upcoming-card .upcoming-type { border-color: color-mix(in srgb, var(--upcoming-type-color, var(--primary)) 45%, white); color: var(--heading); background: color-mix(in srgb, var(--upcoming-type-color, var(--primary)) 12%, white); }
.calendar-item { border-left: .25rem solid var(--upcoming-status-color, transparent); color: var(--upcoming-type-foreground, #fff); background: var(--upcoming-type-color, var(--primary)); }
.upcoming-status { margin-left: .35rem; border: 1px solid color-mix(in srgb, var(--upcoming-status-color, var(--border)) 45%, white); color: var(--heading); background: color-mix(in srgb, var(--upcoming-status-color, var(--surface-soft)) 16%, white); }
a.calendar-item:hover,
a.calendar-item:focus-visible { color: var(--upcoming-type-foreground, #fff); }
.upcoming-settings-dialog { width: min(46rem, calc(100vw - 2rem)); }
.upcoming-settings-fieldset { margin: 1.1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .8rem; }
.upcoming-settings-fieldset legend { padding: 0 .4rem; color: var(--heading); font-weight: 800; }
.upcoming-color-grid, .upcoming-visibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.upcoming-color-grid label { display: flex; justify-content: space-between; gap: .7rem; align-items: center; font-weight: 700; }
.upcoming-color-grid input[type="color"] { width: 3.5rem; min-height: 2.7rem; padding: .2rem; cursor: pointer; }
.upcoming-checkbox-option,
.upcoming-checkbox-option > span { display: flex; gap: .65rem; align-items: center; }
.upcoming-checkbox-option input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; }
.upcoming-checkbox-option label { font-weight: 650; cursor: pointer; }
.upcoming-settings-actions { justify-content: flex-end; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.upcoming-settings-actions .button { min-width: 8.5rem; }
.event-list-filters { display: flex; flex-wrap: nowrap; gap: .7rem; align-items: end; }
.event-list-filter-field { width: clamp(14rem, 22vw, 20rem); display: grid; gap: .4rem; }
.event-list-filters label { font-weight: 800; }
.event-list-filters select { width: 100%; min-width: 0; }
.event-list-filters .button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 560px) {
    .upcoming-filter-toolbar { width: 100%; }
    .upcoming-filter-toolbar .upcoming-view-toggle { min-width: 0; }
    .upcoming-filter-menu { position: fixed; top: auto; right: 1rem; left: 1rem; width: auto; }
    .upcoming-color-grid, .upcoming-visibility-grid { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
    .event-list-filters { width: 100%; align-items: stretch; flex-direction: column; }
    .event-list-filter-field { width: 100%; }
    .event-list-filters .button { width: 100%; }
}

/* Administration dashboard */
.admin-dashboard-heading { max-width: 66rem; }
.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 2rem;
}
.admin-metric-card {
    min-height: 10rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, #fff, #f5faf7);
    box-shadow: 0 .75rem 2rem rgba(24, 47, 39, .07);
}
.admin-metric-card > span:last-child { min-width: 0; display: grid; gap: .25rem; }
.admin-metric-card small { color: var(--text-muted); font-weight: 800; }
.admin-metric-card strong { color: var(--heading); font-family: var(--heading-font); font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; }
.admin-metric-card a { width: fit-content; margin-top: .35rem; font-weight: 800; }
.admin-metric-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    color: #fff;
    background: var(--primary);
}
.admin-metric-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-metric-families .admin-metric-icon { background: #3478a8; }
.admin-metric-events .admin-metric-icon { background: #a75c25; }
.admin-metric-attention .admin-metric-icon { background: #a12d31; }
.admin-metric-note { margin-top: .35rem; color: var(--text-muted); font-size: .9rem; }
.admin-dashboard-section { margin-top: 2rem; }
.admin-dashboard-section + .admin-dashboard-section { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.admin-action-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* Event list cards and multi-select filter */
.event-type-filter-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.event-type-filter-fieldset legend { margin-bottom: .45rem; font-weight: 850; }
.event-type-filter-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.event-type-filter-list > span { position: relative; }
.event-type-filter-list input { position: absolute; opacity: 0; pointer-events: none; }
.event-type-filter-list label {
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--heading);
    background: #fff;
    cursor: pointer;
}
.event-type-filter-list input:checked + label { color: #fff; border-color: var(--primary); background: var(--primary); }
.event-type-filter-list input:focus-visible + label { outline: 3px solid rgba(40, 103, 82, .25); outline-offset: 2px; }
.event-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.event-list-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .65rem 1.75rem rgba(24, 47, 39, .07);
}
.event-list-card.is-archived { opacity: .72; }
.event-card-accent { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; color: #fff; background: #2d6855; font-weight: 800; }
.event-card-party .event-card-accent { background: #a75c25; }
.event-card-generic .event-card-accent { background: #3e72a8; }
.event-card-accent .status-pill { margin-left: auto; color: var(--heading); background: rgba(255,255,255,.9); }
.event-card-type-icon { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.event-card-type-icon svg, .event-card-meta svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.event-card-body { padding: 1.25rem; }
.event-card-date { margin: 0 0 .4rem; color: var(--primary); font-weight: 850; }
.event-card-body h3 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.event-card-meta { display: grid; gap: .65rem; margin-top: 1.1rem; color: var(--text-muted); }
.event-card-meta > span { display: flex; align-items: flex-start; gap: .55rem; }
.event-card-meta svg { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; margin-top: .1rem; color: var(--primary); }
.event-card-actions { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--border); }
.event-card-actions .button { min-height: 2.75rem; }
.event-list-empty { margin-top: 1.25rem; }

/* Event page discussion sidebar and steady location loading states */
.event-details-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 1rem; align-items: start; padding-right: 1rem; }
.event-details-main { min-width: 0; }
.event-discussion-sidebar { position: sticky; top: 5.5rem; min-width: 0; }
.event-details-page .event-discussion-sidebar .event-visual-section { margin-inline: 0; padding: 1.25rem; }
.event-discussion-sidebar .section-heading-row { display: block; }
.event-discussion-sidebar h2 { font-size: clamp(1.65rem, 2vw, 2.15rem); }
.event-discussion-composer { margin: 1rem 0; padding: .85rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--primary-soft); }
.event-discussion-composer > summary { min-height: 2.6rem; display: flex; align-items: center; color: var(--primary-dark); font-weight: 850; cursor: pointer; }
.event-discussion-composer[open] > summary { margin-bottom: .75rem; }
.event-discussion-preview-card { width: 100%; }
.event-discussion-preview-card .social-post-copy h3 { margin: 0 0 .45rem; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.3; }
.event-discussion-inline-reply { display: grid; gap: .65rem; padding: .8rem .85rem; border-top: 1px solid var(--border); background: #fbfcfa; }
.event-discussion-inline-reply[hidden] { display: none !important; }
.event-discussion-inline-reply textarea { min-height: 5.5rem; }
.event-discussion-inline-reply .page-actions { margin: 0; }
.event-discussion-view-all { display: inline-flex; margin-top: 1rem; font-weight: 850; }
.location-loading-placeholder { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: #f7faf8; }
.location-skeleton-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.location-skeleton-row span { min-height: 9rem; border-radius: .8rem; background: linear-gradient(90deg, #e9efeb 25%, #f7faf8 50%, #e9efeb 75%); background-size: 200% 100%; animation: location-skeleton 1.35s infinite linear; }
.nearby-skeleton-row span { min-height: 5rem; }
@keyframes location-skeleton { to { background-position: -200% 0; } }
.inline-lodging-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.inline-lodging-columns > section { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: #f8faf8; }
.inline-lodging-columns > section > h3 { margin: 0 0 .85rem; }
.inline-lodging-columns .lodging-card-grid { grid-template-columns: 1fr; }
.compact-empty-state { min-height: 0; padding: 1rem; }
.compact-empty-state p { margin: 0; }

/* Family Directory */
.family-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}
.family-directory-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .55rem 1.5rem rgba(24, 47, 39, .06);
}
.family-directory-card > header { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; background: var(--primary-soft); }
.family-directory-card > header h2 { margin: 0; font-size: 1.3rem; }
.family-directory-card > header span:not(.family-directory-avatar) { color: var(--text-muted); font-size: .88rem; }
.family-directory-avatar {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-weight: 900;
    letter-spacing: .04em;
}
.family-directory-details { margin: 0; padding: .35rem 1.1rem 1rem; }
.family-directory-details > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .65rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.family-directory-details > div:last-child { border-bottom: 0; }
.family-directory-details dt { color: var(--text-muted); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.family-directory-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.family-directory-details dd > span { display: block; }
.directory-directions-link { display: inline-flex; margin-top: .35rem; font-weight: 800; }
.family-directory-private { margin: 0; padding: 1.1rem; color: var(--text-muted); }
.location-admin-layout { display: grid; grid-template-columns: minmax(20rem, .85fr) minmax(22rem, 1.15fr); gap: 1rem; align-items: start; }
.location-admin-layout > .panel { margin: 0; }
.location-viewer-fieldset { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; }
.location-viewer-fieldset legend { padding: 0 .35rem; color: var(--primary-dark); font-weight: 850; }
.location-preview-list { display: grid; gap: .65rem; margin-top: 1rem; }
.location-preview-list article { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--primary-soft); }
.location-preview-list article span { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .86rem; }
.location-person-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--border); border-radius: .8rem; color: var(--text); background: var(--primary-soft); text-decoration: none; }
.location-person-row:hover { border-color: var(--primary); background: #fff; transform: translateY(-1px); }
.location-person-row strong, .location-person-row span, .location-person-row small { display: block; }
.location-person-row span, .location-person-row small { color: var(--text-muted); }
.location-person-avatar { width: 2.7rem; height: 2.7rem; display: grid !important; place-items: center; flex: 0 0 2.7rem; border-radius: 50%; color: #fff !important; background: var(--primary); font-size: .78rem !important; font-weight: 900; }
.location-row-arrow { color: var(--primary-dark) !important; font-size: 1.7rem !important; }
.location-map-controls { display: flex; align-items: end; gap: 1rem; }
.location-map-controls .form-field { flex: 1; margin: 0; }
.family-location-map { min-height: 32rem; margin-top: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(135deg,var(--primary-soft),#fff); box-shadow: 0 .6rem 1.5rem rgba(24,47,39,.06); }
.location-map-list { display: grid; gap: .65rem; margin-top: 1rem; }
.location-map-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .85rem; background: #fff; }
.location-map-list article span, .location-map-list article small { display: block; color: var(--text-muted); }
@media (max-width: 46rem) {
    .location-map-controls { align-items: stretch; flex-direction: column; }
    .location-map-controls .button { width: 100%; }
    .family-location-map { min-height: 24rem; }
    .location-map-list article { grid-template-columns: auto minmax(0,1fr); }
    .location-map-list article .button { grid-column: 1 / -1; width: 100%; }
}
.location-privacy-notice { margin-top: 1rem; }

/* Profile experience */
.required-marker { color: #a12626; font-weight: 900; }
.profile-information-stack { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
.profile-information-stack .form-field { margin: 0; }
.profile-photo-birthdate-row { align-items: start; }
.profile-photo-birthdate-row > .form-field { align-self: start; }
.profile-image-inline { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: .9rem; }
.profile-image-preview { width: 5rem; height: 5rem; overflow: hidden; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 0 0 1px var(--border), 0 .35rem .9rem rgba(24,47,39,.14); font-size: 1.15rem; font-weight: 900; }
.profile-image-preview.is-editing { width: 10rem; height: 10rem; }
.profile-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-image-preview [hidden] { display: none !important; }
.profile-image-selection-preview { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.profile-image-selection-preview.is-dragging { cursor: grabbing; }
.profile-image-selection-preview:focus-visible { outline: 3px solid rgba(56,116,207,.55); outline-offset: -5px; border-radius: 50%; }
.profile-image-initials { display: grid; width: 100%; height: 100%; place-items: center; }
.profile-image-controls { min-width: 0; display: grid; align-content: start; gap: .4rem; }
.profile-image-controls .field-help { margin-top: 0; }
.profile-image-crop-controls { display: grid; gap: .55rem; margin-top: .2rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-muted); }
.profile-image-crop-controls[hidden] { display: none !important; }
.profile-image-zoom-control { display: grid; grid-template-columns: auto minmax(8rem,1fr) 3.5rem; align-items: center; gap: .65rem; }
.profile-image-zoom-control label { font-weight: 800; }
.profile-image-zoom-control input { width: 100%; accent-color: var(--primary); }
.profile-image-zoom-control output { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.compact-page-actions { align-items: center; margin: 0; flex-direction: row; }
.privacy-family-controls { display: grid; grid-template-columns: minmax(14rem,.8fr) minmax(18rem,1.2fr); align-items: end; gap: 1rem; margin: 1rem 0; }
.privacy-family-controls .form-field, .privacy-family-controls .large-check { margin: 0; }
.profile-privacy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.privacy-setting { min-width: 0; display: grid; align-content: start; gap: .45rem; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-muted); }
.privacy-setting > label { font-weight: 800; }
.privacy-people { margin-top: .25rem; }
.profile-summary-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: 1rem; margin: 1.5rem 0; }
.profile-summary-row .profile-section { min-width: 0; margin-top: 0; }
.profile-summary-stack { min-width: 0; display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1rem; }
.profile-summary-card { height: 100%; display: flex; flex-direction: column; }
.profile-summary-card h2 { overflow-wrap: anywhere; }
.profile-subscription-facts { display: grid; gap: .55rem; margin: 1rem 0; }
.profile-subscription-facts > div { display: grid; grid-template-columns: minmax(6rem,.75fr) minmax(0,1.25fr); align-items: start; gap: .75rem; }
.profile-subscription-facts span { color: var(--text-muted); }
.profile-subscription-facts strong { min-width: 0; overflow-wrap: anywhere; }
.profile-summary-action { margin-top: auto; padding-top: 1rem; }
.profile-summary-action .button { width: 100%; justify-content: center; }
.profile-security-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.profile-security-grid > .aspNetDisabled { display: block; }
.profile-security-action-card { width: 100%; min-height: 3.8rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .8rem; color: var(--text); background: var(--surface-muted); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.profile-security-action-card:hover, .profile-security-action-card:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.profile-security-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .75rem; background: var(--primary-soft); font-size: 1.2rem; }
.profile-security-action-card small { display: block; margin-top: .12rem; color: var(--text-muted); }
.profile-security-chevron { color: var(--primary-dark); font-size: 1.45rem; font-weight: 900; }
.profile-notification-scope { margin: .5rem 0 .75rem; }
.notification-inheritance { margin: 0 0 .75rem; padding: .7rem .75rem; border-radius: .7rem; background: var(--primary-soft); }
.profile-notification-options { display: grid; gap: .25rem; padding: .8rem 0; }
.profile-notification-options + .profile-notification-options { margin-top: .25rem; }
.profile-notification-options h3, .profile-notification-prompt { margin: 0; }
.profile-notification-options h3 { font-family: var(--font-body); font-size: 1rem; }
.profile-notification-prompt { color: var(--text-muted); font-size: .88rem; }
.profile-notification-options .large-check { min-height: 0; margin: .25rem 0; align-items: flex-start; }
.profile-save-actions { display: grid; justify-items: start; gap: .65rem; }
.profile-summary-card > .profile-save-actions { margin-top: auto; padding-top: 1rem; }
.profile-save-actions .form-message { width: 100%; margin: 0; }
.profile-save-actions .form-message:empty { display: none; }
.profile-sensitivity-dialog { width: min(42rem,calc(100% - 2rem)); }
.profile-sensitivity-dialog .sensitivity-editor { grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; background: transparent; }
.profile-sensitivity-dialog .sensitivity-notes, .profile-sensitivity-dialog .sensitivity-actions { grid-column: auto; }
.profile-sensitivity-dialog .sensitivity-actions { margin-top: .5rem; }
.profile-image-moderation { margin-top: 1.25rem; }
.admin-profile-image-preview { width: 5rem; height: 5rem; flex: 0 0 5rem; border-radius: 50%; object-fit: cover; }
.social-avatar { overflow: hidden; }
.social-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.member-list-name { display: flex; align-items: center; gap: .7rem; }
.member-list-avatar { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }

@media (max-width: 64rem) {
    .profile-summary-row { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
    .profile-photo-birthdate-row, .profile-privacy-grid, .privacy-family-controls { grid-template-columns: 1fr; }
    .profile-image-inline { grid-template-columns: 1fr; justify-items: start; }
    .profile-image-controls { width: 100%; }
    .profile-image-zoom-control { grid-template-columns: 1fr auto; }
    .profile-image-zoom-control input { grid-column: 1 / -1; grid-row: 2; }
    .compact-page-actions { align-items: stretch; flex-direction: column; }
}

/* Signed-in home dashboard */
.home-dashboard { display: grid; gap: 1rem; margin: 1rem 0 1.25rem; }
.home-dashboard-metrics { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 1rem; }
.home-dashboard-metric { min-width: 0; display: flex; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 .55rem 1.4rem rgba(24,47,39,.06); }
.home-dashboard-metric-icon { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; border-radius: .85rem; color: #fff; background: var(--primary); }
.home-dashboard-metric-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-dashboard-metric > div > small, .home-dashboard-metric > div > span { display: block; color: var(--text-muted); }
.home-dashboard-metric small { font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.home-dashboard-metric strong { display: block; margin-top: .15rem; color: var(--primary-dark); font-size: 1.8rem; line-height: 1.1; }

/* Shared social feed and discussion cards */
.family-feed-heading { margin-bottom: 1.5rem; }
.social-feed, .discussion-thread-list { width: min(100%, 56rem); margin: 0 auto; display: grid; gap: 1rem; }
.social-post-card { overflow: hidden; border: 1px solid var(--border); border-radius: 1.15rem; background: #fff; box-shadow: 0 .55rem 1.6rem rgba(24,47,39,.07); }
.social-post-header { display: flex; align-items: center; gap: .8rem; padding: 1.05rem 1.15rem .75rem; }
.social-post-header > div { min-width: 0; display: grid; gap: .12rem; }
.social-post-header strong { color: var(--text); font-size: 1rem; }
.social-post-header > div > span { color: var(--text-muted); font-size: .83rem; }
.social-avatar { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.social-context-badge { margin-left: auto; padding: .32rem .58rem; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.social-context-badge.event { color: #73400f; background: #fff0cf; }
.social-post-copy { padding: .25rem 1.15rem 1rem; }
.social-post-copy h2 { margin: 0 0 .5rem; font-family: var(--font-body); font-size: 1.28rem; line-height: 1.25; }
.social-post-copy .discussion-post-body { color: var(--text); line-height: 1.6; }
.reply-context { margin: 0 1.15rem .7rem; padding: .55rem .75rem; border-left: 3px solid var(--secondary); color: var(--text-muted); background: var(--surface-muted); border-radius: 0 .5rem .5rem 0; font-size: .85rem; }
.social-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .2rem; margin-top: .25rem; }
.social-media-grid > * { min-width: 0; }
.social-media-grid img, .social-media-grid video { width: 100%; max-height: 29rem; display: block; object-fit: cover; background: #10231d; }
.social-media-grid > :only-child { grid-column: 1 / -1; }
.social-media-grid.profile-picture-update-media,
.profile-image-update-post .social-media-grid {
    display: flex;
    justify-content: center;
    margin: .25rem 0 .8rem;
    padding: .25rem 1rem .75rem;
}
.social-media-grid.profile-picture-update-media > a:only-child,
.profile-image-update-post .social-media-grid > a:only-child {
    width: 10rem;
    height: 10rem;
    flex: 0 0 10rem;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--surface-soft);
    box-shadow: 0 0 0 1px var(--border), 0 .45rem 1.15rem rgba(24,47,39,.16);
}
.social-media-grid.profile-picture-update-media img,
.profile-image-update-post .social-media-grid img {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
}
.social-post-footer { min-height: 3.65rem; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: .75rem 1.15rem; border-top: 1px solid var(--border); background: var(--surface-muted); }
.social-post-footer small { color: var(--text-muted); }
.social-post-footer .button-danger { margin-left: auto; }
.quiet-link { color: var(--primary-dark); font-weight: 800; }
.social-empty-state { max-width: 48rem; margin-inline: auto; }
.social-empty-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; margin: 0 auto .6rem; border-radius: 50%; background: var(--primary-soft); font-size: 1.5rem; }
.discussion-list-section { margin-top: 1.75rem; }
.discussion-list-section > .section-heading-row { width: min(100%,56rem); margin-inline: auto; }
.discussion-topic-card { width: 100%; }
.event-discussion-feed-card { cursor: pointer; }
.event-discussion-feed-card .social-media-grid { margin-top: 0; }
.event-discussion-feed-actions a { color: var(--text-muted); text-decoration: none; }
.event-discussion-feed-actions a:hover,
.event-discussion-feed-actions a:focus-visible { color: var(--primary); }
.event-discussion-feed-card .family-feed-more-menu a {
    width: 100%;
    display: block;
    padding: .55rem .65rem;
    border-radius: .4rem;
    color: var(--heading);
    text-align: left;
    text-decoration: none;
    font-weight: 750;
}
.event-discussion-feed-card .family-feed-more-menu a:hover,
.event-discussion-feed-card .family-feed-more-menu a:focus-visible { background: var(--primary-soft); }
.event-discussion-feed-card .family-feed-more-menu a.is-danger { color: var(--danger); }
.discussion-subscription-panel { display: flex; align-items: center; gap: .85rem; }
.discussion-subscription-panel .discussion-summary-copy { flex: 1; }
.discussion-subscription-panel > .button { margin-left: auto; }

/* Family feed available throughout the signed-in site */
.site-workspace {
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
.site-workspace.has-family-feed.family-feed-expanded,
.site-workspace.has-family-feed.family-feed-unset {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem);
}
.site-workspace.has-family-feed.family-feed-collapsed {
    grid-template-columns: minmax(0, 1fr);
}
.family-feed-sidebar {
    min-width: 0;
    height: calc(100vh - 4.75rem);
    position: sticky;
    top: 4.75rem;
    z-index: 18;
    overflow: hidden;
    overscroll-behavior: contain;
    border-left: 1px solid var(--border);
    background: #f6f8f5;
    box-shadow: -.65rem 0 1.8rem rgba(24, 47, 39, .08);
    transition: transform .22s ease, visibility .22s ease;
}
.family-feed-view {
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    background: #f6f8f5;
    transition: transform .24s ease, opacity .2s ease;
}
.family-feed-list-view { position: relative; z-index: 1; transform: translateX(0); }
.family-feed-list-scroll { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 5.75rem; box-sizing: border-box; }
.family-feed-thread-view {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
}
.family-feed-thread-open .family-feed-list-view { transform: translateX(-18%); opacity: .35; pointer-events: none; }
.family-feed-thread-open .family-feed-thread-view { transform: translateX(0); visibility: visible; pointer-events: auto; }
.family-feed-collapsed .family-feed-sidebar {
    width: min(25rem, calc(100vw - 1rem));
    position: fixed;
    right: 0;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
}
.family-feed-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(.6rem);
}
.family-feed-sidebar-header .eyebrow { margin: 0 0 .18rem; }
.family-feed-sidebar-header h2 { margin: 0; font-family: var(--font-body); font-size: 1.45rem; }
.family-feed-thread-header { justify-content: flex-start; }
.family-feed-thread-header > div { min-width: 0; }
.family-feed-thread-header h2,
.family-feed-thread-header .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-feed-thread-back {
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--primary-dark);
    background: #fff;
    cursor: pointer;
}
.family-feed-thread-back svg { width: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.family-feed-quick-actions {
    position: fixed;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 22;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.family-feed-quick-actions-toggle {
    width: 3.35rem;
    height: 3.35rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 .7rem 1.6rem rgba(24, 47, 39, .28);
    cursor: pointer;
    transition: transform .2s ease, background .16s ease, box-shadow .16s ease;
}
.family-feed-quick-actions-toggle svg {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.family-feed-quick-actions-toggle:hover,
.family-feed-quick-actions-toggle:focus-visible { background: var(--primary-dark); box-shadow: 0 .85rem 1.8rem rgba(24, 47, 39, .34); }
.family-feed-quick-actions.is-open .family-feed-quick-actions-toggle { transform: rotate(45deg); }
.family-feed-quick-action-menu {
    min-width: max-content;
    position: absolute;
    right: 0;
    bottom: 3.35rem;
    display: grid;
    justify-items: end;
    gap: .55rem;
    padding-bottom: .75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(.6rem) scale(.97);
    transform-origin: bottom right;
    transition: opacity .16s ease, transform .18s ease, visibility .18s ease;
}
.family-feed-quick-actions.is-open .family-feed-quick-action-menu,
.family-feed-quick-actions:focus-within .family-feed-quick-action-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.family-feed-quick-action {
    min-height: 2.85rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .75rem .42rem .45rem;
    border: 1px solid rgba(42, 101, 82, .22);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 .5rem 1.25rem rgba(24, 47, 39, .17);
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.family-feed-quick-action:hover,
.family-feed-quick-action:focus-visible { color: var(--primary-dark); background: #fff; border-color: rgba(42, 101, 82, .48); transform: translateX(-.12rem); }
.family-feed-quick-action-icon { width: 2rem; height: 2rem; flex: 0 0 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.family-feed-quick-action-icon.event { background: #3d73ad; }
.family-feed-quick-action-icon.update { background: #286653; }
.family-feed-quick-action-icon.message { background: #6f55a5; }
.family-feed-quick-action-icon.recipe { background: #ad6127; }
.family-feed-quick-action-icon.invite { background: #9a4f7b; }
.family-feed-quick-action-icon.reminder { background: #6f67ad; }
.family-feed-quick-action-icon.media { background: #2d8790; }
.family-feed-quick-action-icon svg { width: 1.08rem; height: 1.08rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
    .family-feed-quick-actions:hover .family-feed-quick-action-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
}
.family-feed-sidebar-message { margin: .75rem 1rem 0; }
.family-feed-sidebar-message:empty { display: none; }
.family-feed-sidebar-status {
    display: grid;
    gap: .45rem;
    margin: .85rem 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    color: var(--text-muted);
    background: #fff;
}
.family-feed-sidebar-status[hidden],
.family-feed-load-more[hidden] { display: none !important; }
.family-feed-sidebar-status strong { color: var(--primary-dark); }
.family-feed-sidebar-status .button { justify-self: start; margin-top: .35rem; }
.family-feed-sidebar-posts { display: grid; gap: .8rem; padding: .85rem 1rem 1.5rem; }
.family-feed-sidebar-card {
    overflow: hidden;
    border-radius: .9rem;
    box-shadow: 0 .35rem 1rem rgba(24, 47, 39, .06);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.family-feed-sidebar-card:hover { border-color: rgba(42, 101, 82, .45); box-shadow: 0 .55rem 1.25rem rgba(24, 47, 39, .1); transform: translateY(-1px); }
.family-feed-sidebar-card:focus-visible { outline: 3px solid rgba(56, 116, 207, .35); outline-offset: 2px; }
.family-feed-sidebar-card .social-post-header { align-items: flex-start; padding: .85rem .85rem .6rem; }
.family-feed-sidebar-card .social-avatar { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; font-size: .7rem; }
.family-feed-sidebar-card .social-context-badge { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.family-feed-sidebar-card .social-post-copy { padding: .2rem .85rem .85rem; }
.family-feed-sidebar-card .social-post-copy h3 { margin: 0 0 .45rem; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.3; }
.family-feed-sidebar-card .discussion-post-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .94rem; line-height: 1.52; }
.family-feed-sidebar-card .reply-context { margin: 0 0 .55rem; }
.family-feed-sidebar-card .social-media-grid img,
.family-feed-sidebar-card .social-media-grid video { max-height: 15rem; }
.family-feed-comment-previews { display: grid; gap: .6rem; padding: .7rem .85rem; border-top: 1px solid var(--border); background: #fbfcfa; }
.family-feed-view-comments { justify-self: start; padding: 0; border: 0; color: var(--primary); background: transparent; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.family-feed-comment-preview { display: flex; align-items: flex-start; gap: .5rem; }
.family-feed-comment-avatar { width: 1.85rem !important; height: 1.85rem !important; flex-basis: 1.85rem !important; font-size: .58rem !important; }
.family-feed-comment-bubble { min-width: 0; flex: 1; padding: .5rem .65rem; border-radius: .75rem; background: #edf3ef; }
.family-feed-comment-bubble strong { display: block; color: var(--primary-dark); font-size: .8rem; }
.family-feed-comment-bubble p { margin: .12rem 0; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.4; }
.family-feed-comment-bubble time { color: var(--text-muted); font-size: .7rem; }
.family-feed-social-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); background: #fff; }
.family-feed-social-actions.has-more-actions { grid-template-columns: minmax(0,.95fr) minmax(0,1.12fr) minmax(0,.93fr) 3.25rem; }
.family-feed-social-action {
    min-width: 0;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .48rem .25rem;
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}
.family-feed-social-action:last-child { border-right: 0; }
.family-feed-social-action:hover,
.family-feed-social-action:focus-visible { color: var(--primary); background: var(--primary-soft); }
.family-feed-social-action.is-active { color: #a83d60; background: #fff1f5; }
.family-feed-social-action:disabled { opacity: .55; cursor: wait; }
.family-feed-action-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.family-feed-action-count { min-width: 1rem; padding: .05rem .25rem; border-radius: 999px; color: inherit; background: rgba(27, 67, 54, .09); font-size: .68rem; }
.family-feed-thread-posts { min-height: 0; flex: 0 0 auto; overflow: visible; display: grid; align-content: start; gap: .75rem; padding: 1rem 1rem 1.4rem; }
.family-feed-opened-card { width: 100%; }
.family-feed-opened-card .social-post-header { align-items: flex-start; padding: .9rem .9rem .6rem; }
.family-feed-opened-card .social-avatar { width: 2.4rem; height: 2.4rem; flex-basis: 2.4rem; font-size: .72rem; }
.family-feed-opened-card .social-context-badge { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.family-feed-opened-card .social-post-copy { padding: .25rem .9rem .9rem; }
.family-feed-opened-card .social-post-copy h3 { margin: 0 0 .45rem; font-family: var(--font-body); font-size: 1.08rem; line-height: 1.3; }
.family-feed-opened-comments { display: grid; gap: .65rem; padding: .8rem .85rem; border-top: 1px solid var(--border); background: #fbfcfa; }
.family-feed-opened-comment .family-feed-comment-bubble { padding: .58rem .7rem; }
.family-feed-comment-context { display: block; margin-top: .05rem; color: var(--text-muted); font-size: .7rem; }
.family-feed-opened-comment .social-media-grid { margin: .45rem 0; overflow: hidden; border-radius: .65rem; }
.family-feed-thread-message { overflow: hidden; border: 1px solid var(--border); border-radius: .9rem; background: #fff; box-shadow: 0 .3rem .9rem rgba(24, 47, 39, .05); }
.family-feed-thread-message.is-opening-post { border-color: rgba(42, 101, 82, .34); }
.family-feed-thread-message-header { display: flex; align-items: center; gap: .65rem; padding: .75rem .8rem .45rem; }
.family-feed-thread-message-header .social-avatar { width: 2.15rem; height: 2.15rem; flex-basis: 2.15rem; font-size: .66rem; }
.family-feed-thread-message-header div { display: grid; min-width: 0; }
.family-feed-thread-message-header strong { color: var(--primary-dark); font-size: .88rem; }
.family-feed-thread-message-header time { color: var(--text-muted); font-size: .74rem; }
.family-feed-thread-message > .discussion-post-body { padding: .35rem .8rem .85rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.5; }
.family-feed-thread-message .social-media-grid img,
.family-feed-thread-message .social-media-grid video { max-height: 17rem; }
.family-feed-reply-form { width: 100%; min-width: 0; flex: 0 0 auto; display: grid; gap: .55rem; padding: .85rem 1rem max(1rem, env(safe-area-inset-bottom)); box-sizing: border-box; border-top: 1px solid var(--border); background: rgba(255,255,255,.98); }
.family-feed-reply-form > label:first-child { color: var(--primary-dark); font-weight: 850; }
.family-feed-reply-form textarea { width: 100%; min-height: 5.5rem; margin: 0; padding: .75rem .85rem; box-sizing: border-box; }
.family-feed-reply-media { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .6rem; color: var(--text-muted); font-size: .78rem; font-weight: 750; }
.family-feed-reply-media input { width: min(100%, 11.5rem); min-width: 0; font-size: .72rem; }
.family-feed-reply-form .form-message:empty { display: none; }
.family-feed-reply-form .button { width: auto; justify-self: end; }
.family-feed-sidebar-empty { display: grid; justify-items: center; padding: 1.4rem 1rem; color: var(--text-muted); text-align: center; }
.family-feed-sidebar-empty strong { color: var(--primary-dark); font-size: 1.05rem; }
.family-feed-sidebar-empty p { margin: .35rem 0 0; }
.family-feed-load-more { width: calc(100% - 2rem); margin: 0 1rem 1.5rem; }
.family-feed-toggle-button {
    position: fixed;
    top: 7rem;
    right: 25rem;
    z-index: 19;
    width: 2.75rem;
    height: 3rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 1rem 0 0 1rem;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 .6rem 1.4rem rgba(24, 47, 39, .2);
    cursor: pointer;
    transition: right .22s ease, background .16s ease;
}
.family-feed-toggle-button:hover,
.family-feed-toggle-button:focus-visible { background: var(--primary-dark); }
.family-feed-forced-expanded .family-feed-toggle-button { display: none; }
.family-feed-toggle-button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.family-feed-expanded .family-feed-toggle-button svg,
.family-feed-unset .family-feed-toggle-button svg { transform: rotate(180deg); }
.family-feed-collapsed .family-feed-toggle-button { right: 0; }
.family-feed-backdrop { display: none; }
.family-feed-composer-dialog { width: min(48rem, calc(100% - 2rem)); }
.family-feed-composer-dialog .form-message:empty { display: none; }

/* The event page already has an event-specific feed, so the family feed opens as an overlay. */
.event-details-page .site-workspace.has-family-feed { grid-template-columns: minmax(0, 1fr); }
.event-details-page .family-feed-sidebar {
    width: min(25rem, calc(100vw - 1rem));
    position: fixed;
    right: 0;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
}
.event-details-page .family-feed-expanded .family-feed-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}
.event-details-page .family-feed-collapsed .family-feed-toggle-button { right: 0; }

@media (max-width: 68rem) {
    .site-workspace.has-family-feed,
    .site-workspace.has-family-feed.family-feed-expanded,
    .site-workspace.has-family-feed.family-feed-unset { grid-template-columns: minmax(0, 1fr); }
    .family-feed-sidebar,
    .family-feed-unset .family-feed-sidebar {
        width: min(26rem, calc(100vw - .75rem));
        height: calc(100vh - 4.25rem);
        position: fixed;
        top: 4.25rem;
        right: 0;
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
    }
    .family-feed-expanded .family-feed-sidebar {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    .site-workspace.family-feed-forced-expanded .family-feed-sidebar {
        width: 100%;
        height: min(42rem, 75vh);
        min-height: 28rem;
        position: relative;
        top: auto;
        right: auto;
        grid-column: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
        border-top: 1px solid var(--border);
        border-left: 0;
        box-shadow: 0 -.35rem 1.25rem rgba(24, 47, 39, .06);
    }
    .site-workspace.family-feed-forced-expanded .family-feed-backdrop { display: none; }
    .family-feed-expanded .family-feed-toggle-button,
    .family-feed-unset .family-feed-toggle-button { right: min(26rem, calc(100vw - .75rem)); }
    .family-feed-collapsed .family-feed-toggle-button { right: 0; }
    .family-feed-backdrop {
        position: fixed;
        inset: 4.25rem 0 0;
        z-index: 17;
        display: block;
        background: rgba(10, 25, 20, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    .family-feed-expanded .family-feed-backdrop { opacity: 1; visibility: visible; }
    html.family-feed-drawer-open,
    html.family-feed-drawer-open body { overflow: hidden; }
}

@media (max-width: 34rem) {
    .family-feed-toggle-button { top: 5.25rem; }
    .family-feed-sidebar-header { padding: .85rem; }
    .family-feed-quick-actions { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .family-feed-sidebar-posts { padding-inline: .75rem; }
    .family-feed-sidebar-message,
    .family-feed-sidebar-status { margin-inline: .75rem; }
    .family-feed-load-more { width: calc(100% - 1.5rem); margin-inline: .75rem; }
    .family-feed-composer-dialog { width: calc(100% - 1rem); }
}

/* Recipe book */
.recipe-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recipe-toolbar > div:first-child { display: grid; gap: .2rem; }
.recipe-toolbar > div:first-child strong { font-size: 1.12rem; }
.recipe-toolbar > div:first-child span { color: var(--text-muted); }
.recipe-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap: 1rem; margin-top: 1rem; }
.recipe-card { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1.05rem; background: #fff; box-shadow: 0 .55rem 1.45rem rgba(24,47,39,.06); }
.recipe-card.is-archived { opacity: .78; }
.recipe-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.recipe-card h2 { margin: .15rem 0; font-size: 1.65rem; }
.recipe-card header span { color: var(--text-muted); }
.recipe-description { color: var(--text-muted); line-height: 1.55; }
.recipe-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 .8rem; }
.recipe-facts span { padding: .45rem .65rem; border-radius: .55rem; background: var(--primary-soft); }
.recipe-details { margin-top: auto; border-block: 1px solid var(--border); }
.recipe-details > summary { padding: .8rem 0; color: var(--primary-dark); font-weight: 850; cursor: pointer; }
.recipe-columns { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 1.5rem; padding: .2rem 0 1rem; }
.recipe-columns h3 { margin-top: 0; }
.recipe-columns li { margin-bottom: .55rem; line-height: 1.5; }
.recipe-source-link { display: inline-flex; margin-top: .85rem; font-weight: 800; }
.recipe-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.recipe-editor-dialog { width: min(72rem,calc(100% - 2rem)); }
.recipe-lines-storage { display: none; }
.recipe-line-editor { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-muted); }
.recipe-line-editor h3 { margin: 0 0 .75rem; font-family: var(--font-body); font-size: 1rem; }
.recipe-line-items { display: grid; gap: .55rem; margin-bottom: .75rem; }
.recipe-line-row { display: grid; grid-template-columns: 1.75rem minmax(0,1fr) auto; align-items: center; gap: .4rem; }
.recipe-line-number { color: var(--primary-dark); font-weight: 900; text-align: center; }
.recipe-line-actions { display: flex; gap: .25rem; }
.recipe-line-move, .recipe-line-remove { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: .55rem; color: var(--primary-dark); background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.recipe-line-move:disabled { opacity: .35; cursor: default; }
.recipe-line-remove { color: #972828; }

/* Family directory */
.family-directory-groups { display: grid; gap: 1.25rem; }
.family-directory-group { overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 1.35rem rgba(24,47,39,.05); }
.family-directory-group > h2 { margin: 0; padding: .9rem 1.1rem; color: var(--primary-dark); background: var(--primary-soft); font-family: var(--font-body); font-size: 1.12rem; }
.family-directory-list { display: grid; }
.family-directory-row { display: grid; grid-template-columns: auto minmax(12rem,.7fr) minmax(18rem,1.7fr); align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-top: 1px solid var(--border); }
.family-directory-list > .family-directory-row:first-child { border-top: 0; }
.family-directory-avatar { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 900; }
.family-directory-name h3 { margin: 0; font-family: var(--font-body); font-size: 1.05rem; }
.family-directory-name span { color: var(--text-muted); font-size: .82rem; }
.family-directory-details { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem 1.25rem; margin: 0; }
.family-directory-details > div { min-width: 8rem; }
.family-directory-details dt { color: var(--text-muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.family-directory-details dd { margin: .14rem 0 0; }
.family-directory-details dd > span { margin-right: .5rem; }
.directory-directions-link { font-weight: 800; white-space: nowrap; }
.family-directory-private { margin: 0; color: var(--text-muted); font-size: .9rem; }
@media (max-width: 46rem) {
    .social-feed, .discussion-thread-list { width: 100%; }
    .social-context-badge { display: none; }
    .social-post-footer .button-danger { margin-left: 0; }
    .recipe-toolbar, .discussion-subscription-panel { align-items: stretch; flex-direction: column; }
    .discussion-subscription-panel > .button { width: 100%; margin-left: 0; }
    .recipe-columns { grid-template-columns: 1fr; }
    .recipe-line-row { grid-template-columns: 1.5rem minmax(0,1fr); }
    .recipe-line-actions { grid-column: 2; }
    .family-directory-row { grid-template-columns: auto minmax(0,1fr); align-items: start; }
    .family-directory-details, .family-directory-private { grid-column: 1 / -1; justify-content: flex-start; padding-left: 3.8rem; }
}
.home-dashboard-next strong { font-size: 1.15rem; }
.home-dashboard-next span { margin-top: .2rem; font-size: .88rem; }
.home-dashboard-section { margin: 0; }
.home-upcoming-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.home-upcoming-item { min-width: 0; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--border); border-left: .35rem solid var(--primary); border-radius: .85rem; background: #fff; }
.home-upcoming-party { border-left-color: #a85820; }
.home-upcoming-calendar { border-left-color: #3d6fa8; }
.home-upcoming-birthday { border-left-color: #9b4f78; }
.home-upcoming-date { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; align-content: center; border-radius: .75rem; color: var(--primary-dark); background: var(--primary-soft); }
.home-upcoming-date span { font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.home-upcoming-date strong { font-size: 1.3rem; line-height: 1; }
.home-upcoming-item h3 { margin: .1rem 0; font-size: 1.05rem; }
.home-upcoming-item p { margin: 0; color: var(--text-muted); font-size: .86rem; }
.home-upcoming-type { color: var(--primary); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 76rem) {
    .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-details-layout { grid-template-columns: 1fr; padding-right: 0; }
    .event-discussion-sidebar { position: static; }
    .event-details-page .event-discussion-sidebar .event-visual-section { margin-inline: 1rem; }
    .inline-lodging-columns { grid-template-columns: 1fr; }
    .home-dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
    .home-dashboard-next { grid-column: 1 / -1; }
    .home-upcoming-list { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
    .admin-metric-grid { grid-template-columns: 1fr; }
    .event-list-filters { align-items: stretch; }
    .event-type-filter-list { display: grid; grid-template-columns: 1fr; }
    .event-type-filter-list label { justify-content: center; }
    .event-card-actions .button { flex: 1 1 8rem; }
    .location-skeleton-row { grid-template-columns: 1fr; }
    .location-skeleton-row span:nth-child(n+2) { display: none; }
    .event-details-page .event-discussion-sidebar .event-visual-section { margin-inline: .625rem; }
    .family-directory-details > div { grid-template-columns: 1fr; gap: .2rem; }
    .location-admin-layout { grid-template-columns: 1fr; }
    .home-dashboard-metrics { grid-template-columns: 1fr; }
    .home-dashboard-next { grid-column: auto; }
    .home-upcoming-item { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .home-upcoming-item .button { grid-column: 1 / -1; justify-content: center; }
}

/* Home quick-action dashboard and family-facing profiles. */
.home-page .family-feed-quick-actions { display: none !important; }
.home-quick-dashboard { display: grid; gap: 1.15rem; padding-bottom: 1rem; }
.home-create-section { padding-top: .35rem; }
.home-create-section .section-heading-row { margin-bottom: .85rem; }
.home-create-section h1 { margin: 0; font-size: clamp(1.85rem, 3vw, 2.7rem); }
.home-create-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .85rem; }
.home-create-card { min-width: 0; min-height: 9.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .35rem; padding: 1rem; border: 0; border-radius: 1rem; color: #fff; text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 .65rem 1.4rem rgba(24,47,39,.13); transition: transform .18s ease, box-shadow .18s ease; }
.home-create-card:hover, .home-create-card:focus-visible { color: #fff; transform: translateY(-3px); box-shadow: 0 .9rem 1.8rem rgba(24,47,39,.2); }
.home-create-card strong { font-size: 1.08rem; }
.home-create-card small { color: rgba(255,255,255,.9); line-height: 1.35; }
.home-create-icon { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; margin-bottom: auto; border-radius: .75rem; background: rgba(255,255,255,.18); }
.home-create-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-create-update { background: #286653; }
.home-create-event { background: #3d73ad; }
.home-create-message { background: #6f55a5; }
.home-create-recipe { background: linear-gradient(135deg,#b56a2d,#874318); }

/* Recipe Book 2.0 */
.recipe-library-heading,.recipe-editor-heading { align-items:flex-end; }
.recipe-library-heading + .form-message,.recipe-editor-heading + .form-message { margin-inline:clamp(.75rem,1.5vw,1.5rem); }
.recipe-view-tabs { display:flex; gap:.35rem; overflow-x:auto; padding:.35rem; margin:0 clamp(.75rem,1.5vw,1.5rem) 1rem; border:1px solid var(--border); border-radius:1rem; background:rgba(255,255,255,.72); scrollbar-width:thin; }
.recipe-view-tabs a { flex:0 0 auto; padding:.7rem .9rem; border-radius:.72rem; color:var(--text-muted); font-weight:800; text-decoration:none; }
.recipe-view-tabs a:hover,.recipe-view-tabs a:focus-visible { color:var(--primary-dark); background:var(--primary-soft); }
.recipe-view-tabs a.is-active { color:#fff; background:var(--primary); box-shadow:0 .35rem .9rem rgba(38,94,77,.18); }
.recipe-library-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1rem; margin-inline:clamp(.75rem,1.5vw,1.5rem); }
.recipe-search { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.55rem; min-width:0; }
.recipe-search .text-input { width:100%; }
.form-field.compact { margin:0; min-width:11rem; }
.recipe-library-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); margin-inline:clamp(.75rem,1.5vw,1.5rem); }
.recipe-library-card { min-width:0; overflow:visible; border:1px solid var(--border); border-radius:1.15rem; background:#fff; box-shadow:0 .8rem 2rem rgba(28,54,46,.08); transition:transform .18s ease,box-shadow .18s ease; }
.recipe-library-card:hover { transform:translateY(-2px); box-shadow:0 1rem 2.5rem rgba(28,54,46,.13); }
.recipe-library-card.is-archived { opacity:.72; }
.recipe-card-photo { position:relative; display:block; overflow:hidden; aspect-ratio:16/10; border-radius:1.1rem 1.1rem 0 0; background:var(--primary-soft); }
.recipe-card-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .25s ease; }
.recipe-library-card:hover .recipe-card-photo img { transform:scale(1.025); }
.recipe-visibility-badge { display:inline-flex; align-items:center; width:max-content; padding:.35rem .58rem; border:1px solid rgba(43,88,73,.16); border-radius:99rem; background:rgba(255,255,255,.92); color:var(--primary-dark); font-size:.73rem; font-weight:900; letter-spacing:.045em; text-transform:uppercase; }
.recipe-card-photo>.recipe-visibility-badge { position:absolute; left:.75rem; bottom:.7rem; box-shadow:0 .25rem .75rem rgba(0,0,0,.1); }
.recipe-card-body { display:grid; gap:.8rem; padding:1rem; }
.recipe-card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.recipe-card-title-row h2 { margin:.12rem 0 0; font-size:1.35rem; line-height:1.2; }
.recipe-card-title-row h2 a { color:var(--text); text-decoration:none; }
.recipe-card-menu { position:relative; flex:0 0 auto; }
.recipe-card-menu>summary { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; color:var(--primary-dark); cursor:pointer; font-size:1.3rem; list-style:none; }
.recipe-card-menu>summary::-webkit-details-marker { display:none; }
.recipe-card-menu>summary:hover { background:var(--primary-soft); }
.recipe-card-menu[open] { z-index:30; }
.recipe-card-menu .action-menu-panel { position:absolute; top:calc(100% + .3rem); right:0; left:auto; z-index:30; min-width:12rem; display:grid; padding:.35rem; border:1px solid var(--border); border-radius:.75rem; background:#fff; box-shadow:0 .8rem 2rem rgba(22,48,37,.17); }
.recipe-card-menu .action-menu-panel a,.recipe-card-menu .action-menu-panel input[type=submit] { width:100%; display:block; border:0; border-radius:.5rem; padding:.7rem .85rem; color:var(--text); background:transparent; text-align:left; text-decoration:none; font:inherit; font-weight:750; white-space:nowrap; cursor:pointer; }
.recipe-card-menu .action-menu-panel a:hover,.recipe-card-menu .action-menu-panel input[type=submit]:hover { background:var(--primary-soft); }
.recipe-card-menu .action-menu-panel .danger-link { color:#a42626; }
.recipe-card-description { min-height:3em; margin:0; color:var(--text-muted); line-height:1.5; }
.recipe-card-facts { display:flex; flex-wrap:wrap; gap:.35rem; }
.recipe-card-facts span { padding:.33rem .5rem; border-radius:.48rem; background:var(--surface-muted); color:var(--text-muted); font-size:.8rem; font-weight:700; }
.recipe-card-footer { display:flex; justify-content:space-between; gap:.5rem; padding-top:.7rem; border-top:1px solid var(--border); color:var(--text-muted); font-size:.82rem; }
.recipe-rating { color:#8a4d18; font-weight:850; }
.recipe-empty-icon { margin-bottom:.5rem; font-size:2.3rem; }
.recipe-empty { margin-inline:clamp(.75rem,1.5vw,1.5rem); }

.recipe-editor-heading { max-width:none; }
.recipe-step-nav { position:sticky; top:calc(var(--header-height,4.5rem) + .5rem); z-index:8; display:flex; justify-content:center; gap:.35rem; width:max-content; max-width:100%; margin:0 auto 1rem; padding:.35rem; border:1px solid var(--border); border-radius:99rem; background:rgba(255,255,255,.94); box-shadow:0 .45rem 1.4rem rgba(28,54,46,.09); overflow-x:auto; }
.recipe-step-nav a { flex:0 0 auto; padding:.6rem .8rem; border-radius:99rem; color:var(--primary-dark); font-size:.82rem; font-weight:850; text-decoration:none; }
.recipe-step-nav a:hover,.recipe-step-nav a:focus-visible { background:var(--primary-soft); }
.recipe-editor-section { max-width:none; margin:0 clamp(.75rem,1.5vw,1.5rem) 1rem; padding:clamp(1.1rem,2.5vw,2rem); scroll-margin-top:9rem; }
.recipe-section-heading { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.recipe-section-heading>span { width:2.6rem; height:2.6rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.8rem; color:#fff; background:var(--primary); font-weight:900; }
.recipe-section-heading h2,.recipe-section-heading p { margin:0; }
.recipe-title-input { min-height:3.5rem; font-family:var(--font-heading); font-size:1.35rem; }
.recipe-component-items { display:grid; gap:1rem; }
.recipe-component-card { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:1rem; background:var(--surface-muted); }
.recipe-component-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.recipe-component-name-field { flex:1 1 24rem; margin:0; }
.recipe-component-number { min-height:1em; color:var(--primary); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.recipe-component-actions { display:flex; align-items:center; gap:.35rem; }
.recipe-component-actions button { min-width:2.4rem; height:2.4rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:.55rem; color:var(--primary-dark); background:#fff; font:inherit; font-weight:800; cursor:pointer; }
.recipe-component-actions button:disabled { opacity:.35; cursor:default; }
.recipe-component-actions .danger-link { color:#972828; }
.recipe-component-add-row { display:flex; justify-content:flex-start; margin-top:1rem; }
.recipe-lines-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.recipe-component-card .recipe-line-editor { background:#fff; }
.recipe-component-card .recipe-line-editor h4 { margin:0 0 .75rem; font-family:var(--font-body); font-size:1rem; }
.recipe-line-row { grid-template-columns:1.2rem 1.55rem minmax(0,1fr) auto; }
.recipe-line-drag { padding:0; border:0; color:var(--text-muted); background:transparent; cursor:grab; font:inherit; letter-spacing:-.2rem; }
.recipe-line-row.is-dragging { opacity:.55; }
.recipe-detail-grid .recipe-tags-field { grid-column:span 2; }
.recipe-photo-editor { display:grid; grid-template-columns:minmax(14rem,.7fr) minmax(18rem,1.3fr); gap:1.25rem; margin:1.25rem 0; padding:1rem; border-radius:.9rem; background:var(--surface-muted); }
.recipe-photo-editor h3,.recipe-photo-editor p { margin-top:0; }
.recipe-photo-preview { display:block; width:min(100%,24rem); aspect-ratio:16/10; object-fit:cover; margin:.75rem 0; border-radius:.75rem; }
.recipe-visibility-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.recipe-visibility-options>label { display:flex; align-items:flex-start; gap:.65rem; padding:1rem; border:1px solid var(--border); border-radius:.9rem; cursor:pointer; }
.recipe-visibility-options>label:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary); }
.recipe-visibility-options input { margin-top:.23rem; }
.recipe-audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.recipe-audience-grid>section,.recipe-public-confirmation { padding:1rem; border:1px solid var(--border); border-radius:.9rem; background:var(--surface-muted); }
.recipe-audience-grid h3,.recipe-audience-grid p { margin-top:0; }
.recipe-choice-list { max-height:18rem; overflow:auto; margin:0; padding:.25rem; list-style:none; }
.recipe-choice-list li { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; border-bottom:1px solid var(--border); }
.recipe-choice-list li:last-child { border:0; }
.recipe-choice-list li>input { margin:0 .55rem 0 .35rem; }
.recipe-choice-list label { display:block; min-width:0; padding:.62rem .35rem .62rem 0; }
.recipe-public-confirmation { margin-top:1rem; border-color:#d7b77f; background:#fff8e9; }
.recipe-save-bar { position:sticky; bottom:.65rem; z-index:9; display:flex; align-items:center; justify-content:flex-end; gap:1rem; margin:1rem clamp(.75rem,1.5vw,1.5rem); padding:.85rem 1rem; border:1px solid var(--border); border-radius:1rem; background:rgba(255,255,255,.96); box-shadow:0 .8rem 2.5rem rgba(28,54,46,.15); }
.recipe-save-bar .page-actions { flex-wrap:nowrap; width:auto; margin:0; }
.recipe-save-bar .page-actions .button { width:auto; white-space:nowrap; }

.public-recipe-page { min-height:100vh; margin:0; color:var(--text); background:linear-gradient(180deg,#f5f2e9,#f8faf7 36rem); }
.public-recipe-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:78rem; margin:auto; padding:1rem clamp(1rem,4vw,2rem); }
.public-recipe-header nav { display:flex; gap:.7rem; }
.public-recipe-brand { display:flex; align-items:center; gap:.6rem; color:var(--text); font-weight:900; text-decoration:none; }
.public-recipe-brand>span { width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius:.72rem; color:#fff; background:var(--primary); }
.public-recipe-main { width:min(78rem,calc(100% - 2rem)); margin:0 auto 4rem; }
.recipe-detail-shell { display:grid; gap:1rem; }
.recipe-detail-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr); overflow:hidden; border:1px solid var(--border); border-radius:1.35rem; background:#fff; box-shadow:0 1rem 3rem rgba(28,54,46,.1); }
.recipe-detail-copy { display:grid; align-content:center; gap:1rem; padding:clamp(1.4rem,4vw,3.5rem); }
.recipe-detail-copy h1 { margin:0; font-size:clamp(2.2rem,5vw,4.5rem); line-height:1; }
.recipe-detail-description { margin:0; color:var(--text-muted); font-size:1.08rem; line-height:1.65; }
.recipe-detail-labels,.recipe-detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.recipe-tag { padding:.35rem .55rem; border-radius:99rem; background:#f6eadc; color:#854716; font-size:.75rem; font-weight:800; }
.recipe-detail-byline { color:var(--text-muted); }
.recipe-detail-photo { position:relative; min-height:25rem; background:var(--primary-soft); }
.recipe-detail-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.recipe-detail-photo small { position:absolute; right:.7rem; bottom:.7rem; padding:.3rem .5rem; border-radius:.4rem; color:#fff; background:rgba(0,0,0,.65); }
.recipe-detail-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.65rem; }
.recipe-detail-facts>div { display:grid; gap:.2rem; padding:1rem; border:1px solid var(--border); border-radius:.85rem; background:#fff; }
.recipe-detail-facts span { color:var(--text-muted); font-size:.76rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.recipe-detail-columns { display:grid; grid-template-columns:minmax(17rem,.78fr) minmax(0,1.22fr); gap:1rem; align-items:start; }
.recipe-detail-section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.recipe-detail-section-heading h2,.recipe-detail-section-heading p { margin-top:0; }
.recipe-scale-control { display:flex; align-items:center; gap:.4rem; font-weight:800; }
.recipe-scale-control select { padding:.35rem; border:1px solid var(--border); border-radius:.45rem; }
.recipe-ingredient-list,.recipe-instruction-list { display:grid; gap:.2rem; margin:0; padding:0; list-style:none; }
.recipe-ingredient-list label { display:flex; align-items:flex-start; gap:.65rem; padding:.75rem 0; border-bottom:1px solid var(--border); line-height:1.5; }
.recipe-ingredient-list input { margin-top:.28rem; accent-color:var(--primary); }
.recipe-ingredient-list input:checked+span { color:var(--text-muted); text-decoration:line-through; }
.recipe-instruction-list { counter-reset:recipe-step; gap:1rem; }
.recipe-instruction-list li { counter-increment:recipe-step; display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.8rem; line-height:1.65; }
.recipe-instruction-list li:before { content:counter(recipe-step); width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:.75rem; color:#fff; background:var(--primary); font-weight:900; }
.recipe-component-group+.recipe-component-group { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.recipe-component-group h3 { margin:0 0 .65rem; color:var(--primary-dark); font-family:var(--font-body); font-size:1.05rem; }
.recipe-notes-panel { border-left:.35rem solid #b6652a; background:#fffaf2; }
.recipe-source-panel { display:flex; justify-content:center; gap:.45rem; color:var(--text-muted); }
.recipe-source-panel a { font-weight:850; }
.recipe-community-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.recipe-community-form { display:grid; gap:.75rem; margin-bottom:1rem; padding:1rem; border-radius:.9rem; background:var(--surface-muted); }
.recipe-review,.recipe-comment { padding:1rem 0; border-top:1px solid var(--border); }
.recipe-review header,.recipe-comment header { display:flex; justify-content:space-between; gap:.7rem; }
.recipe-review header span { color:#a25a1f; letter-spacing:.08em; }
.recipe-comment time { color:var(--text-muted); font-size:.8rem; }
.recipe-comment.is-reply { margin-left:2rem; padding-left:1rem; border-left:.2rem solid var(--primary-soft); }
.recipe-comment-actions { display:flex; gap:.75rem; }
.text-button { padding:0; border:0; color:var(--primary-dark); background:transparent; font:inherit; font-weight:800; cursor:pointer; text-decoration:underline; }
.recipe-signin-callout { padding:1rem; border-radius:.8rem; background:var(--primary-soft); }
.recipe-report-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1rem; background:rgba(16,37,30,.58); }
.recipe-report-dialog { width:min(32rem,100%); max-height:calc(100vh - 2rem); overflow:auto; }
.recipe-report-list { display:grid; gap:1rem; }
.recipe-report-card header { display:flex; justify-content:space-between; gap:1rem; }
.recipe-report-card h2 { margin:.4rem 0 .15rem; }
.recipe-report-card header p,.recipe-report-card time { color:var(--text-muted); }
.recipe-report-card dl { display:grid; gap:.7rem; }
.recipe-report-card dl>div { padding:.8rem; border-radius:.7rem; background:var(--surface-muted); }
.recipe-report-card dt { margin-bottom:.2rem; color:var(--text-muted); font-size:.75rem; font-weight:850; text-transform:uppercase; }
.recipe-report-card dd { margin:0; white-space:pre-wrap; }
.recipe-report-card footer { display:flex; gap:.5rem; }

@media (max-width: 760px) {
 .recipe-library-tools,.recipe-lines-grid,.recipe-photo-editor,.recipe-audience-grid,.recipe-detail-hero,.recipe-detail-columns,.recipe-community-grid { grid-template-columns:1fr; }
 .recipe-library-tools .form-field.compact { width:100%; }
 .recipe-visibility-options { grid-template-columns:1fr; }
 .recipe-detail-grid .recipe-tags-field { grid-column:auto; }
 .recipe-step-nav { justify-content:flex-start; width:100%; border-radius:.85rem; }
 .recipe-save-bar { align-items:center; flex-direction:row; }
 .recipe-save-bar .page-actions { display:flex; }
 .recipe-save-bar .page-actions .button { width:auto; }
 .recipe-detail-photo { min-height:17rem; grid-row:1; }
 .recipe-detail-copy { padding:1.35rem; }
 .recipe-detail-copy h1 { font-size:2.35rem; }
 .recipe-source-panel { align-items:center; flex-direction:column; }
 .public-recipe-main { width:min(100% - 1rem,78rem); }
 .public-recipe-header { padding:.75rem; }
 .recipe-line-row { grid-template-columns:1rem 1.25rem minmax(0,1fr); }
 .recipe-line-actions { grid-column:3; }
 .recipe-component-header { align-items:stretch; flex-direction:column; }
 .recipe-component-actions { justify-content:flex-end; }
}
@media (max-width: 42rem) {
 .recipe-library-heading,.recipe-editor-heading { align-items:stretch; }
}
@media (prefers-reduced-motion: reduce) { .recipe-library-card,.recipe-card-photo img { transition:none; } .recipe-library-card:hover,.recipe-library-card:hover .recipe-card-photo img { transform:none; } }
@media print { .public-recipe-header,.recipe-detail-actions,.recipe-community-grid,.recipe-source-panel,.recipe-report-overlay,.recipe-scale-control { display:none!important; } .public-recipe-page { background:#fff; } .public-recipe-main { width:100%; margin:0; } .recipe-detail-hero,.panel { box-shadow:none!important; } .recipe-detail-hero { grid-template-columns:1fr 16rem; } .recipe-detail-photo { min-height:12rem; } }
.home-create-invite { background: linear-gradient(135deg,#9f527b,#733553); }
.home-create-reminder { background: linear-gradient(135deg,#746eb7,#514b8c); }
.home-create-media { background: #2d8790; }
.home-dashboard-primary-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(18rem,.65fr); gap: 1rem; align-items: stretch; }
.home-dashboard-primary-grid > .panel { margin: 0; }
.home-mini-calendar { position: relative; z-index: 2; min-width: 0; overflow: visible; }
.home-calendar-weekdays, .home-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.home-calendar-weekdays { margin-top: .85rem; color: var(--text-muted); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.home-calendar-grid { margin-top: .35rem; overflow: visible; border: 1px solid var(--border); border-radius: .9rem; }
.home-calendar-day { position: relative; min-width: 0; min-height: 4.4rem; padding: .35rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.home-calendar-day:hover, .home-calendar-day:focus-within { z-index: 25; }
.home-calendar-day:nth-child(7n) { border-right: 0; }
.home-calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.home-calendar-day.is-outside { color: #9aa49f; background: var(--surface-muted); }
.home-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.home-calendar-day-number { font-size: .76rem; font-weight: 850; }
.home-calendar-dots { display: flex; flex-wrap: wrap; gap: .22rem; margin-top: .35rem; }
.home-calendar-dot { --home-event-color: #3f75ae; position: relative; display: inline-flex; align-items: center; max-width: 100%; color: var(--heading); text-decoration: none; z-index: 2; }
.home-calendar-dot.reunion { --home-event-color: #2c6a56; }
.home-calendar-dot.party { --home-event-color: #ae5c23; }
.home-calendar-dot.birthday { --home-event-color: #9d4e78; }
.home-calendar-dot i { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 50%; background: var(--home-event-color); }
.home-calendar-dot span { position: absolute; left: .25rem; bottom: calc(100% + .3rem); width: max-content; max-width: 15rem; padding: .35rem .55rem; border-radius: .5rem; color: #fff; background: var(--home-event-color); font-size: .72rem; font-weight: 750; opacity: 0; pointer-events: none; transform: translateY(.25rem); transition: opacity .14s ease, transform .14s ease; z-index: 15; }
.home-calendar-dot:hover span, .home-calendar-dot:focus-visible span { opacity: 1; transform: translateY(0); }
.home-calendar-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; color: var(--text-muted); font-size: .75rem; }
.home-calendar-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.home-calendar-legend i { width: .55rem; height: .55rem; border-radius: 50%; background: #3f75ae; }
.home-calendar-legend i.reunion { background: #2c6a56; }.home-calendar-legend i.party { background: #ae5c23; }.home-calendar-legend i.birthday { background: #9d4e78; }
.home-next-event { display: flex; flex-direction: column; }
.home-next-events { min-height: 0; flex: 1; display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: .9rem; }
.home-next-event-card { min-height: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--border); border-left: .45rem solid var(--primary); border-radius: .9rem; color: var(--heading); background: linear-gradient(145deg,var(--primary-soft),#fff 62%); text-decoration: none; }
.home-next-event-card:hover, .home-next-event-card:focus-visible { border-color: var(--primary); box-shadow: 0 .5rem 1rem rgba(24,47,39,.09); transform: translateY(-1px); }
.home-next-party { border-left-color: #ae5c23; }.home-next-calendar { border-left-color: #3f75ae; }
.home-next-date { width: 3.7rem; height: 3.7rem; display: grid; place-items: center; align-content: center; border-radius: .8rem; color: #fff; background: var(--primary); }
.home-next-date small { font-size: .65rem; font-weight: 900; }.home-next-date strong { font-size: 1.4rem; line-height: 1; }
.home-next-copy { min-width: 0; display: grid; gap: .15rem; }.home-next-copy > small { color: var(--primary); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }.home-next-copy > strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }.home-next-copy > span { overflow: hidden; color: var(--text-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.home-next-arrow { font-size: 1.5rem; }
.home-dashboard-secondary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: stretch; }
.home-dashboard-secondary-grid > .panel { min-width: 0; margin: 0; }
.home-directory-preview, .home-links-panel { display: flex; flex-direction: column; }
.home-directory-people { display: grid; grid-template-columns: 1fr; gap: .35rem; max-height: 27rem; margin-top: .85rem; padding-right: .25rem; overflow-y: auto; scrollbar-gutter: stable; }
.home-directory-person { position: relative; min-width: 0; display: flex; align-items: center; gap: .25rem; padding: .15rem; border: 1px solid transparent; border-radius: .75rem; color: var(--heading); text-align: left; }
.home-directory-person:hover, .home-directory-person:focus-within { border-color: var(--border); background: var(--primary-soft); }
.home-directory-person-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: .75rem; padding: .35rem .45rem; color: inherit; text-decoration: none; }
.home-directory-person strong { max-width: 100%; overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.home-directory-avatar { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: var(--primary); font-size: .78rem; font-weight: 900; box-shadow: 0 0 0 2px #fff,0 0 0 3px var(--border); }
.home-directory-avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-directory-actions { position: relative; flex: 0 0 auto; }
.home-directory-actions > summary { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--primary); cursor: pointer; font-size: 1.3rem; font-weight: 900; list-style: none; }
.home-directory-actions > summary::-webkit-details-marker { display: none; }
.home-directory-actions > summary:hover, .home-directory-actions > summary:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px var(--border); outline: none; }
.home-directory-action-menu { position: absolute; z-index: 30; top: calc(100% + .25rem); right: 0; min-width: 13rem; display: grid; padding: .35rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; box-shadow: 0 .8rem 2rem rgba(22,48,37,.17); }
.home-directory-action-menu a { padding: .58rem .65rem; border-radius: .5rem; color: var(--heading); font-size: .82rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.home-directory-action-menu a:hover, .home-directory-action-menu a:focus-visible { background: var(--primary-soft); outline: none; }
.home-directory-action-menu a.is-danger { color: var(--danger); }
.home-section-links { flex: 1; display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .85rem; }
.home-section-link { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .75rem; color: var(--heading); background: #fff; text-decoration: none; }
.home-section-link:hover, .home-section-link:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.home-section-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .65rem; color: #fff; background: var(--primary); }
.home-section-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-section-copy { min-width: 0; display: grid; gap: .1rem; }
.home-section-copy strong, .home-section-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-section-copy > span { color: var(--text-muted); font-size: .78rem; }
.home-section-arrow { color: var(--primary); font-size: 1.2rem; font-weight: 900; }

.family-facing-profile { display: grid; gap: 0; }
.family-profile-hero { overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 1.15rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(24,47,39,.08); }
.family-profile-cover { position: relative; width: 100%; aspect-ratio: 8 / 3; display: block; overflow: hidden; color: #fff; background: linear-gradient(125deg,#235845,#4c8874 55%,#e0a25a); text-decoration: none; }
.family-profile-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }.family-profile-cover-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-heading); font-size: clamp(2rem,5vw,4rem); opacity: .72; }
.family-profile-edit-label { position: absolute; right: 1rem; bottom: 1rem; padding: .45rem .7rem; border-radius: 999px; color: #fff; background: rgba(15,36,29,.75); font-size: .78rem; font-weight: 850; }
.family-profile-identity { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: end; gap: 1rem; min-height: 6.5rem; padding: 1rem 1.25rem 1.15rem; }
.family-profile-avatar-link { align-self: start; margin-top: -4.75rem; border-radius: 50%; text-decoration: none; z-index: 2; }.family-profile-avatar { width: 8rem; height: 8rem; display: grid; place-items: center; object-fit: cover; border: .4rem solid #fff; border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 .4rem 1.2rem rgba(24,47,39,.22); font-size: 1.8rem; font-weight: 900; }
.family-profile-identity h1 { margin: 0; }.family-profile-identity .eyebrow { margin-bottom: .15rem; }
.family-profile-tabs { display: flex; gap: .25rem; padding: .35rem; border: 1px solid var(--border); border-radius: .85rem; background: #fff; }
.family-profile-tab { flex: 1; min-height: 2.8rem; border: 0; border-radius: .6rem; color: var(--text-muted); background: transparent; font-weight: 850; cursor: pointer; }.family-profile-tab.is-active { color: #fff; background: var(--primary); }
.family-profile-tab-panel { margin-top: 1rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }.family-profile-tab-panel[hidden] { display: none !important; }
.family-profile-feed { width: min(100%,44rem); display: grid; gap: .85rem; margin: .85rem auto 0; }
.family-profile-feed .family-feed-sidebar-card { width: 100%; }
.family-profile-feed-status { width: min(100%,44rem); display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 4rem; margin: .75rem auto 0; color: var(--text-muted); text-align: center; }
.family-profile-feed-status[hidden], .family-profile-feed-more[hidden] { display: none !important; }
.family-profile-feed-empty { margin: 0; }
.family-profile-feed-more { margin: 1rem auto 0; }
.family-profile-contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: .8rem 0 0; }
.family-profile-contact-item { --contact-accent: #2c6a56; min-width: 0; min-height: 5.5rem; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(44,106,86,.22); border-radius: .9rem; background: linear-gradient(135deg,#edf7f1,#fff 74%); box-shadow: 0 .35rem .9rem rgba(24,47,39,.05); }
.family-profile-contact-item.contact-email { --contact-accent: #3f75ae; border-color: rgba(63,117,174,.24); background: linear-gradient(135deg,#eef4fb,#fff 74%); }
.family-profile-contact-item.contact-phone { --contact-accent: #2c6a56; }
.family-profile-contact-item.contact-address { --contact-accent: #ae5c23; border-color: rgba(174,92,35,.24); background: linear-gradient(135deg,#fff4ea,#fff 74%); }
.family-profile-contact-item.contact-birthday { --contact-accent: #9d4e78; border-color: rgba(157,78,120,.24); background: linear-gradient(135deg,#fff0f7,#fff 74%); }
.family-profile-contact-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .8rem; color: #fff; background: var(--contact-accent); box-shadow: 0 .35rem .8rem rgba(24,47,39,.12); }
.family-profile-contact-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.family-profile-contact-item > div { min-width: 0; display: grid; gap: .18rem; }
.family-profile-contact-label { color: var(--contact-accent); font-size: .7rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.family-profile-contact-item strong { overflow-wrap: anywhere; color: var(--heading); font-size: .92rem; }
.family-profile-contact-action { width: max-content; max-width: 100%; margin-top: .35rem; border-color: color-mix(in srgb,var(--contact-accent) 45%,#fff); color: var(--contact-accent); background: rgba(255,255,255,.82); }
.family-profile-contact-action:hover, .family-profile-contact-action:focus-visible { border-color: var(--contact-accent); color: #fff; background: var(--contact-accent); }
.family-profile-photo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; margin-top: .8rem; }.family-profile-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: .75rem; background: var(--surface-muted); }.family-profile-photo img { width: 100%; height: 100%; object-fit: cover; }.family-profile-photo span { position: absolute; inset: auto .35rem .35rem; overflow: hidden; padding: .25rem .4rem; border-radius: .35rem; color: #fff; background: rgba(15,36,29,.74); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.family-profile-photo span:empty { display: none; }

@media (max-width: 64rem) {
    .home-create-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-dashboard-primary-grid, .home-dashboard-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 44rem) {
    .home-create-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-create-card { min-height: 7.5rem; }
    .home-calendar-day { min-height: 3.4rem; padding: .25rem; }.home-calendar-dot i { width: .45rem; height: .45rem; flex-basis: .45rem; }
    .home-calendar-legend { display: none; }
    .home-next-event-card { grid-template-columns: auto minmax(0,1fr); }.home-next-arrow { display: none; }
    .family-profile-identity { grid-template-columns: auto minmax(0,1fr); align-items: center; }.family-profile-identity > .button { grid-column: 1 / -1; }.family-profile-avatar { width: 6.5rem; height: 6.5rem; }.family-profile-avatar-link { margin-top: -3.6rem; }
    .family-profile-contact { grid-template-columns: 1fr; }.family-profile-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Multi-rotation planning cards and profile default family. */
.profile-family-order { display: grid; gap: 1rem; }
.profile-family-order > p { margin: 0; }
.event-family-invites { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-soft); }
.event-family-invites legend { padding: 0 .25rem; font-weight: 850; }
.event-family-invites > p { margin: 0 0 .7rem; color: var(--text-muted); }
.event-family-invite-list { margin: 0; padding: 0; list-style: none; }
.event-family-invite-list li { margin: 0; }
.event-family-invite-list label { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.event-family-invite-list li:last-child label { border-bottom: 0; }
.event-family-invite-list input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--primary); }
.planning-rotation-filter { width: min(100%,25rem); margin: 0 0 1.2rem; padding: .85rem 1rem; }
.planning-rotation-filter .form-field { margin: 0; }
.rotation-add-launcher { position: relative; display: flex; align-items: center; }
.rotation-add-launcher-label { position: absolute; right: calc(100% + .45rem); padding: .38rem .6rem; border-radius: 999px; color: #fff; background: var(--primary-dark); font-size: .75rem; font-weight: 850; opacity: 0; pointer-events: none; white-space: nowrap; transform: translateX(.35rem); transition: opacity .14s ease,transform .14s ease; }
.rotation-add-launcher:hover .rotation-add-launcher-label,.rotation-add-launcher:focus-within .rotation-add-launcher-label { opacity: 1; transform: translateX(0); }
.planning-rotation-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap: 1rem; align-items: start; }
.planning-rotation-board-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 1.1rem; background: #fff; box-shadow: 0 .65rem 1.55rem rgba(24,47,39,.08); }
.planning-rotation-board-card.is-disabled { opacity: .72; }
.planning-rotation-card-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: .8rem; padding: 1rem; color: #fff; background: linear-gradient(125deg,var(--primary-dark),var(--primary)); }
.planning-rotation-card-header h2 { overflow: hidden; margin: .1rem 0; color: #fff; font-family: var(--font-body); font-size: 1.2rem; text-overflow: ellipsis; white-space: nowrap; }
.planning-rotation-card-header small { color: rgba(255,255,255,.82); }
.rotation-card-year { color: #f9d99a; font-size: .7rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.planning-rotation-card-tools { display: flex; gap: .4rem; }
.rotation-card-icon-button { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
.rotation-card-icon-button:hover,.rotation-card-icon-button:focus-visible { color: var(--primary-dark); background: #fff; }
.rotation-card-icon-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.rotation-card-icon-button.is-add span { font-size: 1.45rem; line-height: 1; transform: translateY(-.05em); }
.rotation-card-icon-button.is-delete:hover,.rotation-card-icon-button.is-delete:focus-visible { color: #a32828; }
.planning-rotation-card-empty { margin: 1rem; padding: 1rem; border: 2px dashed var(--border); border-radius: .85rem; color: var(--text-muted); text-align: center; background: var(--surface-soft); }
.planning-rotation-member-cards { display: grid; grid-template-columns: minmax(0,1fr); gap: .7rem; margin: 0; padding: 1rem; list-style: none; }
.planning-rotation-member-card { min-width: 0; display: grid; grid-template-columns: 2.7rem minmax(0,1fr); align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-soft); }
.planning-rotation-member-card.is-next { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.planning-rotation-member-card .rotation-position { width: 2.7rem; height: 2.7rem; font-size: 1rem; }
.planning-rotation-member-card strong,.planning-rotation-member-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-rotation-member-card strong { color: var(--heading); }
.planning-rotation-member-card .rotation-manage-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: .55rem; border-top: 1px solid var(--border); }
.rotation-settings-dialog,.add-rotation-member-dialog { width: min(100% - 1.5rem,46rem); }
@media (max-width: 42rem) { .planning-rotation-card-grid { grid-template-columns: 1fr; }.rotation-add-launcher-label { display: none; }.planning-rotation-member-cards { grid-template-columns: 1fr; } }
.gallery-upload-form-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; gap: 1rem; }
.gallery-upload-form-grid > .form-field { margin: 0; }
.gallery-upload-families { grid-column: 1 / -1; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-soft); }
.gallery-upload-families legend { padding: 0 .35rem; color: var(--heading); font-weight: 850; }
.gallery-upload-families .field-help { margin: 0 0 .7rem; }
.gallery-upload-family-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.gallery-upload-family-list li { min-width: 0; }
@media (max-width: 42rem) { .gallery-upload-form-grid,.gallery-upload-family-list { grid-template-columns: 1fr; } }

/* Rebuilt event editors */
.event-builder {
    width: 100%;
    margin: 0 0 6rem;
    display: grid;
    gap: 1.25rem;
}

.event-builder-card-stack {
    display: grid;
    gap: 1.25rem;
}

.event-builder-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem .25rem .5rem;
}

.event-builder-hero h1 {
    margin: .2rem 0 .45rem;
}

.event-builder-hero p:last-child {
    max-width: 44rem;
    margin-bottom: 0;
}

.event-builder-progress {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.event-builder-progress a {
    padding: .48rem .72rem;
    border: 1px solid var(--border-color, #d6ded8);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--green-900, #173b31);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.event-builder-card {
    position: relative;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #d9e1dc;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 40px rgba(25, 55, 45, .07);
    scroll-margin-top: 6rem;
}

.event-builder-card-heading {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.4rem;
}

.event-builder-card-heading h2,
.event-builder-card-heading p {
    margin: 0;
}

.event-builder-card-heading .eyebrow {
    margin-bottom: .15rem;
}

.event-builder-card-heading p:last-child:not(.eyebrow) {
    margin-top: .3rem;
    color: #64736d;
}

.event-builder-number {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: #e6f1ec;
    color: #245d4e;
    font-weight: 800;
}

.event-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem 1.15rem;
}

.event-builder-grid > .full-width {
    grid-column: 1 / -1;
}

.event-datetime-grid {
    display: grid;
    grid-template-columns: minmax(9.5rem, 1.25fr) minmax(7.5rem, .85fr) minmax(9.5rem, 1.25fr) minmax(7.5rem, .85fr) minmax(10rem, 1fr);
    align-items: start;
    gap: .75rem;
}

.event-datetime-grid .form-field > label {
    min-height: 1.25rem;
    line-height: 1.25rem;
}

.event-datetime-grid .required-marker {
    font-size: 1em;
    line-height: 1;
}

.event-datetime-grid .text-input,
.event-datetime-grid .select-input {
    height: 3.25rem;
    min-height: 3.25rem;
}

.event-title-field input {
    min-height: 3.35rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.event-type-select {
    font-weight: 750;
}

.event-all-day-choice {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    margin-top: -.4rem;
    padding: .4rem .7rem;
    border: 1px solid #dce4df;
    border-radius: .8rem;
    background: #f7faf8;
}

.event-builder-grid > .event-all-day-choice {
    grid-column: 1 / -1;
}

.no-organizer-choice {
    width: fit-content;
    padding: .55rem .75rem;
    border: 1px solid #dce4df;
    border-radius: .8rem;
    background: #f7faf8;
}

.organizer-fields[hidden] {
    display: none !important;
}

.compact-choice-field {
    padding: 1rem;
    border: 1px solid #dce4df;
    border-radius: .9rem;
    background: #fafcfb;
}

.modern-radio-list,
.modern-check-list,
.notification-choice-grid {
    list-style: none;
    padding: 0;
    margin: .7rem 0 0;
}

.modern-radio-list li,
.modern-check-list li {
    margin: .45rem 0;
}

.modern-radio-list label,
.modern-check-list label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 650;
}

.location-detail-field[hidden],
.event-feature-panel[hidden] {
    display: none !important;
}

.current-event-photo {
    display: grid;
    grid-template-columns: minmax(0, 8rem) 1fr;
    align-items: center;
    gap: .8rem;
    margin-bottom: .75rem;
}

.current-event-photo img {
    width: 8rem;
    height: 5rem;
    border-radius: .65rem;
    object-fit: cover;
}

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

.audience-editor-group {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid #dde5e0;
    border-radius: 1rem;
    background: #f9fbfa;
}

.audience-editor-group legend {
    padding: 0 .25rem;
    font-size: 1rem;
    font-weight: 800;
}

.audience-scroll-list {
    max-height: 15rem;
    overflow: auto;
    padding-right: .3rem;
}

.event-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.event-feature-tile {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 6.25rem;
    padding: 1rem;
    border: 1px solid #d9e2dc;
    border-radius: 1rem;
    background: #fbfdfc;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.event-feature-tile:hover {
    transform: translateY(-1px);
    border-color: #78a596;
}

.event-feature-tile:has(input:checked) {
    border-color: #2d6c5a;
    background: #edf7f2;
}

.event-feature-tile span,
.event-feature-tile strong,
.event-feature-tile small {
    display: block;
}

.event-feature-tile small {
    margin-top: .25rem;
    color: #67756f;
    line-height: 1.35;
}

.event-feature-panels {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.event-feature-panel {
    padding: 1.1rem;
    border: 1px solid #dce5df;
    border-radius: 1rem;
    background: #f8fbf9;
}

.event-feature-panel h3 {
    margin: 0 0 1rem;
}

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

.event-layout-sorter {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-layout-sorter li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 3.7rem;
    padding: .75rem 1rem;
    border: 1px solid #d9e2dc;
    border-radius: .85rem;
    background: #fff;
}

.event-layout-sorter li[draggable="true"] {
    cursor: grab;
}

.event-layout-sorter li.is-dragging {
    opacity: .5;
    box-shadow: 0 12px 30px rgba(20, 50, 40, .18);
}

.event-layout-sorter li.is-fixed {
    background: #edf4f0;
}

.event-layout-sorter strong,
.event-layout-sorter small {
    display: block;
}

.event-layout-sorter small {
    color: #68766f;
}

.drag-handle {
    color: #73847c;
    font-size: 1.2rem;
    letter-spacing: -.25rem;
}

.fixed-label {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #d9e9e1;
    color: #285847;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.event-builder-savebar {
    position: sticky;
    z-index: 30;
    bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #cedbd4;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 45px rgba(18, 42, 34, .2);
    backdrop-filter: blur(12px);
}

.event-builder-savebar strong,
.event-builder-savebar span {
    display: block;
}

.event-builder-savebar span {
    color: #68766f;
    font-size: .85rem;
}

.event-builder-savebar .page-actions {
    flex-wrap: nowrap;
    margin: 0;
}

.notification-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.notification-choice-grid li label {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid #dce4df;
    border-radius: .8rem;
    background: #fafcfb;
    font-weight: 700;
}

.custom-notification-builder,
.custom-notification-list {
    display: grid;
    gap: .75rem;
}

.custom-notification-row {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(10rem, .8fr) auto;
    align-items: end;
    gap: .7rem;
    max-width: 42rem;
    padding: .75rem;
    border: 1px solid #dce4df;
    border-radius: .9rem;
    background: #f8fbf9;
}

.custom-notification-row label {
    display: grid;
    gap: .35rem;
    font-weight: 750;
}

.custom-notification-row .notification-remove {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #d8dfdb;
    border-radius: .75rem;
    background: #fff;
    color: #8c332f;
    font-size: 1.35rem;
    cursor: pointer;
}

.add-notification-button {
    justify-self: start;
}

.calendar-people-group > .field-help {
    display: block;
    margin: .15rem 0 .7rem;
}

.calendar-person-picker {
    display: grid;
    gap: .5rem;
    max-height: 24rem;
    padding-right: .25rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.calendar-person-entry {
    min-width: 0;
    padding: .65rem .7rem;
    border: 1px solid #dce4df;
    border-radius: .8rem;
    background: #fff;
}

.calendar-person-entry.is-selected {
    border-color: #8bb1a4;
    background: #f2f8f5;
}

.calendar-person-choice,
.permission-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.calendar-person-choice {
    font-weight: 750;
}

.calendar-person-choice span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.calendar-person-permissions {
    display: grid;
    gap: .42rem;
    margin: .65rem 0 0 1.65rem;
    padding-top: .6rem;
    border-top: 1px solid #dce4df;
}

.calendar-person-entry:not(.is-selected) .calendar-person-permissions {
    display: none;
}

.permission-toggle span {
    font-size: .78rem;
}

.external-calendar-guests {
    margin-top: 1rem;
}

.calendar-audience-editor-grid .external-calendar-guests {
    margin-top: 0;
}

.event-builder fieldset[disabled],
.event-builder div.aspNetDisabled,
.event-builder span.aspNetDisabled {
    opacity: .62;
}

@media (max-width: 58rem) {
    .event-builder-hero,
    .event-builder-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .event-builder-progress {
        justify-content: flex-start;
    }

    .audience-editor-grid,
    .event-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 70rem) {
    .event-datetime-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "start-date end-date"
            "start-time end-time"
            "time-zone time-zone";
    }

    .event-start-date { grid-area: start-date; }
    .event-start-time { grid-area: start-time; }
    .event-end-date { grid-area: end-date; }
    .event-end-time { grid-area: end-time; }
    .event-time-zone { grid-area: time-zone; }
}

@media (max-width: 52rem) {
    .event-builder-grid,
    .meal-time-grid,
    .audience-editor-grid,
    .event-feature-grid,
    .notification-choice-grid {
        grid-template-columns: 1fr;
    }

    .event-feature-tile {
        min-height: 5.25rem;
    }
}

@media (max-width: 42rem) {
    .event-builder {
        width: 100%;
    }

    .event-builder-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .event-builder-hero {
        padding-top: .5rem;
    }

    .event-builder-card-heading {
        gap: .7rem;
        margin-bottom: 1rem;
    }

    .event-builder-number {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
    }

    .event-builder .text-input,
    .event-builder .select-input,
    .event-builder .textarea-input {
        min-width: 0;
        max-width: 100%;
        font-size: 1rem;
    }

    .audience-editor-group,
    .event-feature-panel {
        padding: .85rem;
    }

    .audience-scroll-list,
    .calendar-person-picker {
        max-height: 19rem;
    }

    .custom-notification-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: .5rem;
    }

    .event-builder-savebar .page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .event-builder-savebar .page-actions .button {
        justify-content: center;
        width: 100%;
    }

    .event-builder-savebar .page-actions .button-primary {
        grid-column: 1 / -1;
    }

    .calendar-event-builder .event-builder-savebar .page-actions .button-primary {
        grid-column: auto;
    }
}

@media (max-width: 36rem) {
    .event-datetime-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "start-date"
            "start-time"
            "end-date"
            "end-time"
            "time-zone";
    }

    .custom-notification-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .custom-notification-row > select {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .custom-notification-row .notification-remove {
        grid-column: 2;
        grid-row: 1;
    }
}

.profile-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.profile-subject-switcher { display: grid; grid-template-columns: minmax(14rem,.65fr) minmax(18rem,1.35fr); align-items: end; gap: 1rem; margin-bottom: 1rem; }
.profile-subject-switcher.profile-subject-switcher-single { grid-template-columns: 1fr; }
.profile-subject-switcher .form-message { grid-column: 1 / -1; }
.profile-birthdate-row { width: 100%; max-width: none; }
.profile-photo-upload-row { align-items: start; }
.profile-image-field .profile-image-inline { grid-template-columns: 1fr; gap: .75rem; }
.profile-image-field .profile-image-preview { width: 10rem; height: 10rem; justify-self: center; }
.profile-image-field .profile-image-controls { width: 100%; }
.profile-allergies-section { margin-top: 1.5rem !important; }
.profile-cover-preview { aspect-ratio: 8 / 3; width: 100%; display: grid; place-items: center; overflow: hidden; margin-bottom: .55rem; border: 1px solid var(--border); border-radius: .8rem; color: #fff; background: linear-gradient(125deg,#235845,#4c8874 55%,#e0a25a); }
.profile-cover-preview img { width: 100%; height: 100%; object-fit: cover; }.profile-cover-preview [hidden] { display: none !important; }.profile-cover-placeholder { font-family: var(--font-heading); font-size: 1.55rem; opacity: .8; }
.cover-image-selection-preview { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cover-image-selection-preview.is-dragging { cursor: grabbing; }
.cover-image-selection-preview:focus-visible { outline: 3px solid rgba(56,116,207,.55); outline-offset: -5px; }
.cover-image-crop-controls { margin-bottom: .55rem; }
.family-directory-profile-link { min-width: 0; display: flex; align-items: center; gap: 1rem; color: var(--heading); text-decoration: none; }.family-directory-profile-link[disabled] { pointer-events: none; }.family-directory-profile-link:hover strong { text-decoration: underline; }.family-directory-avatar img { width: 100%; height: 100%; object-fit: cover; }.family-directory-name { min-width: 0; display: grid; }.family-directory-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.family-directory-name small { color: var(--text-muted); font-size: .78rem; }
.family-feed-post-menu { position: relative; min-width: 0; height: 100%; display: flex; align-items: stretch; }.family-feed-reply-menu { position: absolute; right: .35rem; bottom: .25rem; }
.family-feed-more-button { width: 100%; min-height: 2.65rem; display: grid; place-items: center; padding: 0; border: 0; color: var(--text-muted); background: transparent; font-size: 1.35rem; font-weight: 900; cursor: pointer; }.family-feed-reply-menu .family-feed-more-button { width: 2rem; min-height: 1.7rem; font-size: .85rem; letter-spacing: .08em; }
.family-feed-more-button:hover, .family-feed-more-button:focus-visible { color: var(--primary); background: var(--primary-soft); }
.family-feed-more-menu { position: absolute; right: .2rem; bottom: calc(100% + .25rem); min-width: 10.5rem; padding: .3rem; border: 1px solid var(--border); border-radius: .65rem; background: #fff; box-shadow: 0 .75rem 1.8rem rgba(24,47,39,.2); z-index: 40; }.family-feed-more-menu[hidden] { display: none !important; }.family-feed-more-menu button { width: 100%; display: block; padding: .55rem .65rem; border: 0; border-radius: .4rem; color: var(--heading); background: transparent; text-align: left; font-weight: 750; cursor: pointer; }.family-feed-more-menu button:hover { background: var(--primary-soft); }.family-feed-more-menu button.is-danger { color: var(--danger); }.family-feed-comment-bubble { position: relative; padding-bottom: 1.7rem; }

@media (max-width: 44rem) {
    .profile-page-heading { align-items: stretch; flex-direction: column; }.profile-page-heading .button { align-self: start; }
    .profile-subject-switcher, .profile-photo-upload-row { grid-template-columns: 1fr; }
}

.family-directory-profile-link { grid-column: span 2; }
/* Drag-and-drop family tree organizer. */
.family-tree-help { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.2rem; padding: 1rem 1.1rem; border: 1px solid rgba(42,101,82,.25); border-radius: 1rem; background: linear-gradient(110deg,#eaf5ef,#f8fbf8); }
.family-tree-help-icon { width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.family-tree-help-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.family-tree-help div { display: grid; gap: .15rem; }.family-tree-help span { color: var(--muted); }
.family-tree-section { margin-top: 1.25rem; }
.family-tree-board { display: grid; grid-template-columns: repeat(3,minmax(17rem,1fr)); gap: 1rem; align-items: start; }
.family-tree-unit { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--surface); box-shadow: 0 .55rem 1.35rem rgba(27,55,44,.08); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.family-tree-unit.is-drag-over { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(42,101,82,.13),0 .9rem 1.7rem rgba(27,55,44,.14); transform: translateY(-2px); }
.family-tree-unit-heading { min-height: 5.15rem; display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(120deg,var(--primary-dark),var(--primary)); }
.family-tree-unit-heading > span:nth-child(2) { min-width: 0; display: grid; gap: .14rem; }.family-tree-unit-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.04rem; }.family-tree-unit-heading small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.82); }
.family-tree-unit-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .8rem; background: rgba(255,255,255,.16); }.family-tree-unit-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.family-tree-edit-unit { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: #fff; text-decoration: none; font-size: 1.35rem; }.family-tree-edit-unit:hover,.family-tree-edit-unit:focus-visible { color: #fff; background: rgba(255,255,255,.18); }
.family-tree-unassigned .family-tree-unit-heading { color: var(--primary-dark); background: linear-gradient(120deg,#edf2ee,#f8faf7); }.family-tree-unassigned .family-tree-unit-heading small { color: var(--muted); }.family-tree-unit-icon.unassigned { background: #d9e7df; }
.family-tree-members { min-height: 8.5rem; display: grid; align-content: start; gap: .55rem; padding: .8rem; }
.family-tree-person { width: 100%; min-width: 0; display: grid; grid-template-columns: 2.65rem minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .65rem .7rem; border: 1px solid #dbe4de; border-radius: .9rem; color: var(--text); text-align: left; background: #fff; cursor: grab; box-shadow: 0 .2rem .55rem rgba(28,54,44,.045); transition: border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.family-tree-person:hover,.family-tree-person:focus-visible { border-color: rgba(42,101,82,.48); transform: translateY(-1px); box-shadow: 0 .45rem .9rem rgba(28,54,44,.09); }.family-tree-person:active { cursor: grabbing; }.family-tree-person.is-dragging { opacity: .48; }
.family-tree-avatar { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .04em; background: var(--primary); }.family-tree-avatar img { width: 100%; height: 100%; object-fit: cover; }
.family-tree-person-copy { min-width: 0; display: grid; gap: .05rem; }.family-tree-person-copy strong,.family-tree-person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.family-tree-person-copy small { color: var(--muted); }
.family-tree-person-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }.family-tree-minor-badge,.family-tree-dependent-badge { padding: .22rem .42rem; border-radius: 999px; font-size: .68rem; font-weight: 850; line-height: 1; }.family-tree-minor-badge { color: #74421b; background: #fde9c9; }.family-tree-dependent-badge { color: #285c4c; background: #dceee5; }
.family-tree-person.is-lead { border-color: rgba(42,101,82,.36); background: #f2f8f4; }
.family-tree-drop-message { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 3.25rem; padding: .65rem; border: 2px dashed #cdd9d1; border-radius: .8rem; color: var(--muted); font-size: .84rem; text-align: center; }.family-tree-drop-message span { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.family-tree-new-unit { min-height: 7rem; display: grid; place-items: center; align-content: center; gap: .25rem; padding: 1rem; border: 2px dashed rgba(42,101,82,.4); border-radius: 1.1rem; color: var(--primary-dark); text-align: center; background: rgba(232,244,237,.55); transition: border-color .18s ease,background .18s ease; }.family-tree-new-unit > span { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 1.35rem; background: var(--primary); }.family-tree-new-unit small { color: var(--muted); }.family-tree-new-unit.is-drag-over { border-color: var(--primary); background: #e3f2e9; }
.family-tree-assignment-dialog { width: min(34rem,calc(100% - 2rem)); }.family-tree-minor-choice { display: grid; gap: .45rem; margin: 1rem 0; padding: .85rem; border-radius: .85rem; background: var(--surface-soft); }.family-tree-minor-control > span { display: flex; align-items: center; gap: .65rem; }.family-tree-minor-choice input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; margin: 0; }.family-tree-minor-choice label { margin: 0; font-weight: 850; }.family-tree-minor-choice p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.family-tree-management-details { margin-top: 1.2rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }.family-tree-management-details > summary { padding: 1rem 1.1rem; color: var(--primary-dark); font-weight: 850; cursor: pointer; }.family-tree-management-details .data-panel { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 1rem 1rem; }
.family-tree-workspace { display: grid; grid-template-columns: minmax(15rem,19rem) minmax(0,1fr); align-items: start; gap: 1.25rem; }
.family-tree-unassigned-sidebar { position: sticky; top: 1rem; min-width: 0; max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--surface); box-shadow: 0 .55rem 1.35rem rgba(27,55,44,.08); transition: border-color .18s ease,box-shadow .18s ease; }
.family-tree-unassigned-sidebar.is-drag-over { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(42,101,82,.13),0 .9rem 1.7rem rgba(27,55,44,.14); }
.family-tree-unassigned-heading { display: grid; grid-template-columns: 2.7rem minmax(0,1fr); align-items: center; gap: .75rem; padding: .9rem 1rem; color: var(--primary-dark); background: linear-gradient(120deg,#edf2ee,#f8faf7); }
.family-tree-unassigned-heading > span:last-child { min-width: 0; display: grid; gap: .12rem; }.family-tree-unassigned-heading small { color: var(--muted); line-height: 1.35; }
.family-tree-unassigned-members { min-height: 12rem; }
.family-tree-workspace .family-tree-section { min-width: 0; margin-top: 0; }
.family-tree-workspace .family-tree-board { grid-template-columns: repeat(auto-fit,minmax(min(23rem,100%),1fr)); }
.family-tree-branch { overflow: visible; }
.family-tree-generations { position: relative; display: grid; justify-items: center; gap: 0; padding: 1rem; }
.family-tree-generation { position: relative; width: 100%; display: grid; justify-items: center; gap: .5rem; padding: .8rem .45rem; border: 1px dashed transparent; border-radius: .9rem; transition: border-color .16s ease,background .16s ease; }
.family-tree-generation + .family-tree-generation { margin-top: 1.3rem; }
.family-tree-generation + .family-tree-generation::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 1.3rem; background: #b9ccc1; transform: translateX(-50%); }
.family-tree-generation-label { position: relative; z-index: 1; display: grid; justify-items: center; gap: .08rem; padding: .35rem .75rem; border: 1px solid #cbdcd2; border-radius: 999px; color: var(--primary-dark); background: #f3f8f5; text-align: center; }
.family-tree-generation-label > span { font-size: .78rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }.family-tree-generation-label small { color: var(--muted); font-size: .7rem; }
.family-tree-generation-members { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.family-tree-generation-members .family-tree-person { width: min(100%,18rem); }
.family-tree-generation-members .family-tree-drop-message { width: min(100%,18rem); min-height: 2.6rem; opacity: .72; }
.family-tree-generation.is-drag-over { border-color: var(--primary); background: #edf7f1; }.family-tree-generation.is-drag-over .family-tree-drop-message { opacity: 1; border-color: var(--primary); }
.family-tree-generation.relationship-spouse .family-tree-generation-label { color: #2c5f79; background: #edf6fa; border-color: #c8dce7; }
.family-tree-generation.relationship-child .family-tree-generation-label { color: #74421b; background: #fff6e8; border-color: #eed7b5; }
.family-tree-generation.relationship-grandchild .family-tree-generation-label { color: #714566; background: #f9eff7; border-color: #e4cce0; }
.family-tree-generation.relationship-other .family-tree-generation-label { color: #5c625f; background: #f4f5f4; border-color: #d9ddda; }
@media (max-width: 64rem) { .family-tree-workspace { grid-template-columns: 1fr; }.family-tree-unassigned-sidebar { position: static; max-height: none; }.family-tree-unassigned-members { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; } }
@media (max-width: 48rem) { .family-tree-workspace .family-tree-board,.family-tree-unassigned-members { grid-template-columns: 1fr; }.family-tree-help { align-items: flex-start; }.family-tree-person { grid-template-columns: 2.65rem minmax(0,1fr); }.family-tree-person-badges { grid-column: 2; justify-content: flex-start; } }
/* Integrated not-found page and reminder event chooser. */
.not-found-page { min-height: min(38rem,calc(100vh - 12rem)); display: grid; grid-template-columns: minmax(18rem,.85fr) minmax(20rem,1.15fr); align-items: center; gap: clamp(2rem,7vw,6rem); padding: clamp(2rem,6vw,5rem); border: 1px solid var(--border); border-radius: 1.35rem; background: radial-gradient(circle at 18% 18%,rgba(245,196,104,.25),transparent 34%),linear-gradient(135deg,#f8fbf8,#eef5f0); box-shadow: 0 1rem 2.8rem rgba(28,53,44,.1); }
.not-found-illustration { position: relative; min-height: 18rem; display: grid; place-items: center; overflow: visible; margin-top: clamp(4.5rem,8vw,7rem); border-radius: 50% 45% 48% 42%; color: var(--primary); background: linear-gradient(145deg,#dcefe5,#f7ead4); }.not-found-illustration svg { position: relative; z-index: 1; width: min(80%,24rem); fill: rgba(255,255,255,.56); stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.not-found-number { position: absolute; left: 50%; bottom: calc(100% + .15rem); color: var(--primary-dark); font-family: Georgia,serif; font-size: clamp(4.5rem,10vw,7rem); font-weight: 900; line-height: .9; transform: translateX(-50%); }
.not-found-copy { max-width: 40rem; }.not-found-copy h1 { margin: .25rem 0 .8rem; font-size: clamp(2.25rem,5vw,4.5rem); line-height: .98; }.not-found-copy > p:not(.eyebrow) { max-width: 36rem; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.reminder-event-picker-page { max-width: 60rem; margin-inline: auto; }.reminder-event-picker { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1rem 1.2rem; align-items: center; padding: clamp(1.25rem,4vw,2.5rem); }.reminder-event-picker > .form-field,.reminder-event-picker > .form-message,.reminder-event-picker > .empty-state,.reminder-event-picker > .button { grid-column: 2; }.reminder-event-picker-icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1.1rem; color: #fff; background: linear-gradient(135deg,#746eb7,#514b8c); }.reminder-event-picker-icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.reminder-event-picker h2 { margin: 0; }.reminder-event-picker .button { justify-self: start; }
@media (max-width: 48rem) { .not-found-page { grid-template-columns: 1fr; padding: 1.25rem; }.not-found-illustration { min-height: 12rem; }.not-found-copy { text-align: center; }.not-found-copy .page-actions { justify-content: center; }.reminder-event-picker { grid-template-columns: 1fr; }.reminder-event-picker > * { grid-column: 1 !important; }.reminder-event-picker-icon { width: 3.25rem; height: 3.25rem; } }
.reminders-overview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 0 0 1.2rem; }.reminders-overview > button { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease; }.reminders-overview > button:hover,.reminders-overview > button:focus-visible { border-color: var(--primary); box-shadow: 0 .5rem 1.1rem rgba(28,53,44,.1); transform: translateY(-1px); }.reminders-overview > button > span:last-child { display: grid; gap: .12rem; }.reminders-overview small { color: var(--muted); }.reminders-overview-icon { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; border-radius: .85rem; color: #fff; }.reminders-overview-icon.general { background: linear-gradient(135deg,#746eb7,#514b8c); }.reminders-overview-icon.event { background: linear-gradient(135deg,#447bb7,#285683); }.reminders-overview-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 44rem) { .reminders-overview { grid-template-columns: 1fr; } }

/* Reminder delivery, compact calendar controls, and household directory cards. */
.reminder-delivery-fieldset { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-soft); }
.reminder-delivery-fieldset legend { padding: 0 .35rem; color: var(--heading); font-weight: 850; }
.reminder-delivery-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.reminder-delivery-options > span { display: flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.reminder-delivery-options input { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; margin: 0; }
.reminder-delivery-options label { margin: 0; font-weight: 800; cursor: pointer; }
.reminder-delivery-fieldset .field-help { margin: .7rem 0 0; }

.home-calendar-month-nav { display: flex; align-items: center; gap: .55rem; }
.home-calendar-month-nav h2 { min-width: 9.5rem; margin: 0; text-align: center; }
.home-calendar-arrow { width: 2.2rem; height: 2.2rem; flex: 0 0 2.2rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--primary-dark); background: #fff; text-decoration: none; font-size: 1.05rem; font-weight: 900; }
.home-calendar-arrow:hover,.home-calendar-arrow:focus-visible { color: #fff; border-color: var(--primary); background: var(--primary); }

.page-heading .page-actions .upcoming-icon-action { width: 2.9rem; min-width: 2.9rem; min-height: 2.9rem; padding: 0; display: grid; place-items: center; }
.upcoming-icon-action > span { display: block; font-size: 1.65rem; font-weight: 600; line-height: 1; transform: translateY(-.04em); }
.upcoming-icon-action svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.calendar-event-management { position: relative; min-width: 0; }
.calendar-event-management .calendar-item { width: 100%; padding-right: 1.8rem; }
.calendar-event-management-toggle { position: absolute; top: .08rem; right: .08rem; z-index: 2; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: .4rem; color: inherit; background: rgba(255,255,255,.82); font: inherit; font-size: 1.1rem; font-weight: 900; line-height: 1; cursor: pointer; }
.calendar-event-management-toggle:hover,.calendar-event-management-toggle:focus-visible { background: #fff; }
.calendar-event-management-actions {
    position: absolute;
    z-index: 80;
    top: calc(100% - 1px);
    left: 0;
    display: none;
    min-width: 8.5rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 .75rem 1.8rem rgba(24, 45, 37, .18);
}
.calendar-event-management-actions.is-viewport-positioned {
    position: fixed;
    z-index: 1000;
}
.calendar-event-management:hover .calendar-event-management-actions,
.calendar-event-management:focus-within .calendar-event-management-actions,
.calendar-event-management.is-open .calendar-event-management-actions { display: grid; }
.calendar-event-management-actions a,
.calendar-event-management-actions button {
    width: 100%;
    padding: .45rem .55rem;
    border: 0;
    border-radius: .4rem;
    color: var(--heading);
    background: transparent;
    font: inherit;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.calendar-event-management-actions a:hover,
.calendar-event-management-actions a:focus-visible,
.calendar-event-management-actions button:hover,
.calendar-event-management-actions button:focus-visible { background: var(--surface-soft); }
.calendar-event-management-actions button:last-child { color: var(--danger, #a52b2b); }
.upcoming-card-actions { display: flex; align-items: center; gap: .45rem; }
.event-card-action-menu { position: relative; }
.event-card-action-menu details > summary { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: .7rem; color: var(--primary-dark); background: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1; list-style: none; cursor: pointer; }
.event-card-action-menu details > summary::-webkit-details-marker { display: none; }
.event-card-action-menu details > div { position: absolute; z-index: 90; top: calc(100% + .3rem); right: 0; min-width: 9rem; display: grid; padding: .35rem; border: 1px solid var(--border); border-radius: .65rem; background: #fff; box-shadow: 0 .75rem 1.8rem rgba(24,45,37,.18); }
.event-card-action-menu a,.event-card-action-menu button { width: 100%; padding: .5rem .6rem; border: 0; border-radius: .4rem; color: var(--heading); background: transparent; font: inherit; font-weight: 750; text-align: left; text-decoration: none; cursor: pointer; }
.event-card-action-menu a:hover,.event-card-action-menu a:focus-visible,.event-card-action-menu button:hover,.event-card-action-menu button:focus-visible { background: var(--surface-soft); }
.event-card-action-menu button:last-child { color: var(--danger, #a52b2b); }
.reminders-page-shell { min-width: 0; display: grid; padding-inline: clamp(.75rem,1.5vw,1.5rem); }
.reminders-page-shell > .page-heading { padding-inline: 0; }
.reminders-page-shell .table-scroll { min-width: 0; max-width: 100%; }
.calendar-item.is-draft {
    border: 2px dashed var(--upcoming-status-color, var(--primary));
    border-left-width: .3rem;
    color: var(--heading);
    background: color-mix(in srgb, var(--upcoming-type-color, var(--primary)) 35%, transparent);
}
.calendar-item.is-archived { opacity: .62; filter: saturate(.55); }
.calendar-item.is-completed { box-shadow: inset 0 -3px 0 var(--upcoming-status-color, var(--primary)); }

/* Relationship-first family tree organizer and generation directory */
.relationship-tree-page-shell,
.registrations-page-shell { min-width: 0; display: grid; gap: 1rem; padding-inline: clamp(.75rem,1.5vw,1.5rem); }
.relationship-directory-groups { display: grid; gap: 1.2rem; }
.relationship-directory-group-heading { margin: 0; padding: .85rem 1rem; border-bottom: 1px solid var(--border); color: var(--primary-dark); background: var(--primary-soft); font-family: var(--font-body); font-size: 1.05rem; }
.relationship-tree-layout {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(15rem,19rem) minmax(0,1fr);
    align-items: start;
    gap: 1rem;
}
.relationship-tree-canvas {
    min-width: 0;
    min-height: 37rem;
    padding: 1.15rem;
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
}
.relationship-tree-heading-row { position: sticky; left: 0; z-index: 8; }
.relationship-tree-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.relationship-tree-hint { margin: 0; color: var(--text-muted); font-size: .84rem; white-space: nowrap; }
.relationship-tree-add-button {
    width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    display: inline-grid;
    place-items: center;
    padding: 0 0 .08rem;
    border-radius: 50%;
    font-size: 1.65rem;
    line-height: 1;
}
.relationship-tree-board {
    width: max-content;
    min-width: 100%;
    display: block;
    padding: 1.35rem 10rem 3rem 1rem;
}
.relationship-tree-landscape {
    position: relative;
    width: max-content;
    min-width: 100%;
    min-height: 24rem;
    display: flex;
    align-items: center;
    gap: 4rem;
}
.relationship-tree-focus-column { width: 15rem; flex: 0 0 15rem; display: grid; justify-items: stretch; gap: .65rem; }
.relationship-tree-return-focus { justify-self: start; }
.relationship-tree-landscape-family {
    position: relative;
    width: 15rem;
    flex: 0 0 15rem;
    border: 1px solid var(--border);
    border-left: .28rem solid var(--primary);
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 .28rem .75rem rgba(24,47,39,.08);
}
.relationship-tree-landscape-family.is-focus {
    border-left-color: var(--secondary, #bd6d25);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--secondary,#bd6d25) 16%,transparent), 0 .35rem .9rem rgba(24,47,39,.1);
}
.relationship-tree-landscape-label {
    position: absolute;
    bottom: calc(100% + .34rem);
    left: 0;
    padding: .16rem .45rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.relationship-tree-landscape-people { display: grid; }
.relationship-tree-landscape-people .relationship-tree-person {
    width: 100%;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}
.relationship-tree-landscape-people .relationship-tree-person:first-child { border-radius: .3rem .3rem 0 0; }
.relationship-tree-landscape-people .relationship-tree-action-toggle { border-radius: 0; }
.relationship-tree-landscape-people .relationship-tree-person-main { padding-block: .5rem; }
.relationship-tree-children-dropdown { position: relative; z-index: 12; }
.relationship-tree-children-dropdown[open] { z-index: 42; }
.relationship-tree-children-dropdown > summary,
.relationship-tree-earlier-ancestors > summary,
.relationship-tree-extended-family > summary {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .6rem;
    color: var(--primary-dark);
    background: var(--surface-soft);
    font-size: .75rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}
.relationship-tree-children-dropdown > summary::-webkit-details-marker,
.relationship-tree-earlier-ancestors > summary::-webkit-details-marker,
.relationship-tree-extended-family > summary::-webkit-details-marker { display: none; }
.relationship-tree-children-dropdown > summary::after,
.relationship-tree-earlier-ancestors > summary::after,
.relationship-tree-extended-family > summary::after { content: "⌄"; font-size: 1rem; line-height: 1; transition: transform .16s ease; }
.relationship-tree-children-dropdown[open] > summary::after,
.relationship-tree-earlier-ancestors[open] > summary::after,
.relationship-tree-extended-family[open] > summary::after { transform: rotate(180deg); }
.relationship-tree-children-dropdown-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: -.28rem;
    width: 15rem;
    max-height: 19rem;
    display: grid;
    gap: .25rem;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: #fff;
    box-shadow: 0 .8rem 1.6rem rgba(24,47,39,.2);
}
.relationship-tree-compact-person {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 2rem minmax(0,1fr);
    align-items: center;
    gap: .55rem;
    padding: .48rem;
    border: 0;
    border-radius: .4rem;
    color: var(--heading);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.relationship-tree-compact-person:hover,
.relationship-tree-compact-person:focus-visible { background: var(--primary-soft); }
.relationship-tree-compact-avatar {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    object-fit: cover;
    font-size: .66rem;
    font-weight: 900;
}
.relationship-tree-compact-person > span:last-child { min-width: 0; display: grid; }
.relationship-tree-compact-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.relationship-tree-compact-person small { color: var(--text-muted); font-size: .67rem; }
.relationship-tree-ancestry {
    position: relative;
    display: grid;
    grid-auto-rows: 1fr;
    align-items: center;
    align-content: stretch;
    gap: 3rem;
    padding-left: 2rem;
}
.relationship-tree-ancestry::before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 4rem;
    border-top: 2px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    content: "";
}
.relationship-tree-ancestry.is-split::after {
    position: absolute;
    top: calc((100% - 3rem) / 4);
    bottom: calc((100% - 3rem) / 4);
    left: 0;
    border-left: 2px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    content: "";
}
.relationship-tree-ancestor-branch { position: relative; display: flex; align-items: center; gap: 3.6rem; }
.relationship-tree-ancestor-branch::before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 2rem;
    border-top: 2px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    content: "";
}
.relationship-tree-ancestor-parents {
    position: relative;
    display: grid;
    grid-auto-rows: 1fr;
    align-items: center;
    gap: 2.4rem;
    padding-left: 2rem;
}
.relationship-tree-ancestor-parents::before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 3.6rem;
    border-top: 2px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    content: "";
}
.relationship-tree-ancestor-parents.is-split::after {
    position: absolute;
    top: calc((100% - 2.4rem) / 4);
    bottom: calc((100% - 2.4rem) / 4);
    left: 0;
    border-left: 2px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    content: "";
}
.relationship-tree-earlier-ancestors { position: relative; width: 13rem; }
.relationship-tree-earlier-ancestors > summary { border: 1px solid var(--border); border-radius: .55rem; background: #fff; box-shadow: 0 .25rem .65rem rgba(24,47,39,.06); }
.relationship-tree-earlier-list {
    position: absolute;
    z-index: 45;
    top: calc(100% + .3rem);
    left: 0;
    width: 16rem;
    max-height: 18rem;
    display: grid;
    gap: .2rem;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: #fff;
    box-shadow: 0 .8rem 1.6rem rgba(24,47,39,.2);
}
.relationship-tree-earlier-list button { padding: .55rem; border: 0; border-radius: .4rem; color: var(--heading); background: transparent; font: inherit; font-size: .78rem; font-weight: 750; text-align: left; cursor: pointer; }
.relationship-tree-earlier-list button:hover,
.relationship-tree-earlier-list button:focus-visible { background: var(--primary-soft); }
.relationship-tree-extended-family { width: min(58rem,calc(100vw - 7rem)); margin-top: 1.5rem; border: 1px solid var(--border); border-radius: .7rem; background: #fff; }
.relationship-tree-extended-family > summary { border-radius: .68rem; }
.relationship-tree-extended-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; padding: .55rem; }
.relationship-tree-family-node { position: relative; display: grid; justify-items: center; min-width: max-content; }
.relationship-tree-generation-label {
    justify-self: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.relationship-tree-couple { display: flex; align-items: center; justify-content: center; gap: 0; }
.relationship-tree-family-node > .relationship-tree-generation-label { margin-bottom: .55rem; }
.relationship-tree-partner-link { display: grid; grid-template-columns: minmax(.45rem,1fr) auto minmax(.45rem,1fr); align-items: center; gap: .2rem; width: 4.4rem; color: var(--primary-dark); }
.relationship-tree-partner-link > span { height: 2px; background: color-mix(in srgb,var(--primary) 55%,var(--border)); }
.relationship-tree-partner-link strong { padding: .18rem .3rem; border-radius: 999px; background: var(--primary-soft); font-size: .58rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.relationship-tree-descendants { position: relative; display: grid; justify-items: center; margin-top: 1.7rem; padding-top: .5rem; }
.relationship-tree-descendants::before { position: absolute; bottom: 100%; left: 50%; width: 2px; height: 1.7rem; background: color-mix(in srgb,var(--primary) 42%,var(--border)); content: ""; }
.relationship-tree-children-label { z-index: 1; padding: .24rem .58rem; border: 1px solid color-mix(in srgb,var(--primary) 24%,var(--border)); border-radius: 999px; color: var(--primary-dark); background: #fff; font-size: .72rem; font-weight: 850; }
.relationship-tree-children { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: .7rem; margin-top: .55rem; padding-top: 1.15rem; border-top: 2px solid color-mix(in srgb,var(--primary) 34%,var(--border)); }
.relationship-tree-children.is-single { border-top-color: transparent; }
.relationship-tree-children > .relationship-tree-family-node::before { position: absolute; bottom: 100%; left: 50%; width: 2px; height: 1.15rem; background: color-mix(in srgb,var(--primary) 34%,var(--border)); content: ""; }
.relationship-tree-children.is-final-generation { width: max-content; flex-direction: column; align-items: stretch; gap: .45rem; padding-top: .55rem; border-top-color: transparent; }
.relationship-tree-children.is-final-generation > .relationship-tree-family-node { width: max-content; min-width: 0; justify-items: stretch; }
.relationship-tree-children.is-final-generation > .relationship-tree-family-node::before { display: none; }
.relationship-tree-children.is-final-generation .relationship-tree-couple { justify-content: stretch; }
.relationship-tree-person {
    position: relative;
    width: 12.25rem;
    min-width: 12.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: .85rem;
    color: var(--heading);
    background: #fff;
    box-shadow: 0 .25rem .7rem rgba(24,47,39,.04);
}
.relationship-tree-person-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .58rem;
    align-items: center;
    padding: .58rem .25rem .58rem .58rem;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.relationship-tree-person[draggable="true"] { cursor: grab; }
.relationship-tree-person.is-dragging { opacity: .45; }
.relationship-tree-person.is-drop-target { outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent); transform: translateY(-2px); }
.relationship-tree-person img,
.relationship-tree-avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    object-fit: cover;
}
.relationship-tree-avatar { display: grid; place-items: center; color: #fff; background: var(--primary); font-weight: 850; }
.relationship-tree-person strong,
.relationship-tree-person small { display: block; }
.relationship-tree-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .91rem; }
.relationship-tree-person small { margin-top: .12rem; color: var(--text-muted); }
.relationship-tree-person.is-minor small { color: var(--accent-strong, #9a4b16); }
.relationship-tree-actions { position: relative; align-self: stretch; display: flex; align-items: stretch; }
.relationship-tree-action-toggle { width: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 .82rem .82rem 0; color: var(--text-muted); background: transparent; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.relationship-tree-action-toggle:hover, .relationship-tree-action-toggle:focus-visible, .relationship-tree-action-toggle[aria-expanded="true"] { color: var(--primary-dark); background: var(--primary-soft); }
.relationship-tree-action-menu {
    position: absolute;
    z-index: 35;
    top: 0;
    left: calc(100% + .35rem);
    width: 13rem;
    padding: .3rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 .8rem 1.8rem rgba(24,47,39,.2);
}
.relationship-tree-action-menu.is-viewport-menu { position: fixed; z-index: 220; right: auto; }
.relationship-tree-action-menu[hidden] { display: none !important; }
.relationship-tree-action-menu a, .relationship-tree-action-menu button { width: 100%; min-height: 2.35rem; display: flex; align-items: center; padding: .48rem .6rem; border: 0; border-radius: .45rem; color: var(--heading); background: transparent; font: inherit; font-size: .82rem; font-weight: 750; text-align: left; text-decoration: none; cursor: pointer; }
.relationship-tree-action-menu a:hover, .relationship-tree-action-menu button:hover { background: var(--primary-soft); }
.relationship-tree-action-menu .is-danger { color: var(--danger); }
.relationship-tree-delete-submit { display: none !important; }
.relationship-tree-empty { margin-top: 1rem; }
.relationship-tree-minor-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    margin-top: 1rem;
    padding: .9rem;
    border-radius: .75rem;
    background: var(--surface-soft);
}
.relationship-tree-minor-option input { margin-top: .25rem; }
.relationship-tree-minor-option small { display: block; margin-top: .2rem; color: var(--text-muted); }
.relationship-tree-dialog .dialog-actions { margin-top: 1rem; }
.relationship-tree-unorganized {
    position: sticky;
    top: 1rem;
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1.15rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.relationship-tree-unorganized.is-drop-target { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent), 0 .8rem 2.2rem rgba(21,54,43,.24); }
.relationship-tree-dock-heading { display: grid; gap: .55rem; }
.relationship-tree-dock-heading h2 { margin: .08rem 0 0; font-size: 1.05rem; }
.relationship-tree-help { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.relationship-tree-unorganized-list { min-width: 0; max-height: calc(100vh - 17rem); display: grid; gap: .55rem; overflow-y: auto; padding: .2rem; }
.relationship-tree-unorganized-list .relationship-tree-person { width: 100%; min-width: 0; }
.relationship-tree-all-organized { width: 100%; margin: 0; padding: .65rem .8rem; text-align: center; }
.relationship-tree-save {
    display: none;
    width: 100%;
    white-space: nowrap;
    box-shadow: 0 .45rem 1rem rgba(21,54,43,.2);
}
.relationship-tree-save.is-visible { display: inline-flex; }

.relationship-directory-section { min-width: 0; padding: 1.15rem; }
.relationship-directory { overflow-x: auto; border: 1px solid var(--border); border-radius: .85rem; }
.relationship-directory-header,
.relationship-directory-row {
    min-width: 73rem;
    display: grid;
    grid-template-columns: minmax(12rem,1.2fr) minmax(12rem,1fr) minmax(9rem,.72fr) minmax(14rem,1.3fr) minmax(7rem,.55fr) minmax(8rem,.6fr);
    align-items: center;
    gap: .8rem;
}
.relationship-directory-header { padding: .7rem .85rem; color: var(--text-muted); background: var(--surface-soft); font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.relationship-directory-generation > h3 { min-width: 73rem; margin: 0; padding: .65rem .85rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--primary-dark); background: color-mix(in srgb,var(--primary-soft) 70%,#fff); font-family: var(--font-body); font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; }
.relationship-directory-row { min-height: 4.5rem; padding: .7rem .85rem; border-bottom: 1px solid var(--border); background: #fff; transition: background .2s ease, box-shadow .2s ease; }
.relationship-directory-generation:last-child .relationship-directory-row:last-child { border-bottom: 0; }
.relationship-directory-row.is-highlighted { background: #fff8df; box-shadow: inset .3rem 0 var(--secondary); }
.relationship-directory-person-link { min-width: 0; display: flex; align-items: center; gap: .65rem; color: var(--heading); text-decoration: none; }
.relationship-directory-person-link > span:last-child { min-width: 0; display: grid; }
.relationship-directory-person-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relationship-directory-person-link small { color: #9a4b16; }
.relationship-directory-avatar { width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); object-fit: cover; font-size: .72rem; font-weight: 900; }
.relationship-directory-cell { min-width: 0; overflow-wrap: anywhere; font-size: .87rem; }
.relationship-directory-cell a { color: var(--primary-dark); font-weight: 700; }
.relationship-directory-private { color: var(--text-muted); font-size: .8rem; }
.relationship-directory-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.relationship-directory-actions > a, .relationship-directory-actions > button { padding: .4rem .55rem; border: 1px solid var(--border); border-radius: .5rem; color: var(--primary-dark); background: #fff; font: inherit; font-size: .74rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.relationship-directory-actions > a:hover, .relationship-directory-actions > button:hover { background: var(--primary-soft); }
.relationship-directory-actions .relationship-directory-action-toggle { width: 2.25rem; height: 2.25rem; min-height: 2.25rem; display: grid; place-items: center; padding: 0; border-radius: 50%; font-size: 1.15rem; }

@media (max-width: 760px) {
    .relationship-tree-layout { grid-template-columns: 1fr; }
    .relationship-tree-canvas { min-height: 32rem; scrollbar-gutter: auto; }
    .relationship-tree-heading-row { align-items: flex-start; }
    .relationship-tree-heading-actions { align-items: flex-end; flex-direction: column-reverse; }
    .relationship-tree-hint { white-space: normal; text-align: right; }
    .relationship-tree-board { min-width: max-content; padding-right: 8rem; }
    .relationship-tree-landscape { gap: 3rem; }
    .relationship-tree-ancestry::before { width: 3rem; }
    .relationship-tree-extended-family { width: calc(100vw - 4rem); }
    .relationship-tree-extended-list { grid-template-columns: 1fr; }
    .relationship-tree-unorganized { position: static; }
    .relationship-tree-dock-heading { display: block; }
    .relationship-tree-help { display: none; }
    .relationship-tree-unorganized-list { max-height: none; display: flex; overflow-x: auto; overflow-y: hidden; }
    .relationship-tree-unorganized-list .relationship-tree-person { flex: 0 0 12.25rem; }
    .relationship-tree-save { width: auto; justify-self: start; }
}
@media (max-width: 55rem) {
    .relationship-directory { overflow: visible; border: 0; }
    .relationship-directory-header { display: none; }
    .relationship-directory-generation { display: grid; gap: .6rem; }
    .relationship-directory-generation > h3 { min-width: 0; border: 0; border-radius: .65rem; }
    .relationship-directory-row { min-width: 0; grid-template-columns: 1fr 1fr; gap: .65rem; border: 1px solid var(--border); border-radius: .75rem; }
    .relationship-directory-person { grid-column: 1 / -1; }
    .relationship-directory-cell::before, .relationship-directory-actions::before { display: block; margin-bottom: .14rem; color: var(--text-muted); content: attr(data-label); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    .relationship-directory-actions { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 34rem) {
    .relationship-tree-canvas, .relationship-directory-section { padding: .8rem; }
    .relationship-tree-unorganized { padding: .55rem; }
    .relationship-tree-unorganized-list .relationship-tree-person { flex-basis: 11.5rem; }
    .relationship-tree-person { width: 11.5rem; min-width: 11.5rem; }
    .relationship-directory-row { grid-template-columns: 1fr; }
    .relationship-directory-person { grid-column: auto; }
}
.family-settings-switcher { display: grid; grid-template-columns: minmax(0,1fr) minmax(14rem,24rem); align-items: end; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.family-settings-switcher h2,.family-settings-switcher h3 { margin: .1rem 0 0; }
.family-settings-switcher .form-field { margin: 0; }
.family-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.family-settings-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.15rem; }
.family-settings-card h2,.family-settings-card h3 { margin: .1rem 0 0; }
.family-settings-administrator-card { grid-column: auto; }
.family-settings-administrator-card > p { max-width: 72rem; margin: 0; color: var(--text-muted); }
.family-administrator-checklist { grid-template-columns: repeat(auto-fit,minmax(18rem,1fr)); }
.family-administrator-checklist li { align-items: flex-start; background: var(--surface-soft); }
.family-administrator-checklist input:disabled + label { color: var(--text); opacity: 1; }
.family-preference-box { min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-soft); }
.family-preference-list { max-height: 24rem; margin: 0; padding: .45rem; overflow-y: auto; list-style: none; }
.family-preference-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; margin: 0; padding: .7rem; border-bottom: 1px solid var(--border); border-radius: .65rem; background: #fff; }
.family-preference-item:last-child { border-bottom: 0; }
.family-preference-item.is-dragging { opacity: .48; box-shadow: 0 .6rem 1.4rem rgba(24,47,39,.16); }
.family-preference-drag,
.family-preference-actions button { width: 2.15rem; height: 2.15rem; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: .55rem; color: var(--primary-dark); background: var(--surface-soft); font: inherit; font-weight: 900; cursor: pointer; }
.family-preference-drag { letter-spacing: -.38rem; cursor: grab; }
.family-preference-drag:active { cursor: grabbing; }
.family-preference-copy { min-width: 0; display: grid; }
.family-preference-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-preference-copy small { color: var(--text-muted); }
.family-preference-actions { display: flex; gap: .35rem; }
.family-preference-actions button:disabled { opacity: .35; cursor: default; }
.profile-family-settings-zone { scroll-margin-top: 6.5rem; margin: 2rem 0 1.5rem; padding: clamp(1rem,2vw,1.5rem); border: 1px solid rgba(42,101,82,.28); border-top: .35rem solid var(--primary); border-radius: 1.1rem; background: linear-gradient(145deg,rgba(225,240,233,.8),rgba(255,255,255,.94)); box-shadow: 0 .8rem 2rem rgba(24,47,39,.08); }
.profile-family-settings-heading { margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(42,101,82,.2); }
.profile-family-settings-heading h2 { scroll-margin-top: 6.5rem; margin: .15rem 0 0; font-size: clamp(1.55rem,2.4vw,2rem); }
.profile-family-settings-zone > .form-message:empty { display: none; }
.family-ownership-action { margin-top: auto; }
.family-access-card { min-height: 20rem; }
.family-access-member-list { display: grid; gap: .55rem; max-height: 31rem; overflow-y: auto; padding-right: .25rem; }
.family-access-member { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft); }
.family-access-member-copy { display: grid; gap: .15rem; min-width: 0; }
.family-access-member-copy span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.family-access-member-copy small { color: var(--text-muted); }
.family-access-dialog { width: min(100% - 1.5rem,76rem); }
.family-access-dialog .dialog-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.family-access-dialog-section { display: grid; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.family-access-dialog-section h3 { margin: 0; }
.family-role-option-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.family-role-option { min-width: 0; padding: .85rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft); }
.family-role-option.is-automatic { border-color: rgba(42,101,82,.35); background: rgba(225,240,233,.7); }
.family-role-option > span { display: flex; align-items: flex-start; gap: .55rem; font-weight: 700; }
.family-role-option input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin-top: .12rem; }
.family-role-option input:disabled + label { color: var(--text); opacity: 1; }
.family-role-option-copy { display: grid; gap: .3rem; margin: .35rem 0 0 1.75rem; }
.family-role-option-copy small { color: var(--text-muted); line-height: 1.4; }
.access-source { color: var(--primary); font-size: .78rem; font-weight: 700; }
.access-source:empty { display: none; }
.family-ownership-dialog { width: min(100% - 1.5rem,38rem); }
.family-access-history { margin-top: 1rem; }
.family-access-history-list { display: grid; gap: .65rem; margin-top: .85rem; }
.family-access-history-item { display: grid; gap: .35rem; padding: .85rem 0; border-top: 1px solid var(--border); }
.family-access-history-item:first-child { border-top: 0; padding-top: 0; }
.family-access-history-item > div:first-child { display: flex; flex-wrap: wrap; gap: .3rem .55rem; align-items: baseline; }
.family-access-history-item > div:first-child span, .family-access-history-item > small { color: var(--text-muted); }
.family-access-history-item summary { width: fit-content; color: var(--primary); cursor: pointer; font-weight: 700; }
.family-access-change-details { display: grid; gap: .65rem; margin: .65rem 0 0; }
.family-access-change-details > div { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: .65rem; }
.family-access-change-details dt { font-weight: 700; }
.family-access-change-details dd { margin: 0; overflow-wrap: anywhere; color: var(--text-muted); }
@media (max-width: 46rem) {
    .family-settings-switcher, .family-settings-grid { grid-template-columns: 1fr; }
    .family-role-option-list { grid-template-columns: 1fr; }
    .family-access-member { grid-template-columns: 1fr; }
    .family-access-member .button { width: 100%; }
    .family-access-dialog { padding: 1rem; }
}

.event-list-results { background: transparent; }
.event-list-page-content { min-width: 0; padding-inline: clamp(.75rem,1.5vw,1.5rem); }
.event-list-results > .event-list-filters { align-items: end; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; background: #fff; }
.event-list-results .event-type-filter-fieldset { flex: 1 1 24rem; }
.event-list-results .event-card-grid { margin-top: 0; }
.event-list-results .event-list-filter-field { flex: 1 1 15rem; width: auto; }
.family-members-table { width: auto; margin-inline: clamp(.75rem,1.5vw,1.5rem); }

.family-directory-group { overflow: visible; }
.family-directory-group > h2 { text-align: center; }
.family-directory-household { display: grid; gap: 1.15rem; padding: 1.2rem; }
.family-directory-generation { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .9rem; }
.family-directory-children:not(:empty) { position: relative; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.family-directory-card { width: min(100%,19rem); min-width: 0; display: flex; flex-direction: column; gap: .85rem; padding: 1rem; border: 1px solid var(--border); border-top: .3rem solid var(--primary); border-radius: 1rem; background: linear-gradient(145deg,#fff,var(--surface-soft)); box-shadow: 0 .45rem 1rem rgba(24,47,39,.07); }
.family-directory-children .family-directory-card { border-top-color: #b56a2d; }
.family-directory-card .family-directory-profile-link { grid-column: auto; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; }
.family-directory-card .family-directory-avatar { width: 3.35rem; height: 3.35rem; }
.family-directory-card .family-directory-details { display: grid; justify-content: stretch; gap: .55rem; margin-top: auto; }
.family-directory-card .family-directory-details > div { min-width: 0; padding: .55rem .65rem; border-radius: .65rem; background: rgba(231,241,235,.68); }
.family-directory-card .family-directory-details dd { overflow-wrap: anywhere; }
.family-directory-card .family-directory-private { margin-top: auto; padding: .65rem; border-radius: .65rem; color: var(--text-muted); background: var(--surface-muted); text-align: center; }
.family-directory-minor { padding: .28rem .5rem; border-radius: 999px; color: #74421b; background: #fde9c9; font-size: .7rem; font-weight: 900; }

@media (max-width: 44rem) {
    .reminder-delivery-options { grid-template-columns: 1fr; }
    .home-calendar-heading { align-items: flex-start; }
    .home-calendar-month-nav h2 { min-width: 8rem; font-size: 1.25rem; }
    .family-directory-household { padding: .8rem; }
    .family-directory-card { width: 100%; }
}
.calendar-export-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .75rem;
    margin-top: .55rem;
    font-size: .84rem;
}

.calendar-export-links span { color: var(--muted-color, #617067); }
.calendar-export-links a { font-weight: 700; }

.event-notification-settings { max-width: 760px; }
.event-notification-options ul,
.event-notification-options { list-style: none; margin: 1rem 0 1.4rem; padding: 0; }
.event-notification-options li { margin: .5rem 0; }
.event-notification-options label { margin-left: .5rem; }

.event-email-share-panel { max-width: 980px; }
.event-email-share-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 1.5rem; align-items: start; margin: 1.25rem 0; }
.event-email-family-members { min-width: 0; }
.event-share-recipient-list,
.event-share-recipient-list ul { list-style: none; margin: .65rem 0 0; padding: 0; }
.event-share-recipient-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.event-share-recipient-list li { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.event-share-recipient-list input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.event-share-recipient-list label { margin: 0; }
@media (max-width: 760px) {
    .event-email-share-grid { grid-template-columns: 1fr; }
    .event-share-recipient-list ul { grid-template-columns: 1fr; }
}
.family-feed-call-to-action { margin: 0 1rem 1rem; align-self: flex-start; }

@media (max-width: 720px) {
    .calendar-export-links { justify-content: flex-start; }
}

/* Messaging Phase 4: private attachments and message-level interactions. */
.messages-reply-composer { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-left: .25rem solid var(--primary); border-radius: .65rem; background: var(--primary-soft); }
.messages-reply-composer[hidden],.messages-selected-attachments[hidden] { display: none !important; }
.messages-reply-composer > span { min-width: 0; display: grid; flex: 1; gap: .1rem; overflow: hidden; }
.messages-reply-composer span { color: var(--text-muted); font-size: .82rem; }
.messages-reply-composer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-attach-button { position: relative; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; color: var(--primary-dark); background: var(--surface-soft); cursor: pointer; transition: border-color .14s ease,background-color .14s ease,transform .14s ease; }
.messages-attach-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.messages-attach-button svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.messages-attach-button:hover,.messages-attach-button:focus-within { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); outline: 2px solid var(--focus); outline-offset: 2px; }
.messages-selected-attachments { display: grid; grid-template-columns: repeat(auto-fill,minmax(12rem,1fr)); gap: .45rem; }
.messages-selected-file { min-width: 0; display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 2rem; align-items: center; gap: .5rem; padding: .42rem .48rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); }
.messages-selected-file img,.messages-selected-file-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .5rem; object-fit: cover; background: color-mix(in srgb,var(--primary-soft) 70%,#fff); color: var(--primary-dark); font-size: .58rem; font-weight: 900; }
.messages-selected-file-copy { min-width: 0; display: grid; gap: .05rem; }
.messages-selected-file-copy strong,.messages-selected-file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-selected-file-copy strong { color: var(--text); font-size: .78rem; }
.messages-selected-file-copy small { color: var(--text-muted); font-size: .7rem; }
.messages-remove-selected-file { width: 1.85rem; height: 1.85rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--text-muted); background: transparent; font-size: 1.2rem; cursor: pointer; }
.messages-remove-selected-file:hover,.messages-remove-selected-file:focus-visible { color: var(--danger-dark); background: var(--danger-soft); outline: 2px solid var(--focus); outline-offset: 1px; }
.messages-reply-preview { width: 100%; display: grid; gap: .12rem; margin-bottom: .5rem; padding: .45rem .55rem; border: 0; border-left: .2rem solid color-mix(in srgb,var(--primary) 65%,#fff); border-radius: .35rem; color: inherit; background: rgba(255,255,255,.16); font: inherit; font-size: .79rem; text-align: left; cursor: pointer; }
.messages-bubble-row:not(.is-mine) .messages-reply-preview { background: var(--surface-soft); }
.messages-reply-preview:hover,.messages-reply-preview:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.messages-message-body,.messages-removed-copy { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.messages-bubble.is-removed { border-style: dashed; color: var(--text-muted); background: color-mix(in srgb,var(--surface-soft) 84%,#fff); box-shadow: none; font-style: italic; }
.messages-bubble-row.is-mine .messages-bubble.is-removed { border-color: var(--border); color: var(--text-muted); background: var(--surface-soft); }
.messages-attachments { display: grid; gap: .5rem; margin-top: .55rem; }
.messages-photo-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb,currentColor 22%,transparent); border-radius: .72rem; color: inherit; background: rgba(255,255,255,.18); }
.messages-photo-attachment { display: block; color: inherit; text-decoration: none; }
.messages-photo-attachment img { width: min(100%,28rem); max-height: 22rem; display: block; border-radius: .65rem .65rem 0 0; object-fit: contain; }
.messages-photo-footer { min-width: 0; display: flex; align-items: center; gap: .45rem; padding: .32rem .38rem .38rem .5rem; }
.messages-photo-name { min-width: 0; flex: 1; overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.messages-attachment-action { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 50%; color: inherit; background: rgba(255,255,255,.72); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.messages-attachment-action:hover,.messages-attachment-action:focus-visible { border-color: currentColor; outline: 2px solid var(--focus); outline-offset: 1px; }
.messages-gallery-copied { flex: 0 0 auto; padding: .15rem .42rem; border-radius: 999px; color: var(--primary-dark); background: color-mix(in srgb,var(--primary-soft) 82%,#fff); font-size: .65rem; font-weight: 900; white-space: nowrap; }
.messages-view-gallery { flex: 0 0 auto; color: inherit; font-size: .68rem; font-weight: 850; white-space: nowrap; }
.messages-file-attachment { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .45rem; padding: .62rem .7rem; border: 1px solid color-mix(in srgb,currentColor 55%,transparent); border-radius: .65rem; color: inherit; background: rgba(255,255,255,.1); text-decoration: none; }
.messages-file-attachment strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-file-attachment small { white-space: nowrap; }
.messages-photo-attachment:hover,.messages-photo-attachment:focus-visible,.messages-file-attachment:hover,.messages-file-attachment:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.messages-attachment-actions-dialog .messages-dialog-body > .button { width: 100%; justify-content: center; }
.messages-gallery-image-summary { min-width: 0; display: grid; grid-template-columns: 5.25rem minmax(0,1fr); align-items: center; gap: .8rem; padding: .65rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft); }
.messages-gallery-image-summary img { width: 5.25rem; height: 5.25rem; border-radius: .62rem; object-fit: cover; background: var(--primary-soft); }
.messages-gallery-image-summary div { min-width: 0; display: grid; gap: .2rem; }
.messages-gallery-image-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-gallery-image-summary small { color: var(--text-muted); line-height: 1.4; }
.messages-reactions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.messages-reaction-chip { min-height: 1.85rem; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: #fff; cursor: pointer; }
.messages-reaction-chip:hover,.messages-reaction-chip:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 2px solid var(--focus); }
.messages-reaction-chip.is-selected { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); font-weight: 850; }
.messages-bubble-row.is-highlighted { animation: message-highlight 1.6s ease-out; }
@keyframes message-highlight { 0%,35% { filter: drop-shadow(0 0 .45rem var(--secondary)); } 100% { filter: none; } }
.messages-reaction-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; }
.messages-reaction-picker button { min-height: 2.75rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-soft); font-size: 1.25rem; cursor: pointer; }
.messages-reaction-picker button:hover,.messages-reaction-picker button:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 2px solid var(--focus); }

@media (max-width: 48rem) {
    .messages-selected-attachments { grid-template-columns: 1fr; }
    .messages-photo-attachment img { max-height: 17rem; }
    .messages-photo-footer { flex-wrap: wrap; }
    .messages-photo-name { flex-basis: calc(100% - 2.5rem); }
    .messages-view-gallery { order: 4; margin-left: 0; }
    .messages-gallery-image-summary { grid-template-columns: 4rem minmax(0,1fr); }
    .messages-gallery-image-summary img { width: 4rem; height: 4rem; }
}

/* Accessibility baseline and session controls. */
button,
input,
select,
textarea {
    font: inherit;
}

textarea {
    resize: vertical;
}

:where(h1, h2, h3, h4, h5, h6, [id]) {
    scroll-margin-top: 6rem;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus) !important;
    outline-offset: 3px !important;
}

.primary-nav a[aria-current="page"],
.family-nav-items a[aria-current="page"],
.profile-menu-items a[aria-current="page"],
.settings-menu-items a[aria-current="page"] {
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-weight: 850;
}

.accessibility-control {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.accessibility-launch {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .52rem .82rem .52rem .65rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    color: var(--primary-dark);
    background: var(--surface);
    font-weight: 800;
    cursor: pointer;
}

.accessibility-launch:hover,
.accessibility-launch[aria-expanded="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.accessibility-launch svg {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.accessibility-launch .accessibility-mark-head {
    fill: currentColor;
    stroke: none;
}

.accessibility-launch .accessibility-mark-ring {
    stroke-width: 1.45;
}

.accessibility-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(31rem, 100%);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
    box-shadow: -1.25rem 0 3rem rgba(20, 38, 31, .2);
}

.accessibility-panel[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.accessibility-panel::backdrop {
    background: rgba(18, 31, 26, .58);
    backdrop-filter: blur(2px);
}

.accessibility-panel-header,
.accessibility-panel-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--surface);
}

.accessibility-panel-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.accessibility-panel-header .eyebrow,
.accessibility-panel-header h2 {
    margin: 0;
}

.accessibility-panel-header h2 {
    font-size: clamp(1.65rem, 4vw, 2.15rem);
}

.accessibility-panel-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.15rem 1.2rem 1.5rem;
}

.accessibility-panel-body > p:first-child {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.accessibility-panel fieldset {
    min-width: 0;
    margin: 0 0 1.15rem;
    padding: 0;
    border: 0;
}

.accessibility-panel legend {
    margin-bottom: .65rem;
    color: var(--heading);
    font-size: 1.05rem;
    font-weight: 850;
}

.accessibility-choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.accessibility-choice-row label {
    position: relative;
    min-width: 0;
}

.accessibility-choice-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.accessibility-choice-row span {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .55rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    color: var(--text);
    background: var(--surface-soft);
    font-weight: 750;
    cursor: pointer;
}

.accessibility-choice-row input:checked + span {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}

.accessibility-choice-row input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.accessibility-options {
    display: grid;
    gap: .55rem;
}

.accessibility-option {
    min-height: 3.75rem;
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.accessibility-option:hover,
.accessibility-option:focus-within {
    border-color: var(--primary);
}

.accessibility-option input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--primary);
}

.accessibility-option span {
    min-width: 0;
    display: grid;
    gap: .08rem;
}

.accessibility-option strong {
    color: var(--heading);
}

.accessibility-option small,
.accessibility-session-note {
    color: var(--text-muted);
}

.accessibility-session-note {
    margin: 0;
    font-size: .88rem;
}

.accessibility-panel-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.auth-accessibility-footer {
    width: min(100% - 2rem, 58rem);
    justify-content: center;
    border-top: 0;
}

.auth-accessibility-footer .accessibility-control {
    margin-left: 0;
}

.auth-accessibility-footer .site-footer-information {
    justify-content: center;
}

@media (max-width: 42rem) {
    .site-footer,
    .site-footer-information,
    .auth-accessibility-footer .site-footer-information {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .site-footer-information {
        flex-direction: column;
    }

    .accessibility-control {
        margin-left: 0;
    }
}

html[data-a11y-text-size="large"] {
    font-size: 112.5%;
}

html[data-a11y-text-size="larger"] {
    font-size: 125%;
}

html.a11y-high-contrast {
    --background: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f2f2f2;
    --text: #000000;
    --text-muted: #242424;
    --border: #3a3a3a;
    --primary: #003d2c;
    --primary-dark: #00281d;
    --primary-soft: #dcefe8;
    --accent: #773700;
    --heading: #000000;
    --section-heading: #000000;
    --header-background: #ffffff;
    --secondary-button-background: #ffffff;
    --secondary-button-hover: #dcefe8;
    --danger: #7d0000;
    --danger-dark: #570000;
    --danger-soft: #ffe5e5;
    --warning: #5f3b00;
    --warning-soft: #fff0c2;
    --success: #00552d;
    --success-soft: #dff3e6;
    --focus: #004fd6;
    --shadow: none;
}

html.a11y-high-contrast body {
    background-image: none !important;
}

html.a11y-high-contrast :where(.panel, .card, dialog, fieldset, table, th, td, .notice, .button, input, select, textarea) {
    border-color: var(--border);
    box-shadow: none;
}

html.a11y-underline-links a:not(.button):not(.brand):not(.home-create-card) {
    text-decoration: underline !important;
    text-decoration-thickness: .12em !important;
    text-underline-offset: .2em !important;
}

html.a11y-readable-font,
html.a11y-readable-font body,
html.a11y-readable-font :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
    --site-font: Arial, Verdana, sans-serif;
    font-family: Arial, Verdana, sans-serif !important;
}

html.a11y-text-spacing body {
    line-height: 1.75;
    letter-spacing: .06em;
    word-spacing: .12em;
}

html.a11y-text-spacing :where(p, li, dd, label, blockquote) {
    line-height: 1.75;
}

html.a11y-text-spacing p {
    margin-bottom: 1.5em;
}

html.a11y-large-controls :where(.button, button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 3rem;
}

html.a11y-large-controls :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.4rem;
    height: 1.4rem;
}

html.a11y-large-controls :where(.message-menu-link, .notification-menu-link, .profile-menu-toggle, .settings-menu-link, .reunion-switcher-toggle, .dialog-close, summary) {
    min-width: 3rem;
    min-height: 3rem;
}

html.a11y-strong-focus :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 4px solid #004fd6 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

html.a11y-reduce-motion,
html.a11y-reduce-motion * {
    scroll-behavior: auto !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .accessibility-panel::backdrop {
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    :root {
        --background: Canvas;
        --surface: Canvas;
        --surface-soft: Canvas;
        --text: CanvasText;
        --text-muted: CanvasText;
        --border: CanvasText;
        --primary: LinkText;
        --primary-dark: LinkText;
        --primary-soft: Canvas;
        --heading: CanvasText;
        --section-heading: CanvasText;
        --focus: Highlight;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight !important;
    }

    .accessibility-choice-row input:checked + span {
        border: 2px solid Highlight;
    }
}

@media (max-width: 42rem) {
    .accessibility-control {
        margin-left: 0;
    }

    .accessibility-panel-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .accessibility-panel-actions .button {
        width: 100%;
    }
}

@media print {
    .accessibility-control {
        display: none !important;
    }
}
/* Product testing */
.product-testing-rollout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    border-left: .35rem solid var(--color-primary, #245c4e);
}

.product-testing-rollout h2,
.product-testing-admin-grid h3,
.product-testing-feedback-form h2,
.product-testing-section h2 {
    margin-top: 0;
}

.product-testing-rollout-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-testing-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.product-testing-tests-grid {
    align-items: start;
}

.inline-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    margin-bottom: 1rem;
}

.product-testing-admin-list {
    display: grid;
    gap: .75rem;
    max-height: 46rem;
    overflow: auto;
    padding-right: .25rem;
}

.product-testing-admin-item {
    display: grid;
    gap: .55rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #d4ddd8);
    border-radius: .85rem;
    background: var(--color-surface, #fff);
}

.product-testing-admin-item > div:first-child {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
}

.product-testing-admin-item > div:first-child > span:not(.status-pill) {
    color: var(--color-muted, #5d6b65);
}

.product-testing-admin-item p,
.product-testing-admin-item label {
    margin: 0;
}

.product-testing-expiration:empty {
    display: none;
}

.product-testing-admin-item label {
    display: grid;
    gap: .35rem;
    font-weight: 700;
}

.product-testing-admin-item label .text-input {
    font-weight: 400;
}

.product-test-editor .form-field + .form-field,
.product-testing-feedback-form .form-field + .form-field {
    margin-top: 1rem;
}

.product-test-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.product-test-card {
    display: flex;
    flex-direction: column;
    min-height: 15rem;
}

.product-test-card h3 {
    margin: .8rem 0 .45rem;
    font-size: 1.35rem;
}

.product-test-card-meta,
.product-test-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.product-test-card-meta,
.product-test-card-actions span,
.product-test-version,
.product-testing-technical-note {
    color: var(--color-muted, #5d6b65);
    font-size: .9rem;
}

.product-test-card-actions {
    margin-top: auto;
    padding-top: 1rem;
}

.product-testing-section + .product-testing-section,
.product-testing-section + .product-testing-preferences,
.product-test-brief-grid + .product-testing-feedback-form,
.product-testing-feedback-form + .panel {
    margin-top: 1.5rem;
}

.product-testing-history-list {
    padding: .5rem;
}

.product-testing-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: .8rem;
    border-radius: .7rem;
    color: inherit;
    text-decoration: none;
}

.product-testing-history-item:hover,
.product-testing-history-item:focus-visible {
    background: var(--color-surface-muted, #f2f5f3);
}

.product-testing-history-item span:first-child {
    display: grid;
    gap: .2rem;
}

.product-testing-history-item small {
    color: var(--color-muted, #5d6b65);
}

.product-testing-preferences {
    display: grid;
    gap: 1rem;
}

.product-test-brief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.formatted-plain-text {
    line-height: 1.65;
}

.product-testing-more-details {
    margin: 1rem 0;
    border: 1px solid var(--color-border, #d4ddd8);
    border-radius: .85rem;
    padding: 0 1rem 1rem;
}

.product-testing-more-details summary {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
}

.product-testing-report-details {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: .65rem 1rem;
}

.product-testing-report-details dt {
    font-weight: 800;
}

.product-testing-report-details dd {
    margin: 0;
}

.product-testing-comments {
    display: grid;
    gap: .75rem;
    margin: 1rem 0;
}

.product-testing-comments article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem 1rem;
    padding: 1rem;
    border-radius: .85rem;
    background: var(--color-surface-muted, #f2f5f3);
}

.product-testing-comments time {
    color: var(--color-muted, #5d6b65);
    font-size: .85rem;
}

.product-testing-comments p {
    grid-column: 1 / -1;
    margin: 0;
    white-space: pre-wrap;
}

.product-testing-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .8rem;
}

.product-testing-attachment {
    display: grid;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid var(--color-border, #d4ddd8);
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.product-testing-attachment img,
.product-testing-file-icon {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: .55rem;
    object-fit: cover;
    background: var(--color-surface-muted, #f2f5f3);
}

.product-testing-file-icon {
    display: grid;
    place-items: center;
    color: var(--color-primary, #245c4e);
    font-weight: 800;
}

.profile-guardian-product-testing {
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .product-testing-admin-grid,
    .product-test-brief-grid {
        grid-template-columns: 1fr;
    }

    .product-testing-rollout,
    .product-test-card-actions,
    .product-testing-history-item {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-search {
        grid-template-columns: 1fr;
    }

    .inline-search .button,
    .product-test-card-actions .button {
        width: 100%;
    }

    .product-testing-report-details {
        grid-template-columns: 1fr;
    }

    .product-testing-report-details dd + dt {
        margin-top: .65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-testing-history-item,
    .product-testing-attachment {
        scroll-behavior: auto;
        transition: none;
    }
}