/**
 * Komunumo - Self-hosted community and event platform
 * Copyright © Komunumo, a Swiss association, and the individual contributors.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--color-background); color: var(--color-text); }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--font-family-ui); font-size: var(--font-size-body);
  line-height: var(--line-height-body); font-weight: var(--font-weight-regular);
}
a { color: var(--color-primary); overflow-wrap: anywhere; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
button, select, .button {
  font: inherit; color: var(--color-text); background: var(--color-surface);
  min-height: var(--control-min-height); max-width: 100%;
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-control); padding: var(--space-2) var(--space-3);
}
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: var(--font-weight-bold); }
.button:hover { background: var(--color-selection-bg); }
button { cursor: pointer; font-weight: var(--font-weight-bold); }
button:hover { background: var(--color-selection-bg); }
label { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.site-container { width: 100%; max-width: var(--content-max-width); margin-inline: auto; padding-inline: var(--space-8); }
.site-header, .site-footer { background: var(--color-surface); }
.site-header { border-bottom: var(--border-width-default) solid var(--color-border-decorative); }
.site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-8); padding-block: var(--space-4); }
.brand { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); text-decoration: none; }
.primary-navigation { grid-column: 2; justify-self: end; min-width: 0; }
.primary-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.primary-navigation a, .site-footer a { display: inline-flex; align-items: center; min-height: var(--control-min-height); padding: var(--space-2) var(--space-3); }
.primary-navigation [aria-current="page"] { background: var(--color-selection-bg); color: var(--color-selection-text); font-weight: var(--font-weight-bold); border-radius: var(--radius-control); text-decoration: underline; text-underline-offset: .25em; }
.preferences { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: end; min-width: 0; }
.preference { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; margin: 0; }
.preference select { min-width: 0; }
main.site-container { flex: 1; padding-block: var(--space-10); }
.prose { max-width: var(--text-max-width); overflow-wrap: anywhere; }
h1 { font-size: var(--font-size-h1-desktop); line-height: var(--line-height-h1-desktop); font-weight: var(--font-weight-bold); margin-block: 0 var(--space-6); }
p { margin-block: 0 var(--space-4); }
.operator-details { margin: 0; }
.operator-details dt { font-weight: var(--font-weight-semibold); margin-block-start: var(--space-6); }
.operator-details dd { margin: 0; overflow-wrap: anywhere; }
.postal-address { white-space: pre-wrap; }
.site-footer { border-top: var(--border-width-default) solid var(--color-border-decorative); }
.site-footer__inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.skip-link { position: absolute; z-index: 1; inset-inline-start: var(--space-4); inset-block-start: var(--space-4); background: var(--color-surface); padding: var(--space-3); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width: 45rem) {
  .site-container { padding-inline: var(--space-5); }
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); }
  .navigation-toggle { grid-column: 2; grid-row: 1; }
  .primary-navigation { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .primary-navigation ul { flex-direction: column; }
  .preferences { justify-content: start; }
  h1 { font-size: var(--font-size-h1-mobile); line-height: var(--line-height-h1-mobile); }
}
@media (max-width: 21.875rem) { .site-container { padding-inline: var(--space-4); } }

.appearance { grid-column: 3; grid-row: 1; }
.appearance-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control-min-height); padding: var(--space-2); }
.icon { width: var(--icon-size-default); height: var(--icon-size-default); flex: none; }
.appearance-options {
  position: fixed; inset: auto; margin: 0; padding: var(--space-2);
  width: max-content; max-width: calc(100vw - 2 * var(--space-4));
  max-height: calc(100svh - 2 * var(--space-4)); overflow: auto;
  color: var(--color-text); background: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-control);
}
.appearance-options button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; text-align: start; white-space: normal; overflow-wrap: anywhere; border-color: transparent; }
.appearance-options [aria-checked="true"] { color: var(--color-selection-text); background: var(--color-selection-bg); text-decoration: underline; text-underline-offset: .25em; }
.appearance-selected { flex: none; visibility: hidden; }
[aria-checked="true"] .appearance-selected { visibility: visible; }

/* Shared authentication controls and forms. */
.site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.authentication-control { grid-column: 3; grid-row: 1; min-width: 0; }
.authentication-control form { margin: 0; }
.authentication-control a { display: inline-flex; align-items: center; min-height: var(--control-min-height); padding: var(--space-2); }
.appearance { grid-column: 4; }
.auth-panel { max-width: 30rem; margin-inline: auto; padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: var(--radius-card); overflow-wrap: anywhere; }
.auth-panel--code { max-width: 36rem; }
.auth-panel h1 { font-size: var(--font-size-h1-mobile); }
.auth-alternative {
  margin-block: var(--space-5) 0;
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width-default) solid var(--color-border-decorative);
  font-size: var(--font-size-detail);
  line-height: var(--line-height-detail);
  color: var(--color-text-secondary);
}
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.invitation-form input:not([type="hidden"]), .account-profile input, .auth-form input:not([type="hidden"]), .token-panel input:not([type="hidden"]):not([type="checkbox"]), .token-panel textarea { font: inherit; color: var(--color-text); background: var(--color-surface); min-height: var(--control-min-height); padding: var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); min-width: 0; width: 100%; }
.invitation-form input[aria-invalid="true"], .account-profile input[aria-invalid="true"], .auth-form input[aria-invalid="true"] { border: var(--border-width-error) solid var(--color-error); }
.field-error { color: var(--color-error); }
.action-group { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-3); margin-top: var(--space-4); }
.action-group form { display: flex; margin: 0; }
.button-primary { color: var(--color-on-primary); background: var(--color-primary); }
.button-primary:hover { color: var(--color-on-primary); background: var(--color-primary-hover); }
@media (max-width: 45rem) {
 .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); }
 .authentication-control { grid-column: 3; }
 .appearance { grid-column: 4; }
 .auth-panel { padding: var(--space-5); }
 .auth-panel h1 { font-size: var(--font-size-h1-narrow); }
 .action-group { flex-direction: column; align-items: stretch; }
 .action-group button { width: 100%; }
}

