/* Shared page geometry follows the Stays layout. Module styles own their content. */
:root {
    --page-width: 1280px;
    --page-gutter: 4%;
    --hero-gutter: 6%;
}

main.page-shell,
body > .topbar,
body > footer {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    min-width: 0;
}

body > .topbar {
    padding-inline: var(--page-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.topbar > .brand {
    flex-shrink: 0;
}

.topbar > nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 14px 22px;
    min-width: 0;
}

.topbar > .header-account {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-account form {
    margin: 0;
}

@media (max-width: 700px) {
    .topbar > .header-account {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .header-account form { order: -1; }
    .topbar .header-account .button { padding: 7px 9px; font-size: 10px; }
}

body > footer {
    padding-inline: var(--page-gutter);
}

main.page-shell > :is(#stays-app, #bookstore-app, #tv-app, #who-app,
    #social-app, #security-app, #news-app, #meeting-app, #events-app) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-width: 0;
}

.page-shell > .hero {
    margin-inline: 0;
    padding-inline: var(--hero-gutter);
    border-radius: 24px;
}

.page-shell :is(.stay-hero, .book-hero, .tv-hero, .who-hero,
    .security-hero, .news-hero, .meetings-hero, .events-hero, .social-brand) {
    padding-inline: var(--hero-gutter);
}

.page-shell :is(.stay-body, .book-panel, .tv-panel, .who-panel,
    .events-panel, .news-toolbar, .community-section) {
    padding-inline: var(--page-gutter);
}

.page-shell > :is(.article, .editor) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
}

.page-shell > .login-wrap {
    margin: 0 0 48px;
    width: 100%;
}

.page-shell :is(.login-form, .login-story) {
    min-width: 0;
}

.page-shell > .join {
    margin-inline: 0;
    width: 100%;
}

.page-shell > .hero + .join {
    margin-top: 24px;
}

.join-platforms {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.join-platform-link { border-radius: 12px; }
.join-platform-link:hover .join-platform { background: var(--green); }
.app-settings form { max-width: 760px; }

.admin-dashboard { padding: 28px var(--page-gutter) 48px; }
.admin-intro h1 { font-size: clamp(32px, 4vw, 48px); margin: 12px 0; }
.admin-intro p { color: var(--muted); line-height: 1.6; }
.admin-shortcuts { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.admin-shortcuts a { padding: 10px 16px; border-radius: 10px; background: #e4eee8; color: var(--green); }
.admin-shortcuts > a { display: block; }
.admin-panel { background: white; border: 1px solid #e1e8e2; border-radius: 20px; padding: 28px; margin: 24px 0; scroll-margin-top: 20px; }
.admin-panel h2 { font-size: 28px; }
.admin-panel button[type=submit] { margin-top: 24px; }
.admin-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-module-card { padding: 22px; background: #f6f9f6; border: 1px solid #e1e8e2; border-radius: 14px; }
.admin-module-card:hover { border-color: var(--green); }
.admin-module-card h3 { font-size: 21px; }
.admin-module-card p { line-height: 1.6; color: var(--muted); }
.admin-module-card span { color: var(--green); font-weight: 700; }
.admin-workspace-heading { padding: 24px var(--page-gutter); }
.admin-workspace-heading h1 { font-size: 36px; margin: 12px 0; }
.admin-workspace-heading .back { margin-bottom: 12px; }
#stay-detail .stay-gallery .stay-photo-open { width: 100%; min-width: 100%; padding: 0; border: 0; background: transparent; scroll-snap-align: start; cursor: zoom-in; }
#stays-app .stay-lightbox { width: min(1200px, 96vw); max-width: 96vw; max-height: 96vh; border: 0; border-radius: 18px; padding: 20px; background: #101512; color: white; }
.stay-lightbox::backdrop { background: #000e; }
.stay-lightbox-bar { display: flex; align-items: center; gap: 18px; }
.stay-lightbox-bar h2 { flex: 1; font-size: 20px; }
.stay-lightbox-bar p { white-space: nowrap; }
.stay-lightbox > img { display: block; width: 100%; height: min(70vh, 800px); object-fit: contain; }
.stay-lightbox-controls { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.admin-user-search { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.admin-user-search label { flex: 1 1 220px; margin: 0; }
.admin-user-search a { padding: 14px 0; }
.admin-user-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid #e1e8e2; }
.admin-user-row > div { min-width: 0; overflow-wrap: anywhere; }
.admin-user-row h3 { margin: 0 0 6px; }
.admin-user-row p { margin: 0 0 8px; }
.admin-user-row .button { flex-shrink: 0; }
.admin-user-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.admin-user-roles span { background: #e4eee8; color: var(--green); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.admin-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.admin-pagination > a { display: inline-flex; }
.admin-user-form { max-width: 800px; }
.admin-role-fields { border: 1px solid #dce3db; border-radius: 12px; margin: 28px 0; padding: 20px; }
.admin-role-fields label { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.admin-role-fields input { width: auto; }
@media (max-width: 540px) { .admin-user-row { align-items: start; flex-direction: column; gap: 12px; } }
.admin-area .page-shell :is(.news-hero, .meetings-hero, .security-hero, .social-brand, .who-hero, .tv-hero, .events-hero, .book-hero, .stay-hero) { display: none; }
body:not(.admin-area) :is(#manage-categories, #news-pending, #admin-meetings, #security-review-queue, #social-admin, #who-admin, #who-categories-admin, #tv-admin, #events-admin, #books-admin, #stay-admin) { display: none !important; }
@media (max-width: 850px) { .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
    .admin-module-grid { grid-template-columns: 1fr; }
    .admin-panel { padding: 18px; }
    .admin-shortcuts { font-size: 13px; }
}

.join-platform {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 164px;
    padding: 12px 20px;
    border-radius: 12px;
    background: #101b16;
    color: #fff;
    text-align: left;
}

.join-platform svg {
    width: 30px;
    height: 34px;
    flex-shrink: 0;
}

.join-platform small,
.join-platform strong {
    display: block;
}

.join-platform small {
    font-size: 11px;
    line-height: 1.4;
}

.join-platform strong {
    font-size: 22px;
    line-height: 1.25;
}

.page-shell > .notice {
    margin-inline: var(--page-gutter);
}

/* These modules have direct content children rather than a single body panel. */
.page-shell #news-app > :not(.news-hero):not(.news-toolbar):not(dialog):not(script):not(link),
.page-shell #meeting-app > :not(.meetings-hero):not(dialog):not(script):not(link),
.page-shell #security-app > :not(.security-hero):not(.security-tools):not(dialog):not(script):not(link) {
    margin-inline: var(--page-gutter);
}

.page-shell #meeting-app > .meeting-toolbar {
    padding-inline: 0;
}

.page-shell #security-app > .security-tools {
    margin-inline: 0;
    padding-inline: var(--page-gutter);
}

.page-shell #security-app > :is(.security-heading, #security-list, #security-review-queue, .security-note),
.page-shell #news-app > :is(.news-note, #news-heading) {
    padding-inline: 0;
}

.page-shell #social-app > :is(.social-compose, #social-stories, .social-tabs, .social-filter) {
    padding-inline: var(--page-gutter);
}

.page-shell #social-app > :is(#social-feed, #social-status, .social-note) {
    margin-inline: var(--page-gutter);
}

.page-shell #social-feed > .social-card {
    margin-inline: 0;
}

.page-shell .book-search input {
    flex: 1 1 0;
    width: 0;
}

.page-shell .book-search select {
    flex: 0 1 240px;
    width: 240px;
    max-width: 100%;
}

@media (max-width: 540px) {
    .page-shell .book-search :is(input, select) {
        flex: none;
        width: 100%;
    }
}

.page-shell :is(.content-grid, .books-grid, #stay-list) > *,
.page-shell :is(.section-heading, .stay-heading, .events-heading, .who-heading) > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .topbar > nav:not(:has(.button)) {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 12px;
        --hero-gutter: 20px;
    }

    body > .topbar {
        column-gap: 12px;
    }

    .topbar > .brand {
        gap: 8px;
        min-width: 0;
    }

    .topbar .brand b {
        font-size: 19px;
    }

    .topbar .brand small {
        font-size: 9px;
    }

    .topbar .brand img {
        width: 38px;
        height: 38px;
    }

    .page-shell > .hero {
        padding-inline: var(--hero-gutter);
    }

    .page-shell .section-heading {
        flex-wrap: wrap;
    }

    .page-shell > .join {
        padding-inline: 20px;
    }
}

/* Shared top-menu buttons and site navigation settings. */
.topbar > nav{display:flex;gap:8px;padding-block:12px}
.topbar > nav .menu-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:42px;padding:10px 16px;border:1px solid #b9d7c7;border-radius:10px;background:#edf6f0;color:#005c3d;font-size:14px;white-space:nowrap;transition:background .15s,color .15s}
.topbar > nav .menu-button:hover,.topbar > nav .menu-button[aria-current=page]{background:#005c3d;border-color:#005c3d;color:#fff}
.topbar > nav .menu-button:focus-visible{outline:3px solid #d6a53c;outline-offset:2px}
#menu-order-list{max-width:650px;padding-left:28px;margin-block:20px}
#menu-order-list li{position:relative;padding:10px 0;border-bottom:1px solid #e0e9e4}
#menu-order-list li>span{display:inline-block;padding:10px 90px 10px 6px;overflow-wrap:anywhere}
#menu-order-list li>div{position:absolute;right:0;top:8px;display:flex;gap:6px}
#menu-order-list button{width:38px;height:38px;border:1px solid #b9d7c7;border-radius:8px;background:#edf6f0;color:#005c3d;font-size:20px}
#menu-order-list button:disabled{opacity:.35;cursor:default}
@media(max-width:900px){.topbar > nav{flex-wrap:nowrap;max-width:100%;padding-bottom:16px}.topbar > nav .menu-button{padding:10px 14px}}

.topbar > nav[data-overflow-navigation]{flex-wrap:nowrap;position:relative;max-width:100%;overflow:visible}
.navigation-more{position:relative;flex-shrink:0;margin-left:auto}
.navigation-more[hidden],.navigation-dropdown[hidden]{display:none}
.navigation-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:100;display:flex;flex-direction:column;gap:6px;width:max-content;min-width:180px;max-width:min(320px,80vw);max-height:60vh;overflow-y:auto;padding:8px;background:#fff;border:1px solid #b9d7c7;border-radius:12px;box-shadow:0 12px 30px #14282026}
.topbar > nav .navigation-dropdown .menu-button{justify-content:flex-start;white-space:normal;overflow-wrap:anywhere;text-align:left}
.topbar > nav .navigation-more .has-current{background:#005c3d;border-color:#005c3d;color:#fff}

/* Events and Security share one content edge at every viewport. */
.page-shell #security-app { background: #fff; border-radius: 24px; overflow: hidden; }
.page-shell #security-app > .security-tools { margin-inline: 0; padding: 24px var(--page-gutter) 8px; }
.page-shell #security-app > .security-heading { gap: 12px; flex-wrap: wrap; padding-block: 18px 8px; }
.page-shell #security-app > .security-heading h2 { margin: 8px 0; }
.page-shell #security-app > #security-status:empty { display: none; }
.page-shell #security-app > .security-note { margin-block: 0; padding-block: 18px 28px; line-height: 1.6; }
#security-app .security-card { min-width: 0; }
#security-app .security-card :is(h3,p) { overflow-wrap: anywhere; line-height: 1.5; }
#security-app .security-tools button { min-width: 0; }
#security-app .security-tools span { overflow-wrap: anywhere; line-height: 1.4; }
#events-app .events-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,200px) minmax(170px,220px); gap: 12px; align-items: stretch; }
#events-app .events-tools :is(input,select) { width: 100%; min-width: 0; margin: 0; }
#events-app .events-actions { align-items: stretch; }
#events-app .event-row { display: grid; grid-template-columns: 210px minmax(0,1fr) 20px; }
#events-app .event-cover { width: 100%; }
#events-app .event-info :is(h3,p) { overflow-wrap: anywhere; line-height: 1.5; }
#events-app #events-status:empty { display: none; }
@media(max-width:800px) {
    #events-app .events-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #events-app .events-tools input[type=search] { grid-column: 1/-1; }
}
@media(max-width:600px) {
    #events-app .event-row { grid-template-columns: 105px minmax(0,1fr) 12px; gap: 12px; }
    #events-app .event-cover { height: 130px; }
    #security-app .security-tools { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    #security-app .security-tools button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 10px; font-size: 24px; }
    #security-app .security-tools span { margin: 0; font-size: 13px; text-align: left; }
    #security-app .security-card { gap: 10px; padding: 14px 12px; }
    #security-app .risk-badge { margin: 4px 0 0; }
}
@media(max-width:360px) {
    #events-app .events-tools { grid-template-columns: minmax(0,1fr); }
    #events-app .event-row { grid-template-columns: 86px minmax(0,1fr) 10px; gap: 8px; }
    #events-app .events-actions button { flex: 1 1 auto; }
}

#security-settings input[type=checkbox]{width:auto;margin-right:8px}#security-settings fieldset label{display:inline-flex;align-items:center;margin-right:18px}.security-contact-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;margin:18px 0}.security-contact-editor button{margin-bottom:0;padding:12px}#security-detail form{display:grid;gap:14px}#security-detail form :is(input,textarea){display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #dae3dc;border-radius:10px;font:inherit}.security-tip{border-top:1px solid #dae3dc;padding:18px 0}.security-tip p{white-space:pre-wrap}.security-tip button{margin:10px 8px 0 0}@media(max-width:600px){.security-contact-editor{grid-template-columns:1fr}}

.admin-user-form select {width:100%;min-width:0;padding:12px;border:1px solid #dce7e1;border-radius:10px;background:white;font:inherit}.admin-role-fields label{overflow-wrap:anywhere}.donate-button{white-space:nowrap}