@media (max-width: 25rem) {
 .site-header__inner { column-gap: var(--space-1); }
 .brand { font-size: var(--font-size-body); }
 .navigation-toggle, .authentication-control { font-size: var(--font-size-detail); }
 .navigation-toggle, .authentication-control button { padding-inline: var(--space-2); }
}

/* Global non-script guidance and private inbox, using the shared theme tokens. */
/* Semantic notice boxes: match docs/design-reference.html in both themes.
   Neutral handle previews are not notices until availability is known. */
.notice:not([data-availability]),
.notice:is([data-availability=available], [data-availability=unavailable], [data-availability=invalid]) { border: 1px solid currentColor; }
.notice:empty { border: 0; }
.notice--info { color: var(--color-info); background: var(--color-info-bg); }
.notice--success, .notice[data-state=success], .notice[data-availability=available] { color: var(--color-success); background: var(--color-success-bg); }
.notice--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.notice--error, .notice[data-state=error], .notice.community-feedback[role=alert],
.notice:is([data-availability=unavailable], [data-availability=invalid]) { color: var(--color-error); background: var(--color-error-bg); }

/* Offset the full-width notice frame without changing the header's text alignment. */
.javascript-notice .site-container { width: calc(100% + 2px); margin-inline: max(-1px, calc((100% - var(--content-max-width)) / 2)); padding-block: var(--space-2); overflow-wrap: anywhere; }
.has-notifications { grid-template-columns: auto minmax(0, 1fr) auto; }
.signed-in-controls { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: var(--space-2); min-width: 0; }
.notification-heading { overflow-wrap: anywhere; }
.has-notifications .appearance { grid-column: 5; }
.notification-bell { grid-column: 4; grid-row: 1; display: inline-flex; position: relative; align-items: center; justify-content: center; min-width: var(--control-min-height); min-height: var(--control-min-height); }
.notification-badge, .notification-counter-unavailable { position: absolute; inset-block-start: 0; inset-inline-end: 0; border-radius: var(--radius-control); padding-inline: var(--space-1); background: var(--color-primary); color: var(--color-on-primary); font-size: .75rem; }
.notification-counter-unavailable { background: var(--color-info-bg); color: var(--color-info); }
.notification-toolbar, .notification-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.notification-toolbar nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notification-filter, .notification-pagination a { display: inline-flex; align-items: center; min-height: var(--control-min-height); padding: var(--space-2) var(--space-3); }
.notification-filter[aria-current] { color: var(--color-selection-text); background: var(--color-selection-bg); border-radius: var(--radius-control); font-weight: var(--font-weight-bold); }
.notification-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.notification-entry { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: var(--radius-card); padding: var(--space-5); overflow-wrap: anywhere; }
.notification-entry.is-unread { border-inline-start: 4px solid var(--color-primary); }
.notification-content { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); color: var(--color-text); text-decoration: none; border-radius: var(--radius-control); }
.notification-content h2 { font-size: var(--font-size-h3); margin-block: 0 var(--space-2); }
.notification-content p { margin-block: 0 var(--space-3); white-space: pre-wrap; }
.notification-text { min-width: 0; flex: 1 1 10rem; }
.notification-type { flex: none; color: var(--color-info); padding: var(--space-2); background: var(--color-info-bg); border-radius: var(--radius-marker); }
.notification-type[data-type="SUCCESS"] { color: var(--color-success); background: var(--color-success-bg); }
.notification-type[data-type="WARNING"] { color: var(--color-warning); background: var(--color-warning-bg); }
.notification-content time { font-size: var(--font-size-detail); color: var(--color-text-secondary); }
.notification-unread { display: inline-block; margin-inline-start: var(--space-2); font-size: var(--font-size-detail); font-weight: var(--font-weight-bold); }
.notification-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); margin-block-start: var(--space-4); }
.notification-action[hidden] { display: none; }
#notification-status:empty { margin: 0; }
#notification-status[role="alert"] { color: var(--color-error); }
@media (max-width: 45rem) {
 .has-notifications { grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content); }
}
@media (max-width: 30rem) {
 .has-notifications .brand { grid-column: 1 / -1; }
 .has-notifications .navigation-toggle { grid-column: 2; grid-row: 2; }
 .has-notifications .signed-in-controls { grid-column: 3; grid-row: 2; }
 .has-notifications .primary-navigation { grid-row: 3; }
 .notification-entry { padding: var(--space-4); }
}

.account-menu { position: relative; }
.account-menu summary { cursor: pointer; padding: var(--space-3); border-radius: var(--radius-control); }
.account-menu__panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width-default) solid var(--color-border-decorative); background: var(--color-surface); border-radius: var(--radius-control); }
.account-menu__panel a, .account-menu__panel button { overflow-wrap: anywhere; }
.account-settings { max-width: 42rem; }
.account-settings .account-profile, .account-settings .account-preferences { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.account-preferences { min-width: 0; flex-wrap: wrap; }
.account-preferences select { min-width: 0; max-width: 100%; }
.account-preferences button { white-space: normal; }
.preference-status:empty { margin: 0; }

.account-menu[open] .account-menu__panel { position: absolute; z-index: 10; right: 0; width: min(15rem, 70vw); box-sizing: border-box; }
.account-menu summary { overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .has-notifications { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .has-notifications .navigation-toggle { grid-column: 1; justify-self: start; }
  .has-notifications .signed-in-controls { grid-column: 2; }
}

.preference-status[data-state] { flex-basis: 100%; padding: var(--space-3); border-radius: var(--radius-control); overflow-wrap: anywhere; }

/* Personal API token management, using the shared component palette. */
.token-page { max-width: 50rem; margin-inline: 0; padding-block: 0; }
.token-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.token-heading h1 { margin-top: 0; }
.token-heading > .button { flex-shrink: 0; }
.token-panel, .token-card { padding: var(--space-6); border: 1px solid var(--color-border-decorative); border-radius: var(--radius-card); background: var(--color-surface); }
.token-panel { margin-top: var(--space-6); }
.token-create-page { max-width: 44rem; }
.token-panel form > label:first-of-type { margin-top: 0; }
.token-panel label, .token-panel legend { font-weight: var(--font-weight-semibold); }
.token-panel label:not(.token-scope-choice) { display: block; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.token-panel input:not([type=checkbox]), .token-panel select, .token-panel textarea { width: 100%; min-width: 0; }
.token-panel textarea { min-height: 7rem; overflow-wrap: anywhere; }
.token-panel fieldset { border: 1px solid var(--color-border-decorative); border-radius: var(--radius-control); padding: var(--space-3); margin-block: var(--space-6); min-width: 0; }
.token-panel .field-help, .token-expiry, .token-scope-choice small { color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.token-panel .field-help { margin-top: var(--space-2); }
.token-scope-choice { display: flex; gap: var(--space-3); align-items: start; min-height: var(--control-min-height); padding-block: var(--space-3); }
.token-scope-choice input { flex-shrink: 0; margin-top: .4rem; }
.token-scope-choice small { display: block; font-weight: var(--font-weight-regular); }
.token-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.token-card { display: flex; gap: var(--space-5); align-items: start; justify-content: space-between; }
.token-details { min-width: 0; overflow-wrap: anywhere; }
.token-details h2 { display: inline; margin-inline-end: var(--space-3); font-size: var(--font-size-h3); }
.token-badge { display: inline-block; border-radius: var(--radius-marker); padding: var(--space-1) var(--space-2); font-size: var(--font-size-detail); background: var(--color-success-bg); color: var(--color-success); }
.token-badge[data-status=EXPIRES_SOON] { background: var(--color-warning-bg); color: var(--color-warning); }
.token-badge[data-status=EXPIRED], .token-badge[data-status=REVOKED] { background: var(--color-disabled-bg); color: var(--color-disabled-text); }
.token-scopes { padding-inline-start: var(--space-5); font-size: var(--font-size-detail); }
.token-pagination { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.token-feedback:not(:empty) { padding: var(--space-3); border-radius: var(--radius-control); }
button.button-outline-danger { border-color: var(--color-error); color: var(--color-error); background: var(--color-surface); }
button.button-danger { border-color: var(--color-error); background: var(--color-error); color: var(--color-on-error); }
.token-page dialog, .confirmation-dialog { width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow-y: auto; padding: var(--space-6); border: 1px solid var(--color-border-control); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.token-page dialog::backdrop, .confirmation-dialog::backdrop { background: rgb(0 0 0 / .5); }
@media (max-width: 45rem) { .token-heading, .token-card { flex-direction: column; } .token-page .action-group { flex-direction: column; align-items: stretch; } .token-page .action-group > * { width: 100%; text-align: center; } .token-panel { padding: var(--space-5); } }

/* Account and token content aligns with the shared shell; cards are at most 800px wide. */
main.site-container:has(> .token-page), main.site-container:has(> .account-settings-page) { padding-block: var(--space-12); }
.token-create-page, .account-settings-page { max-width: 50rem; }
.token-page h1, .account-settings-page > h1 { margin-block-end: var(--space-3); }
.token-heading { align-items: center; gap: var(--space-4); }
.token-heading p { margin: 0; }
.token-panel { margin-block-start: var(--space-6); }
.account-settings-page > p { margin-block-end: var(--space-6); }
.account-panel { max-width: none; margin-block-end: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border-decorative); border-radius: var(--radius-card); background: var(--color-surface); }
.account-panel h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
.account-panel p:last-child { margin-bottom: 0; }
.settings-link { display: inline-flex; align-items: center; min-height: var(--control-min-height); font-weight: var(--font-weight-bold); }
.token-card { align-items: center; gap: var(--space-4); }
.token-card > button { flex-shrink: 0; font-weight: var(--font-weight-regular); }
.token-details h2 { font-size: var(--font-size-body); margin-inline-end: 0; line-height: var(--line-height-body); }
.token-badge { padding: .15rem .6rem; }
.token-metadata { color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.token-scopes { display: inline; padding: 0; margin: 0; list-style: none; }
.token-scopes li { display: inline; }
.token-scopes li + li::before { content: " · "; }
.token-list { margin-block: 0; }
button.button-outline-danger { border-color: var(--color-border-control); }
.token-field { margin-bottom: var(--space-5); }
.token-panel .token-field > label { margin: 0; }
.token-field input:not([type=checkbox]), .token-field select { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); }
.token-panel .field-help { display: block; margin-block: var(--space-2) 0; }
.token-info { padding: 0; margin-block: var(--space-2) 0; border-radius: 0; background: transparent; color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.token-panel fieldset { margin: 0 0 var(--space-6); }
.token-scope + .token-scope { margin-top: var(--space-4); }
.token-scope-choice { align-items: center; padding-block: 0; gap: .65rem; }
.token-scope-choice input { width: 1.25rem; height: 1.25rem; margin: 0; }
.token-page .action-group { margin-top: 0; gap: var(--space-4); }
.token-page .button-primary { border-color: transparent; padding-inline: var(--space-4); }
@media(min-width: 37.501rem) { .token-heading, .token-card { flex-direction: row; } .token-page .action-group { flex-direction: row; align-items: center; } .token-page .action-group > * { width: auto; } }
@media(max-width: 37.5rem) { .token-heading, .token-card { flex-direction: column; align-items: stretch; } .token-heading > .button, .token-card > button { width: 100%; } }
@media(max-width: 45rem) {
 main.site-container:has(> .token-page), main.site-container:has(> .account-settings-page) { padding-inline: var(--space-4); padding-block: var(--space-8); }
 .token-panel { padding: var(--space-6); }
}
/* Shared header controls use the reference's compact, wrapping row. */
.site-header__inner { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-3); }
.site-header .brand { font-size: 1.25rem; margin-inline-end: auto; }
.primary-navigation { margin-inline-start: auto; }
.signed-in-controls { display: contents; }
.appearance-toggle, .navigation-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-min-height); border-color: transparent; background: transparent; }
.account-menu summary { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--control-min-height); padding: var(--space-2) var(--space-3); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); color: var(--color-primary); text-decoration: none; list-style: none; }
.account-menu__chevron { width: var(--icon-size-detail); height: var(--icon-size-detail); flex-shrink: 0; }
.account-menu[open] > summary { background: var(--color-selection-bg); }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu[open] .account-menu__panel { width: 11rem; padding: .35rem; gap: 0; border-color: var(--color-border-control); }
.account-menu__panel a, .account-menu__panel button { display: flex; align-items: center; width: 100%; min-height: var(--control-min-height); padding: .35rem .65rem; text-align: start; }
.account-menu__panel button { border: 0; background: transparent; color: var(--color-primary); font-weight: var(--font-weight-regular); }
.account-menu__panel a:hover, .account-menu__panel button:hover { background: var(--color-selection-bg); }
.preferences { flex-basis: 100%; }
.site-footer__inner { padding-block: var(--space-3); font-size: var(--font-size-detail); }
.site-footer a { padding: 0; min-height: auto; }
@media(max-width: 45rem) {
 .site-header__inner { padding-inline: var(--space-4); gap: var(--space-1); }
 .primary-navigation { order: 1; flex-basis: 100%; margin-inline-start: 0; }
 .primary-navigation:has(ul[hidden]) { display: none; }
}
.account-settings-page, .token-page { min-width: 0; overflow-wrap: anywhere; }
.notification-bell { background: var(--color-selection-bg); border-radius: var(--radius-control); text-decoration: none; }
.token-details h2 { margin-inline-end: var(--space-1); }
.token-panel .token-field input:not([type="hidden"]):not([type="checkbox"]) { padding: var(--space-2) var(--space-3); }
.site-header .authentication-control { font-size: var(--font-size-body); }
@media(max-width: 25rem) {
 .has-notifications .brand { flex-basis: 100%; }
 .has-notifications .authentication-control { margin-inline-start: auto; }
}
@media(max-width: 45rem) { .site-footer__inner { padding-inline: var(--space-4); } }

/* Community creation follows the supplied centred form panel. */
main.site-container:has(> .community-create) { padding-block: var(--space-12); }
.community-create { max-width: 46rem; margin-inline: auto; padding: var(--space-6); background: var(--color-surface); border: var(--border-width-default) solid var(--color-border-decorative); border-radius: var(--radius-card); overflow-wrap: anywhere; }
.community-create h1 { font-size: var(--font-size-h1-mobile); line-height: 1.2; margin: 0 0 var(--space-3); }
.community-create > p { margin-block-end: var(--space-6); }
.community-field { min-width: 0; margin-block-start: var(--space-5); }
.community-field label { display: block; font-weight: var(--font-weight-semibold); }
.community-field input:not([type=range]), .community-field textarea, .community-field select { display: block; width: 100%; min-width: 0; min-height: var(--control-min-height); margin-block-start: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; }
.community-field textarea { resize: vertical; }
.community-field input::placeholder, .community-field textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }
.community-field input[type=file] { font-size: var(--font-size-detail); }
.community-field input::file-selector-button { font: inherit; color: inherit; background: var(--color-surface); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-control); padding: var(--space-1) var(--space-2); margin-inline-end: var(--space-2); }
.community-grid > * { min-width: 0; }
.community-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.community-create .field-help { color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.community-field .field-help { margin-block: var(--space-1) 0; }
.community-handle-preview { margin-block-start: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-background); border-radius: var(--radius-control); }
.community-policy-note { margin-block-start: var(--space-3); }
.community-create .action-group { margin-block-start: var(--space-6); }
.community-create .button-primary { border-color: transparent; padding-inline: var(--space-4); }
.community-feedback:empty { display: none; }
.community-feedback:not(:empty) { margin-block-start: var(--space-4); padding: var(--space-4); border-radius: var(--radius-control); }
.community-feedback p { margin: 0; }
.community-field [aria-invalid=true] { border-color: var(--color-error); }
.community-crop-preview { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: contain; margin-block: var(--space-3); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-control); touch-action: none; cursor: move; }
.community-field fieldset { min-width: 0; border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-control); padding: var(--space-3); }
.community-field input[type=range] { width: 100%; min-height: var(--control-min-height); margin: 0; accent-color: var(--color-primary); }
@media(max-width: 45rem) { main.site-container:has(> .community-create) { padding-block: var(--space-8); padding-inline: var(--space-4); } .community-create .button-primary { width: 100%; } }
@media(max-width: 37.5rem) { .community-grid { grid-template-columns: 1fr; gap: 0; } }
@media(max-width: 21.875rem) { .community-create h1 { font-size: var(--font-size-h1-narrow); } }

/* Community detail: shared shell, cover and independent saved settings. */
main.site-container:has(> .community-detail) { padding-block: var(--space-12); }
.community-detail { min-width: 0; }
.community-created-notice { margin: 0 0 var(--space-6); padding: var(--space-4); border-radius: var(--radius-control); }
.community-detail-card, .community-detail-panel { border: 1px solid var(--color-border-decorative); border-radius: var(--radius-card); background: var(--color-surface); }
.community-detail-card { overflow: hidden; }
.community-detail-cover { position: relative; aspect-ratio: 3 / 1; background: linear-gradient(110deg,var(--color-hero-start),var(--color-hero-end)); color: var(--color-primary); display: grid; place-items: center; }
.community-detail-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-cover-icon { width: 15%; height: auto; min-width: 48px; }
.community-detail-identity { padding: 0 var(--space-6) var(--space-6); }
.community-detail-avatar { position: relative; margin-block-start: -44px; width: 88px; height: 88px; border: 4px solid var(--color-surface); border-radius: var(--radius-card); background: var(--color-selection-bg); color: var(--color-selection-text); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); display: grid; place-items: center; overflow: hidden; }
.community-detail-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.community-detail-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-block-start: var(--space-6); }
.community-detail-text { flex: 1 1 24rem; min-width: 0; }
.community-detail-identity h1 { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
/* Negative row gutters clip the decorative dot whenever its count wraps. */
.community-handle-line { min-width: 0; overflow: hidden; padding: 6px; margin: -6px; }
.community-handle-items { display: flex; align-items: center; flex-wrap: wrap; margin-inline-start: calc(-1 * var(--space-4)); }
.community-handle-copy { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding-inline-start: var(--space-4); }
.community-full-handle, .community-member-count { font-size: var(--font-size-detail); line-height: var(--line-height-detail); color: var(--color-text-secondary); }
.community-member-count { position: relative; padding-inline-start: var(--space-4); white-space: nowrap; }
.community-member-separator { position: absolute; inset-inline-start: .375rem; }
.community-copy-handle .icon { width: var(--icon-size-detail); height: var(--icon-size-detail); }
.community-handle-items > .community-copy-status:not(:empty) { margin-inline-start: var(--space-3); }
.community-full-handle { min-width: 0; overflow-wrap: anywhere; user-select: text; }
.community-copy-handle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-min-height); padding: var(--space-2); border-color: transparent; background: transparent; flex-shrink: 0; }
.community-copy-status { color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.community-detail-panels { display: grid; gap: var(--space-6); margin-block-start: var(--space-4); }
.community-detail-panels.has-about { grid-template-columns: minmax(0,2fr) minmax(18rem,1fr); }
.community-detail-panel { min-width: 0; overflow-wrap: anywhere; padding: var(--space-6); }
.community-detail-panel h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-h2); }
.community-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-detail-panel dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-3); margin: 0; }
.community-detail-panel dt { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.community-detail-panel dd { margin: 0; overflow-wrap: anywhere; }
@media(max-width: 45rem) {
 main.site-container:has(> .community-detail) { padding-block: var(--space-8); padding-inline: var(--space-4); }
 .community-member-count { flex-basis: 100%; }
 .community-member-separator { display: none; }
 .community-detail-panels.has-about { grid-template-columns: minmax(0,1fr); }
 .community-detail-identity { padding: 0 var(--space-4) var(--space-6); }
 .community-detail-avatar { width: 64px; height: 64px; margin-block-start: -32px; }
 .community-detail-heading { flex-direction: column; align-items: flex-start; margin-block-start: var(--space-4); }
 .community-detail-text { flex: auto; width: 100%; }
 .community-detail-identity h1 { font-size: var(--font-size-h1-mobile); }
}

/* Community directory: shared shell, native search and numbered navigation. */
.directory-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-6); }
.directory-heading h1 { margin-bottom:var(--space-3); }
.directory-heading p { margin:0; }
.directory-heading > .button-primary { flex-shrink:0; border-color:transparent; }
.directory-search { display:flex; align-items:end; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--color-border-decorative); border-radius:var(--radius-card); background:var(--color-surface); }
.directory-search > div { flex:1; min-width:0; }
.directory-search label { display:block; font-weight:var(--font-weight-semibold); }
.directory-search .field-help { margin:var(--space-1) 0 var(--space-3); }
.directory-search input { width:100%; }
.directory-count { color:var(--color-text-secondary); margin:var(--space-6) 0 var(--space-4); }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.directory-card { display:block; color:var(--color-text); text-decoration:none; min-width:0; border:1px solid var(--color-border-decorative); border-radius:var(--radius-card); background:var(--color-surface); overflow-wrap:anywhere; }
.directory-cover { aspect-ratio:3/1; display:grid; place-items:center; background:linear-gradient(120deg,var(--color-hero-start),var(--color-hero-end)); color:var(--color-primary); overflow:hidden; border-radius:var(--radius-card) var(--radius-card) 0 0; }
.directory-cover img { width:100%; height:100%; object-fit:cover; }
.directory-cover .community-cover-icon { width:25%; height:auto; }
.directory-card-content { padding:0 var(--space-4) var(--space-4); }
.directory-avatar { position:relative; margin-top:calc(-1 * var(--space-7)); margin-bottom:var(--space-3); width:3.5rem; height:3.5rem; border:var(--space-1) solid var(--color-surface); border-radius:var(--radius-card); background:var(--color-selection-bg); color:var(--color-selection-text); display:grid; place-items:center; font-weight:var(--font-weight-bold); overflow:hidden; }
.directory-avatar img { width:100%; height:100%; object-fit:cover; }
.directory-card .community-card-title { font-size:var(--font-size-h3); line-height:var(--line-height-h3); margin:0 0 var(--space-1); min-height:var(--control-min-height); align-content:center; }
.directory-card:hover { color:var(--color-text); }
@media (hover: hover) {
 .directory-card:hover:not(:focus-visible) { outline:2px solid var(--color-primary); outline-offset:0; }
}
.directory-handle { font-size:var(--font-size-detail); color:var(--color-text-secondary); margin:0 0 var(--space-3); }
.directory-excerpt { margin:0; }
.directory-pagination { margin-top:var(--space-8); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); }
.directory-page-links,.directory-numbers { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.directory-page-links a,.directory-page-links > span[aria-disabled] { min-height:var(--control-min-height); min-width:var(--control-min-height); padding:var(--space-2) var(--space-3); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-control); }
.directory-page-links [aria-current] { background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--font-weight-bold); text-decoration:none; }
.directory-page-links [aria-disabled] { color:var(--color-text-secondary); }
.directory-page-indicator { display:none; }
.directory-jump { display:none; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.directory-jump.has-gaps { display:flex; }
.directory-jump input[type=number] { width:5rem; }
.directory-error { border-radius:var(--radius-control); padding:var(--space-4); }
@media(max-width:60rem) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:45rem) {
 .directory-grid { grid-template-columns:minmax(0,1fr); }
 .directory-heading,.directory-search { align-items:stretch; flex-direction:column; }
 .directory-heading > .button-primary { text-align:center; }
 .directory-numbers { display:none; }
 .directory-page-indicator { display:inline; }
 .directory-jump { display:flex; }
 .directory-pagination,.directory-page-links { justify-content:center; }
}

.directory-search input,.event-directory-location select,.directory-jump input[type=number] { font:inherit; color:var(--color-text); background:var(--color-surface); min-height:var(--control-min-height); border:1px solid var(--color-border-control); border-radius:var(--radius-control); padding:var(--space-2) var(--space-3); min-width:0; max-width:100%; }
.directory-search button { border-color:transparent; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.directory-search label { margin-bottom:var(--space-2); }
.directory-search input::placeholder { color:var(--color-text-secondary); opacity:1; }

/* Home uses the same grid and cards as the community directory. */
.home-intro { margin-bottom:var(--space-12); }
.home-intro p { color:var(--color-text-secondary); }
.home-upcoming-events { margin-bottom:var(--space-12); }
.home-discovery-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-6); margin-bottom:var(--space-4); }
.home-discovery-heading h2 { font-size:var(--font-size-h2); line-height:var(--line-height-h2); margin:0; }
.home-directory-link { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--control-min-height); font-weight:var(--font-weight-bold); }
.home-discovery-unavailable { padding:var(--space-4); border-radius:var(--radius-control); }

/* Community membership uses the shared panel, buttons and confirmation dialog. */
.community-membership { margin-top:var(--space-6); }
.community-membership .button-primary { border-color:transparent; }
.community-membership .membership-explanation { color:var(--color-text-secondary); }
.confirmation-dialog .form-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-4); margin-bottom:0; }
.confirmation-dialog h2 { font-size:var(--font-size-h2); margin-top:0; }
.membership-feedback, .membership-error { padding:var(--space-3) var(--space-4); border-radius:var(--radius-control); overflow-wrap:anywhere; }

.account-profile .field-help, .auth-form .field-help { color: var(--color-text-secondary); font-size: var(--font-size-detail); margin: 0; }
.account-profile .field-error { margin: 0; }
.account-profile button { white-space: normal; }

.account-notification-preferences { display:block; }
.notification-preferences-table { width:100%; border-collapse:collapse; margin-block:var(--space-4); }
.notification-preferences-table th, .notification-preferences-table td { border-block-end:1px solid var(--color-border-decorative); padding:var(--space-2) var(--space-1); text-align:start; overflow-wrap:anywhere; }
.notification-preferences-table thead th { color:var(--color-text-secondary); font-size:var(--font-size-detail); }
.notification-preferences-table tbody th { font-weight:var(--font-weight-semibold); }
.notification-preferences-table th small { display:block; font-weight:var(--font-weight-regular); color:var(--color-text-secondary); font-size:var(--font-size-detail); }
.notification-preferences-table th:first-child { width:auto; }
.notification-preferences-table th:not(:first-child), .notification-preferences-table td { width:5rem; text-align:center; }
.notification-channel { display:inline-flex; align-items:center; justify-content:center; min-width:var(--control-min-height); min-height:var(--control-min-height); cursor:pointer; }
.notification-channel input { width:1.125rem; height:1.125rem; accent-color:var(--color-primary); margin:0; }

.notification-channel-label { display:none; }
@media(max-width:25rem) {
 .notification-preferences-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
 .notification-preferences-table tbody { display:block; }
 .notification-preferences-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .notification-preferences-table tbody th { display:block; grid-column:1 / -1; }
 .notification-preferences-table tbody td { display:block; min-width:0; width:auto; }
 .notification-preferences-table th:first-child { width:auto; }
 .notification-channel { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
 .notification-channel-label { display:block; font-size:var(--font-size-detail); }
}

/* Shared request status and review list; use existing theme semantics. */
.request-status { display:inline-block; padding:var(--space-1) var(--space-3); border-radius:var(--radius-marker); background:var(--color-info-bg); color:var(--color-info); font-size:var(--font-size-detail); font-weight:var(--font-weight-bold); }
.request-status.approved { background:var(--color-success-bg); color:var(--color-success); }
.request-status.declined { background:var(--color-warning-bg); color:var(--color-warning); }
.membership-request-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) 0; border-bottom:var(--border-width-default) solid var(--color-border-decorative); }
.membership-request-row p { color:var(--color-text-secondary); font-size:var(--font-size-detail); margin:0; }
.membership-request-row > div { min-width:0; overflow-wrap:anywhere; }
.membership-request-row .action-group { flex-wrap:wrap; }
[data-channel-hint] { color:var(--color-text-secondary); }
@media (max-width:720px) { .membership-request-row { align-items:flex-start; flex-direction:column; } }

.request-review .community-detail-panel { max-width:50rem; }
.membership-request-row:first-of-type { border-top:var(--border-width-default) solid var(--color-border-decorative); }
.membership-request-row:last-of-type { border-bottom:0; }

.request-review { margin-top:0; overflow-wrap:anywhere; }

.invitation-page { margin-top: 0; overflow-wrap: anywhere; }
.invitation-page > .community-detail-panel { max-width:50rem; margin-block: var(--space-6); }
.invitation-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; }
.invitation-form label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); }
.invitation-form input { width: 100%; min-height: var(--control-min-height); }
.invitation-card h2 a { color: inherit; text-decoration: none; }
@media (max-width: 600px) { .invitation-form { grid-template-columns: minmax(0, 1fr); } .invitation-form .button { justify-self: end; } }

.invitation-visibility { display:inline-flex; padding:var(--space-1) var(--space-2); border-radius:var(--radius-marker); background:var(--color-info-bg); color:var(--color-info); font-size:var(--font-size-detail); }

/* Owner management shares the Membership row and the existing secondary actions. */
.community-membership-panels { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin-block-start:var(--space-8); }
.community-membership-panels.has-management { grid-template-columns:repeat(2,minmax(0,1fr)); }
.community-membership-panels > .community-membership { margin-top:0; }
.community-management-action + .community-management-action { margin-block-start:var(--space-5); }
.community-management-action .button { color:var(--color-primary); gap:var(--space-2); flex-wrap:wrap; justify-content:flex-start; max-width:100%; text-align:start; }
.community-management-action p { color:var(--color-text-secondary); font-size:var(--font-size-detail); margin:var(--space-1) 0 0; }
.community-pending-badge { display:inline-block; border-radius:var(--radius-marker); padding:var(--space-1) var(--space-2); background:var(--color-selection-bg); color:var(--color-selection-text); font-size:var(--font-size-detail); font-weight:var(--font-weight-bold); }
@media (max-width:720px) { .community-membership-panels.has-management { grid-template-columns:minmax(0,1fr); } }

/* Shared immutable handle display in Profile. */
.profile-handle-line { display:flex; align-items:center; gap:var(--space-2); }
.profile-handle-line input { min-width:0; flex:1; }
.profile-handle-line .community-copy-handle { flex-shrink:0; border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-control); }
.profile-setup #setup-handle-status { margin-top:var(--space-2); }

.auth-panel--profile { max-width:28rem; padding:var(--space-6); }
@media (max-width:720px) { .auth-panel--profile { padding:var(--space-5); } }

.profile-setup input:not([type="hidden"]) { padding:var(--space-2) var(--space-3); }

/* Event creation uses the shared panel, field and action primitives. */
.event-create > h1 { margin-block-start: var(--space-4); }
.event-create fieldset { min-width: 0; margin: var(--space-6) 0 0; padding: 0 var(--space-4) var(--space-4); border: var(--border-width-default) solid var(--color-border-decorative); border-radius: var(--radius-control); }
.event-create legend { padding-inline: var(--space-2); font-weight: var(--font-weight-bold); }
.event-location-modes { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.event-location-modes label { display: inline-flex; align-items: center; min-height: var(--control-min-height); gap: var(--space-2); }
.event-location-modes input { accent-color: var(--color-primary); }
.event-field-error { color: var(--color-error); font-size: var(--font-size-detail); margin-block: var(--space-1) 0; overflow-wrap: anywhere; }
.event-field-error:empty { display: none; }
.event-warning, .event-success, .event-error-summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.event-create [aria-invalid=true] { border-color: var(--color-error); }
.event-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); margin-block-start: var(--space-6); }
.event-actions > a { display: inline-flex; align-items: center; min-height: var(--control-min-height); }
.event-entry { display: flex; flex: 0 0 auto; max-width: 100%; }
@media(max-width: 37.5rem) { .event-actions { flex-direction: column; align-items: stretch; } .event-actions > a { justify-content: center; } }

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

.event-detail { display: grid; gap: var(--space-4); overflow-wrap: anywhere; }
.event-detail > a {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 justify-self: start;
 min-height: var(--control-min-height);
}
.event-detail-intro {
 padding: var(--space-8);
 background-image: linear-gradient(115deg, var(--color-hero-start), var(--color-hero-end));
}
.event-detail-intro h1 { margin-block: var(--space-2); }
.event-detail-intro p { margin-block: 0; }
.event-detail-mode {
 display: inline-block;
 padding: var(--space-1) var(--space-3);
 border-radius: var(--radius-marker);
 background: var(--color-selection-bg);
 color: var(--color-selection-text);
 font-size: var(--font-size-detail);
}
.event-detail-secondary { color: var(--color-text-secondary); font-size: var(--font-size-detail); }
.event-detail-panels { display: grid; align-items: start; gap: var(--space-6); }
.event-detail-panels p:last-child { margin-bottom: 0; }
@media (min-width: 721px) {
 .event-detail-panels.has-about { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
 .event-detail-intro { padding: var(--space-4); }
}

.event-directory-search {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 row-gap: var(--space-2);
}
.event-directory-search .field-help { margin: 0; }
.event-directory-location select { width: 100%; }
.directory-event-badge {
 display: table;
 position: relative;
 margin-block: calc(-1 * var(--space-6)) var(--space-3);
 padding: var(--space-2) var(--space-3);
 border: var(--border-width-default) solid var(--color-border-decorative);
 border-radius: var(--radius-marker);
 background: var(--color-surface);
 color: var(--color-primary);
 font-weight: var(--font-weight-bold);
}
@media (min-width: 60rem) {
 :is(.community-directory, .event-directory, .home-discovery) .directory-card { min-height: 18rem; }
}
@media (width > 45rem) {
 .event-directory-search { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) auto; }
 .event-directory-search .field-help { grid-area: 2 / 1; }
}

.community-events { margin-top: var(--space-8); }
.community-event-archive > h1 { margin-top: var(--space-4); }
.community-event-archive .directory-grid { margin-top: var(--space-6); }
@media (min-width: 60rem) {
 :is(.community-events, .community-event-archive) .directory-card { min-height: 18rem; }
}

/* Shared accepted-operation notice and Owner deletion controls. */
.info-notice { position:relative; padding:var(--space-4); padding-inline-end:var(--space-12); margin-block-end:var(--space-6); border-radius:var(--radius-card); overflow-wrap:anywhere; }
.info-notice--static { padding-inline-end:var(--space-4); }
.info-notice h2 { margin:0 0 var(--space-1); font-size:var(--font-size-h3); }
.info-notice p { margin:0; }
.info-notice > button { position:absolute; inset-block-start:var(--space-2); inset-inline-end:var(--space-2); display:grid; place-items:center; min-width:var(--control-min-height); min-height:var(--control-min-height); padding:var(--space-2); border:0; background:transparent; color:inherit; }
.community-detail-identity { position:relative; }
.community-actions { position:absolute; inset-block-start:var(--space-3); inset-inline-end:var(--space-6); z-index:1; }
.community-actions-trigger { display:grid; place-items:center; min-height:var(--control-min-height); min-width:var(--control-min-height); padding:var(--space-2); border:1px solid var(--color-border-control); border-radius:var(--radius-control); background:var(--color-surface); color:var(--color-primary); }
.community-actions-options { position:fixed; inset:auto; margin:0; padding:var(--space-1); max-width:calc(100vw - 2rem); border:1px solid var(--color-border-control); border-radius:var(--radius-control); background:var(--color-surface); color:var(--color-text); }
.community-actions-options [role="separator"] { margin-block:var(--space-1); border-block-start:1px solid var(--color-border-decorative); }
.community-actions-options button { display:block; width:100%; border:0; background:transparent; color:var(--color-error); text-align:start; }
.community-actions-options button:hover { background:var(--color-error-bg); }
.community-deletion-dialog { width:min(36rem,calc(100% - 2rem)); }
.community-deletion-dialog h2 { margin-block-start:0; }
.community-deletion-dialog label { display:block; font-weight:var(--font-weight-semibold); }
.destructive-warning { padding:var(--space-4); margin-block-end:var(--space-6); border-radius:var(--radius-control); }
.destructive-warning p { margin:0; }
.community-deletion-status:empty, .community-deletion-dialog .preference-status:empty { display:none; }
@media(max-width:45rem) { .community-deletion-dialog .action-group { flex-wrap:wrap; } }

button.button-danger:disabled { border-color:var(--color-disabled-bg); background:var(--color-disabled-bg); color:var(--color-disabled-text); cursor:default; }

.event-detail-side { display:grid; gap:var(--space-6); min-width:0; }
.event-registration button { max-width:100%; white-space:normal; }
.event-registration h2[tabindex="-1"]:focus-visible { outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:var(--focus-ring-offset); }
.event-registration [aria-disabled="true"] { opacity:.7; cursor:progress; }
@media (max-width: 450px) { .event-registration > button { width:100%; } }

/* Event lifecycle controls reuse the shared action menu and dialog primitives. */
.event-detail-intro.has-event-actions { position:relative; padding-inline-end:calc(var(--control-min-height) + var(--space-6) * 2); }
.event-deletion-actions { position:absolute; inset-block-start:var(--space-6); inset-inline-end:var(--space-6); }
.event-deletion-dialog { padding:min(var(--space-6), 5vw); }
.event-deletion-dialog [role="status"]:empty { display:none; }
.event-deletion-dialog .action-group { flex-wrap:wrap; }
.event-deletion-dialog button, .event-deletion-actions .community-actions-options button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.event-deletion-actions .community-actions-options { max-height:calc(100dvh - 2rem); overflow:auto; }
@media(max-width:45rem) {
 .event-deletion-actions { inset-block-start:var(--space-4); inset-inline-end:var(--space-4); }
 .event-detail-intro.has-event-actions { padding-inline-end:calc(var(--control-min-height) + var(--space-4) * 2); }
}

/* Shared event status and cancellation field. */
.event-status-badge { display:inline-flex; align-items:center; padding:var(--space-1) var(--space-3); border-radius:var(--radius-marker); background:var(--color-error-bg); color:var(--color-error); font-size:var(--font-size-detail); font-weight:var(--font-weight-bold); }
.event-cancellation-reason { white-space:pre-wrap; overflow-wrap:anywhere; }
.event-cancelled-status { margin-block-end:var(--space-2); }
.event-cancellation-field { margin-block:var(--space-6); }
.event-cancellation-field label, .event-cancellation-field small { display:block; }
.event-cancellation-field textarea { display:block; width:100%; max-width:100%; min-height:6rem; resize:vertical; font:inherit; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border-control); border-radius:var(--radius-control); padding:var(--space-3); margin-block:var(--space-2); }
.event-cancellation-field small { color:var(--color-text-secondary); font-size:var(--font-size-detail); }
.event-cancellation-field textarea[aria-invalid="true"] { border:var(--border-width-error) solid var(--color-error); }
.event-cancellation-field .field-error:empty { display:none; }

/* Private attendee tables reuse shared panels, controls and pagination. */
.community-actions-options .event-attendees-link, .community-actions-options .event-edit-link { display:block; width:100%; min-height:var(--control-min-height); padding:var(--space-2) var(--space-4); color:var(--color-primary); text-decoration:none; }
.community-actions-options .event-attendees-link:hover, .community-actions-options .event-edit-link:hover { background:var(--color-selection-bg); }
.event-attendees { overflow-wrap:anywhere; }
.event-attendees > p { margin-block:var(--space-3) var(--space-6); }
.attendee-back { display:inline-block; margin-block-end:var(--space-4); }
.attendee-search { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; margin-block-end:var(--space-4); }
.attendee-search label { grid-column:1; grid-row:1; }
.attendee-search input { grid-column:1; grid-row:2; width:100%; }
.attendee-search small { grid-column:1; grid-row:3; color:var(--color-text-secondary); font-size:var(--font-size-detail); }
.attendee-search button { grid-column:2; grid-row:2; }
.attendee-section { margin-block-end:var(--space-4); }
.attendee-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.attendee-table th,.attendee-table td { padding:var(--space-3); text-align:start; vertical-align:top; overflow-wrap:anywhere; border-block-end:1px solid var(--color-border-decorative); }
.attendee-table thead { background:var(--color-background); }
.attendee-table td { color:var(--color-text-secondary); }
@media(max-width:45rem) {
 .attendee-search { grid-template-columns:minmax(0,1fr); }
 .attendee-search button { grid-column:1; grid-row:4; justify-self:end; }
 .attendee-table,.attendee-table tbody,.attendee-table tr { display:block; }
 .attendee-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
 .attendee-table tr { padding-block:var(--space-3); border-block-end:1px solid var(--color-border-decorative); }
 .attendee-table tbody th,.attendee-table td { display:block; width:100%; border:0; padding:var(--space-1) 0; }
 .attendee-table tbody th::before,.attendee-table td::before { content:attr(data-label) ": "; color:var(--color-text); font-weight:var(--font-weight-semibold); }
}

.event-calendar-action { margin-block:var(--space-6); }
.event-calendar-action .button { gap:var(--space-2); color:var(--color-primary); }

/* Shared community subscription action and native dialog. */
.community-event-actions {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);min-width:0;}
.community-event-actions [data-calendar-open] {display:inline-flex;align-items:center;gap:var(--space-2);}
.calendar-dialog {padding:min(var(--space-6),5vw);width: min(36rem, calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;box-sizing:border-box;}
.calendar-dialog [hidden] {display:none;}
.calendar-url {display:flex;align-items:center;gap:var(--space-2);margin-block:var(--space-2) var(--space-4);}
.calendar-url input {min-width:0;flex:1;width:100%;font:inherit;padding:var(--space-2) var(--space-3);min-height:var(--control-min-height);border:1px solid var(--color-border-control);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);}
.calendar-revoke {color:var(--color-error);}
.calendar-dialog .dialog-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);}
@media (max-width: 35rem) {.community-event-actions {justify-content:flex-start;} .calendar-dialog .dialog-actions {flex-direction:column;align-items:stretch;}}

.event-edit-comparison dd { margin-inline-start: 0; margin-block-end: var(--space-4); overflow-wrap: anywhere; }
.event-edit-comparison dd span { display: block; }
.event-edit-comparison dt { font-weight: 700; }
.community-actions-options [aria-disabled="true"] { color: var(--color-disabled-text); cursor: default; }