/* =========================================================================
   event-page.css — THE EVENT PAGE, one stylesheet for both pages (2026-10-11)
   Slice 4 of the member event-page redesign (Paul approved 2026-10-07). The
   in-portal #event/<id> view (portal.js, inside #tab-event-embed) and the public
   eventpage.html (members.oectahw.com/eventpage AND events.oectahw.com/eventpage,
   inside #ev-public) are built by the same code (event-page.js), so they share
   these rules: every rule is scoped to :is(#tab-event-embed, #ev-public) — the
   same specificity the portal-only rules had — tokens only, no colour literals
   (tools/verify-event-head.mjs / verify-event-body.mjs fail the deploy on one).
   The pieces themselves are the shared kit (.oecta-ev-*, oecta-components.css).
   Loaded by index.html (after portal.css), eventpage.html and index-events.html
   (the wait-list form and the Around OECTA pop-up, #aon-dialog); in events-deploy.sh
   FILES. portal.css is NOT on eventpage.html — never move these rules back.
   ========================================================================= */

/* ── EVENT HEAD + PAGE (2026-10-11) ──────────────────────────────────
   Slice 2 of the member event-page redesign (Paul approved 2026-10-07).
   The pieces are the shared event-page kit (.oecta-ev-*, oecta-components.css);
   this block is LAYOUT only, scoped to #tab-event-embed, tokens only (no colour
   literals — tools/verify-event-head.mjs fails the deploy on one). Full width and
   left-anchored under .content-wrapper's gutters, like Library and My Profile:
   the 960px centre column is gone. Light and dark come from the tokens. */
:is(#tab-event-embed, #ev-public) .ned-wrap {
    display: grid;
    gap: var(--oecta-space-lg);
    min-inline-size: 0;
    padding: var(--oecta-space-lg) 0 var(--oecta-space-3xl);
}

/* Loading / error states (before the head exists) */
.ned-toolbar { padding: var(--oecta-space-sm) 0; }
.ned-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    padding: 0 var(--oecta-space-md);
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--oecta-font-body);
    font-size: var(--oecta-text-base);
    font-weight: var(--oecta-weight-semibold);
    color: var(--oecta-primary-text);
    border-radius: var(--oecta-radius-md);
}
.ned-back-btn:hover { background: var(--oecta-surface-low); }
.ned-back-btn:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
.ned-back-btn .material-icons-outlined { font-size: 18px; }
.ned-loading, .ned-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--oecta-on-surface-variant);
}
.ned-error .material-icons-outlined {
    font-size: 48px;
    color: var(--oecta-error-text);
    display: block;
    margin-bottom: var(--oecta-space-md);
}
.ned-error h3 { margin: 0 0 6px; color: var(--oecta-on-surface); }
.ned-error p { margin: 0; }

/* The head: an optional cover photo over the navy band */
:is(#tab-event-embed, #ev-public) .ned-head { display: grid; min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-head__cover {
    display: block;
    inline-size: 100%;
    block-size: 160px;
    object-fit: cover;
    border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0;
}
:is(#tab-event-embed, #ev-public) .ned-head__cover + .ned-band { border-start-start-radius: 0; border-start-end-radius: 0; }
/* Navy Silk, held still (design-system step 5, 2026-10-22; Figma S4): the sign-in's light, glint and grain on the head
   band of the event page, the notice page and the pop-up — nothing moves behind the words. An office colour
   (.evn-band--tint) keeps its own colour. White words stay at 6.06:1 or better, on-band-2 at 4.55:1 (--oecta-silk-light). */
:is(#tab-event-embed, #ev-public) .ned-band:not(.evn-band--tint),
#aon-dialog .ned-band:not(.evn-band--tint) {
    background:
        var(--oecta-silk-grain),
        radial-gradient(22% 60% at 84% 82%, color-mix(in srgb, var(--oecta-silk-glint) 24%, transparent) 0%, transparent 70%),
        radial-gradient(70% 210% at 34% 128%, transparent 58%, color-mix(in srgb, var(--oecta-silk-light) 45%, transparent) 64%, transparent 70%),
        radial-gradient(60% 190% at 78% 120%, transparent 60%, color-mix(in srgb, var(--oecta-silk-light) 35%, transparent) 66%, transparent 72%),
        linear-gradient(135deg, var(--oecta-silk-deep) 0%, var(--oecta-silk-navy) 50%, var(--oecta-silk-mid) 100%);
    background-color: var(--oecta-silk-navy);   /* the colour the words sit on under the gradients (what contrast is measured against) */
}
:is(#tab-event-embed, #ev-public) .ned-band {
    position: relative;
    display: grid;
    gap: var(--oecta-space-lg);
    min-inline-size: 0;
    padding: var(--oecta-space-xl) var(--oecta-space-2xl);
}
:is(#tab-event-embed, #ev-public) .ned-band__stripe {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background: var(--ned-brand, transparent);
    border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0;
}
:is(#tab-event-embed, #ev-public) .ned-band__stripe[hidden] { display: none; }
:is(#tab-event-embed, #ev-public) .ned-band__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--oecta-space-xs);
    min-block-size: 44px;
    margin-block: calc(-1 * var(--oecta-space-sm));
    margin-inline-start: calc(-1 * var(--oecta-space-xs));
    padding-inline: var(--oecta-space-xs) var(--oecta-space-sm);
    border-radius: var(--oecta-radius-sm);
    font-size: var(--oecta-text-base);
    font-weight: var(--oecta-weight-semibold);
    color: var(--oecta-on-band-2);
    text-decoration: none;
}
:is(#tab-event-embed, #ev-public) .ned-band__back:hover { color: var(--oecta-on-band); text-decoration: underline; }
:is(#tab-event-embed, #ev-public) .ned-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oecta-space-lg) var(--oecta-space-2xl);
    min-inline-size: 0;
}
@media (min-width: 1100px) {
    :is(#tab-event-embed, #ev-public) .ned-band__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
:is(#tab-event-embed, #ev-public) .ned-band__id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--oecta-space-lg);
    align-items: start;
    min-inline-size: 0;
}
:is(#tab-event-embed, #ev-public) .ned-band__titles { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-band__pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .ned-band__states { display: contents; }
:is(#tab-event-embed, #ev-public) .ned-band__title {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
    font-weight: var(--oecta-weight-extrabold);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--oecta-on-band);
    overflow-wrap: anywhere;
}
:is(#tab-event-embed, #ev-public) .ned-band__meta {
    margin: 0;
    display: grid;
    gap: 2px;
    font-size: var(--oecta-text-md);
    line-height: 1.5;
    color: var(--oecta-on-band-2);
}
:is(#tab-event-embed, #ev-public) .ned-band__link {
    color: var(--oecta-on-band);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
:is(#tab-event-embed, #ev-public) .ned-band__link:hover { text-decoration-thickness: 2px; }
:is(#tab-event-embed, #ev-public) .ned-band__mono { font-family: var(--oecta-font-mono); color: var(--oecta-on-band); }
:is(#tab-event-embed, #ev-public) .ned-band__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-sm) var(--oecta-space-md); }
:is(#tab-event-embed, #ev-public) .ned-band__btns { display: flex; flex-wrap: wrap; gap: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .ned-band__btns:empty { display: none; }
:is(#tab-event-embed, #ev-public) .ned-band__reason { max-inline-size: 70ch; }
:is(#tab-event-embed, #ev-public) .ned-band__loc {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0 var(--oecta-space-xs);
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-weight: var(--oecta-weight-bold);
    color: var(--oecta-on-band);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
/* (A menu item inside the band keeps its inset ring: the kit does it since 2026-10-12 — oecta-components.css.) */

/* Tabs: the kit's underline tabs. [hidden] must win over the tab's inline-flex. */
:is(#tab-event-embed, #ev-public) .ned-tabs { min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-tabs .oecta-ev-tab[hidden] { display: none; }

/* Panels: Overview sits on the page; the panels slice 3 restyles keep their card for now. */
:is(#tab-event-embed, #ev-public) .ned-panel { display: none; min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-panel.active { display: block; }
:is(#tab-event-embed, #ev-public) .ned-panel:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); border-radius: var(--oecta-radius-md); }
:is(#tab-event-embed, #ev-public) .ned-panel:not(#ned-overview, #tab-overview):not(#ned-register, #tab-register):not(#ned-materials, #tab-materials) {
    padding: var(--oecta-space-xl);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-lowest);
    box-shadow: var(--oecta-shadow-sm);
}

/* Overview: main column + side column */
:is(#tab-event-embed, #ev-public) .ned-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oecta-space-xl) var(--oecta-space-3xl);
    padding-block-start: var(--oecta-space-sm);
}
@media (min-width: 1024px) {
    :is(#tab-event-embed, #ev-public) .ned-ov { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
    :is(#tab-event-embed, #ev-public) .ned-ov--solo { grid-template-columns: minmax(0, 420px); }
}
:is(#tab-event-embed, #ev-public) .ned-ov__main,
:is(#tab-event-embed, #ev-public) .ned-ov__side { display: grid; gap: var(--oecta-space-xl); align-content: start; min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-ov__side {
    padding: var(--oecta-space-xl);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-low);
}
:is(#tab-event-embed, #ev-public) .ned-ov__sec { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-ov__h {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    line-height: 1.3;
    color: var(--oecta-on-surface);
}
:is(#tab-event-embed, #ev-public) .ned-ov__text {
    margin: 0;
    max-inline-size: 70ch;
    font-size: var(--oecta-text-md);
    line-height: 1.6;
    color: var(--oecta-on-surface-variant);
}
:is(#tab-event-embed, #ev-public) .ned-ov__note { max-inline-size: 75ch; }
/* QUICK FEEDBACK ON THE EVENT PAGE (2026-10-12): "After the event" above Overview — the attendee's two taps and the
   office's "What we changed" (the controls are the My Events card's .me-qf, styled in style2.css). Tonal, no line. */
:is(#tab-event-embed, #ev-public) .ned-qf[hidden] { display: none; }
:is(#tab-event-embed, #ev-public) .ned-qf {
    margin-block-end: var(--oecta-space-lg);
    padding: var(--oecta-space-lg);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-low);
    max-inline-size: 75ch;
}
:is(#tab-event-embed, #ev-public) .ned-qf .me-qf { margin-block-start: var(--oecta-space-sm); }
/* The office's notes are rich text (app.js App.formatEventNotes): paragraphs, lists and links inside the note.
   (style2.css .oh-notes__body carried this for the old public hero, retired in slice 4.) */
:is(#tab-event-embed, #ev-public) .ned-ov__note p { margin: 0 0 var(--oecta-space-sm); max-width: 65ch; line-height: 1.6; }
:is(#tab-event-embed, #ev-public) .ned-ov__note :is(ul, ol) { margin: 0 0 var(--oecta-space-sm); padding-inline-start: var(--oecta-space-xl); line-height: 1.6; }
:is(#tab-event-embed, #ev-public) .ned-ov__note li + li { margin-block-start: var(--oecta-space-xs); }
:is(#tab-event-embed, #ev-public) .ned-ov__note a {
    color: var(--oecta-primary-text);
    font-weight: var(--oecta-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
:is(#tab-event-embed, #ev-public) .ned-ov__note a:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .ned-ov__map {
    display: block;
    inline-size: 100%;
    max-inline-size: 640px;
    block-size: auto;
    aspect-ratio: 640 / 240;
    object-fit: cover;
    border-radius: var(--oecta-radius-lg);
    background: var(--oecta-surface-container);
}
:is(#tab-event-embed, #ev-public) .ned-ov__map[hidden] { display: none; }
:is(#tab-event-embed, #ev-public) .ned-ov__link {
    color: var(--oecta-primary-text);
    font-weight: var(--oecta-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
:is(#tab-event-embed, #ev-public) .ned-ov__link:focus-visible,
:is(#tab-event-embed, #ev-public) .ned-ov__more:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .ned-ov__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .ned-ov__docs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--oecta-space-md); align-items: center; }
:is(#tab-event-embed, #ev-public) .ned-ov__docname {
    font-size: var(--oecta-text-base);
    font-weight: var(--oecta-weight-semibold);
    line-height: 1.4;
    color: var(--oecta-on-surface);
    overflow-wrap: anywhere;
}
:is(#tab-event-embed, #ev-public) .ned-ov__more {
    appearance: none;
    -webkit-appearance: none;
    justify-self: start;
    min-block-size: 44px;
    padding: 0 var(--oecta-space-xs);
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--oecta-text-base);
    font-weight: var(--oecta-weight-bold);
    color: var(--oecta-primary-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}

/* The phone action bar: above the bottom menu (bottom = the menu's height + the
   safe area), on the z-index scale, the head's one action. It was bottom:0 at the
   menu's own z-index and hidden under it. */
:is(#tab-event-embed, #ev-public) .ned-bar { display: none; }
@media (max-width: 768px) {
    :is(#tab-event-embed, #ev-public) .ned-wrap { padding-block-end: calc(88px + var(--oecta-space-lg)); }
    :is(#tab-event-embed, #ev-public) .ned-band { padding: var(--oecta-space-lg); gap: var(--oecta-space-md); }
    #tab-event-embed .ned-band__back { display: none; }     /* the portal sub-header's Back is the one back control */
    :is(#tab-event-embed, #ev-public) .ned-band__id { gap: var(--oecta-space-md); }
    :is(#tab-event-embed, #ev-public) .ned-band__pills .oecta-ev-state { white-space: normal; } /* a long reason wraps, never runs off the band */
    :is(#tab-event-embed, #ev-public) .ned-panel:not(#ned-overview, #tab-overview):not(#ned-register, #tab-register):not(#ned-materials, #tab-materials) { padding: var(--oecta-space-lg); }
    :is(#tab-event-embed, #ev-public) .ned-ov__side { padding: var(--oecta-space-lg); }
    :is(#tab-event-embed, #ev-public) .oh-mobile-sticky-bar.ned-bar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: calc(var(--oecta-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        z-index: var(--oecta-z-bottom-nav);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--oecta-space-md);
        padding: var(--oecta-space-sm) var(--oecta-space-lg);
        background: var(--oecta-surface-lowest);
        box-shadow: var(--oecta-shadow-md);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
        opacity: 1;
        transition: none;
    }
    :is(#tab-event-embed, #ev-public) .oh-mobile-sticky-bar.ned-bar.is-hidden { display: none; }
    :is(#tab-event-embed, #ev-public) .ned-bar__txt { display: grid; gap: 2px; min-inline-size: 0; }
    :is(#tab-event-embed, #ev-public) .ned-bar__label,
    :is(#tab-event-embed, #ev-public) .ned-bar__sub { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :is(#tab-event-embed, #ev-public) .ned-bar__label {
        font-family: var(--oecta-font-display);
        font-size: var(--oecta-text-base);
        font-weight: var(--oecta-weight-bold);
        color: var(--oecta-on-surface);
    }
    :is(#tab-event-embed, #ev-public) .ned-bar__sub { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); }
    :is(#tab-event-embed, #ev-public) .ned-bar__btn { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
    :is(#tab-event-embed, #ev-public) .ned-band__link,
    :is(#tab-event-embed, #ev-public) .oh-mobile-sticky-bar.ned-bar { transition: none; }
}
/* The floating scroll-hint arrow (#scroll-hint, index.html) sat over the bottom menu's Search
   button and the action bar. The event page has its own action bar, so the arrow steps aside here. */
body:has(#tab-event-embed.active) #scroll-hint { display: none; }
/* ── END EVENT HEAD + PAGE ─────────────────────────────────────────── */

/* ── NOTICE PAGE (2026-10-12) ─────────────────────────────────────────
   An Around OECTA notice as a page (#notice/<id>; app.js App._renderAoNoticePage,
   event-page.js NOTICE PAGE builders). The head band, the Overview grid and the
   phone bar are the event page's rules above (.ned-head / .ned-band / .ned-ov /
   .ned-bar); these are the notice's own pieces. Portal only (#tab-event-embed),
   tokens only — tools/verify-notice-page.mjs fails the deploy on a colour literal. */
/* The art band (no cover photo): the office's card background above the navy band,
   shorter than the old page's hero; style2.css .ev-notice__hero--art paints it. */
#tab-event-embed .evn-art {
    aspect-ratio: auto;
    min-block-size: 132px;
    padding: var(--oecta-space-xl) var(--oecta-space-2xl);
    border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0;
}
#tab-event-embed .evn-art + .ned-band { border-start-start-radius: 0; border-start-end-radius: 0; }
/* The office's colour (2026-10-13): app.js _aoTintBand puts event-page.js App.EvPage.bandTint's three stops on the
   band through the CSSOM — never lighter than the navy band's own — and this class. No class: the kit's navy. */
#tab-event-embed .ned-band.evn-band--tint {
    background: linear-gradient(135deg, var(--evn-tint-1) 0%, var(--evn-tint-2) 50%, var(--evn-tint-3) 100%);
}
#tab-event-embed .evn-band__tagline {
    margin: 0;
    max-inline-size: 70ch;
    font-size: var(--oecta-text-md);
    line-height: 1.5;
    color: var(--oecta-on-band);
}
/* The title takes focus when the page opens (a place for a screen reader to start), not a control: no ring. */
#tab-event-embed #evn-title:focus { outline: none; box-shadow: none; }
#tab-event-embed .evn-head .ned-band__figs:empty { display: none; }
/* An Around OECTA event description (.ao-event-desc — the notice page, the events-site pop-up, the Workspace
   preview) keeps the Writer's blocks (ao-blocks.css). Their --aod-* roles are resolved once on :root (light), so in
   dark mode the text went dark on dark and a callout stayed a light card; on every description they follow the
   theme (2026-10-12). The same values in light mode. */
.ao-event-desc {
    --aod-ink: var(--oecta-on-surface);
    --aod-navy: var(--oecta-primary-text);
    --aod-muted: var(--oecta-on-surface-variant);
    --aod-s2: var(--oecta-surface-low);
    --aod-s3: var(--oecta-surface-container);
}
#tab-event-embed .evn-ov .ned-ov__desc { max-inline-size: 72ch; }
/* The Resources list (app.js _aoResHtml; event-page.css RESOURCES) keeps to the reading width here. */
#tab-event-embed .evn-ov .ao-res { max-inline-size: 72ch; }
/* The taps' icons: the theme's navy words colour (the old navy vanished in dark mode). */
#tab-event-embed .evn-ov :is(.ev-tap, .ev-tap__note) .material-icons-outlined { color: var(--oecta-primary-text); }
/* The taps keep their markup (style2.css); on this page they sit in the side column. */
#tab-event-embed .evn-taps { margin-block-start: 0; }
#tab-event-embed .evn-bar__act { display: contents; }
@media (max-width: 768px) {
    #tab-event-embed #evn-primary { display: none; }     /* the phone bar carries the one action */
    #tab-event-embed .evn-art { min-block-size: 112px; padding: var(--oecta-space-lg); }
}
/* ── END NOTICE PAGE ───────────────────────────────────────────────── */

/* ── NOTICE POP-UP (2026-10-12) ───────────────────────────────────────
   The events site's pop-up for an Around OECTA notice (app.js
   App._openAroundOectaModal, event-page.js App.EvPage.noticeDialog): the notice
   page's head and body in a kit dialog — the wait-list form's pattern (a scrim,
   one surface, a 44px close), laid out for one 640px column; at 600px and below a
   full-height sheet. Every rule sits under its own id (#aon-dialog), so nothing
   here reaches a page underneath; the page's rules above are scoped to
   #tab-event-embed / #ev-public and never reach it. Tokens only, light + dark —
   tools/verify-ao-popup.mjs fails the deploy on a colour literal. */
#aon-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--oecta-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--oecta-space-lg);
    background: color-mix(in srgb, var(--oecta-primary-dark) 62%, transparent);
}
/* The page underneath stays put while it is open (the lock goes with the dialog: no class to forget). */
html:has(#aon-dialog),
html:has(#aon-dialog) body { overflow: hidden; }
#aon-dialog .aon-dlg {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 640px;
    max-block-size: min(90dvh, 880px);
    overflow: hidden;
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-lowest);
    box-shadow: var(--oecta-shadow-xl);
    color: var(--oecta-on-surface);
    font-family: var(--oecta-font-body);
}
#aon-dialog .aon-dlg:focus { outline: none; }
#aon-dialog .aon-dlg__scroll {
    display: block;                       /* .events-v2 is a flex column where the list uses it */
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* The close: one round 44px button over the top corner (the cover photo or the band), always in view. */
#aon-dialog .aon-dlg__close {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset-block-start: var(--oecta-space-md);
    inset-inline-end: var(--oecta-space-md);
    z-index: 1;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--oecta-radius-pill);
    background: var(--oecta-surface-lowest);
    color: var(--oecta-on-surface);
    box-shadow: var(--oecta-shadow-md);
    cursor: pointer;
}
#aon-dialog .aon-dlg__close:hover { background: var(--oecta-surface-container); }
#aon-dialog .aon-dlg__close:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
/* Words for a screen reader only ("opens in a new tab"): the events site has no global .sr-only. */
#aon-dialog .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* The head: the cover photo (when there is one) over the navy band; the band is the page's, in one column. */
#aon-dialog .ned-head { display: grid; min-inline-size: 0; }
#aon-dialog .ned-head__cover { display: block; inline-size: 100%; block-size: 168px; object-fit: cover; }
/* No cover photo (2026-11-09): the notice page's art band — the kind and the countdown on the office's style (app.js
   _aoPaintStyle through the CSSOM; style2.css .ev-notice__hero--art paints it) — with its words clear of the close. */
#aon-dialog .evn-art {
    aspect-ratio: auto;
    min-block-size: 168px;
    padding: var(--oecta-space-xl) var(--oecta-space-3xl) var(--oecta-space-lg) var(--oecta-space-xl);
}
#aon-dialog .evn-art .ev-notice__art-line { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
#aon-dialog .ned-band {
    position: relative;
    display: grid;
    gap: var(--oecta-space-md);
    min-inline-size: 0;
    padding: var(--oecta-space-xl);
    border-radius: 0;
}
/* The office's colour (2026-10-13), as on the notice page: the three stops app.js puts on the band, else navy. */
#aon-dialog .ned-band.evn-band--tint {
    background: linear-gradient(135deg, var(--evn-tint-1) 0%, var(--evn-tint-2) 50%, var(--evn-tint-3) 100%);
}
#aon-dialog .ned-band__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oecta-space-md); min-inline-size: 0; }
#aon-dialog .ned-band__id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--oecta-space-md);
    align-items: start;
    min-inline-size: 0;
}
/* No cover photo: the close sits on the band, so the words keep clear of it. */
#aon-dialog .ned-head > .ned-band:first-child .ned-band__id { padding-inline-end: var(--oecta-space-3xl); }
#aon-dialog .ned-band__titles { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; }
#aon-dialog .ned-band__pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-sm); }
#aon-dialog .ned-band__states { display: contents; }
#aon-dialog .ned-band__title {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    font-weight: var(--oecta-weight-extrabold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--oecta-on-band);
    overflow-wrap: anywhere;
}
/* The title takes focus when the pop-up opens (a place for a screen reader to start), not a control: no ring. */
#aon-dialog #aon-title:focus { outline: none; box-shadow: none; }
#aon-dialog .evn-band__tagline {
    margin: 0;
    font-size: var(--oecta-text-md);
    line-height: 1.5;
    color: var(--oecta-on-band);
}
#aon-dialog .ned-band__meta {
    margin: 0;
    display: grid;
    gap: 2px;
    font-size: var(--oecta-text-md);
    line-height: 1.5;
    color: var(--oecta-on-band-2);
}
#aon-dialog .ned-band__link {
    color: var(--oecta-on-band);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
#aon-dialog .ned-band__link:hover { text-decoration-thickness: 2px; }
#aon-dialog .ned-band__figs:empty { display: none; }
#aon-dialog .ned-band__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-sm); }
#aon-dialog .ned-band__btns { display: flex; flex-wrap: wrap; gap: var(--oecta-space-sm); }
#aon-dialog .ned-band__btns:empty { display: none; }
#aon-dialog .ned-band__reason { max-inline-size: 70ch; }
/* The body: the page's Overview in one column — the description, attachments and reveals, then When / Where. */
#aon-dialog .ned-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oecta-space-xl);
    padding: var(--oecta-space-xl);
}
#aon-dialog .ned-ov__main,
#aon-dialog .ned-ov__side { display: grid; gap: var(--oecta-space-lg); align-content: start; min-inline-size: 0; }
#aon-dialog .ned-ov__side {
    padding: var(--oecta-space-lg) var(--oecta-space-xl);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-low);
}
#aon-dialog .ned-ov__sec { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; }
#aon-dialog .ned-ov__h {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    line-height: 1.3;
    color: var(--oecta-on-surface);
}
#aon-dialog .ned-ov__text {
    margin: 0;
    font-size: var(--oecta-text-md);
    line-height: 1.6;
    color: var(--oecta-on-surface-variant);
}
#aon-dialog .ned-ov__link {
    color: var(--oecta-primary-text);
    font-weight: var(--oecta-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
#aon-dialog :is(.ned-ov__link, .ao-event-desc a):focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
/* A phone: a full-height sheet; the buttons share the width, the one amber action first. */
@media (max-width: 600px) {
    #aon-dialog { padding: 0; align-items: stretch; }
    #aon-dialog .aon-dlg { max-inline-size: none; block-size: 100dvh; max-block-size: none; border-radius: 0; box-shadow: none; }
    #aon-dialog .aon-dlg__close { inset-block-start: calc(var(--oecta-space-sm) + env(safe-area-inset-top, 0px)); inset-inline-end: var(--oecta-space-sm); }
    #aon-dialog .ned-band { padding: var(--oecta-space-lg); }
    #aon-dialog .ned-head > .ned-band:first-child { padding-block-start: calc(var(--oecta-space-lg) + env(safe-area-inset-top, 0px)); }
    #aon-dialog .ned-head__cover { block-size: 140px; }
    #aon-dialog .ned-head > .evn-art:first-child { min-block-size: 140px; padding-block-start: calc(var(--oecta-space-lg) + env(safe-area-inset-top, 0px)); padding-inline-start: var(--oecta-space-lg); }
    #aon-dialog .ned-band__acts > * { flex: 1 1 auto; }
    #aon-dialog .ned-band__btns > .oecta-ev-btn { flex: 1 1 100%; }
    #aon-dialog .ned-ov { padding: var(--oecta-space-lg) var(--oecta-space-lg) calc(var(--oecta-space-xl) + env(safe-area-inset-bottom, 0px)); }
    #aon-dialog .ned-ov__side { padding: var(--oecta-space-lg); }
}
/* ── END NOTICE POP-UP ─────────────────────────────────────────────── */

/* ── RESOURCES (2026-11-08) ──────────────────────────────────────────
   An event's files and links in the office's order (app.js _aoResHtml): the notice page, the pop-up on both sites and
   the members Workspace preview. One tonal tile per item (no rules between them), a 44px icon, the title as the link,
   the description under it, then a file's type and size or a link's site. Tokens only; navy words, never amber. */
.ao-res { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; margin: 0; }
.ao-res__h {
    margin: 0 0 var(--oecta-space-xs);
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    line-height: 1.3;
    color: var(--oecta-on-surface);
}
.ao-res__list { display: grid; gap: var(--oecta-space-sm); margin: 0; padding: 0; list-style: none; }
.ao-res__i { margin: 0; min-inline-size: 0; }
.ao-res__a {
    display: flex;
    align-items: flex-start;
    gap: var(--oecta-space-md);
    min-block-size: 44px;
    box-sizing: border-box;
    padding: var(--oecta-space-md);
    border-radius: var(--oecta-radius-lg);
    background: var(--oecta-surface-low);
    color: var(--oecta-on-surface);
    text-decoration: none;
}
.ao-res__a:hover { background: var(--oecta-surface-container); }
.ao-res__a:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
.ao-res__ico {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--oecta-radius-md);
    background: color-mix(in srgb, var(--oecta-primary-container) 12%, var(--oecta-surface-lowest));
    color: var(--oecta-primary-text);
}
.ao-res__ico--pdf { background: color-mix(in srgb, var(--oecta-error) 12%, var(--oecta-surface-lowest)); color: var(--oecta-error-text); }
.ao-res__ico .material-icons-outlined { font-size: 22px; }
.ao-res__txt { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; padding-block-start: 2px; }
.ao-res__t { font-weight: var(--oecta-weight-bold); font-size: var(--oecta-text-md); line-height: 1.35; color: var(--oecta-primary-text); overflow-wrap: anywhere; }
.ao-res__out { margin-inline-start: 2px; font-size: 15px; vertical-align: -2px; }
.ao-res__d { font-size: var(--oecta-text-base); line-height: 1.45; color: var(--oecta-on-surface-variant); overflow-wrap: anywhere; }
.ao-res__m { font-size: var(--oecta-text-xs); line-height: 1.4; color: var(--oecta-on-surface-variant); overflow-wrap: anywhere; }
/* "opens in a new tab" for a screen reader only, wherever the list sits (the events site has no global .sr-only). */
.ao-res .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ── END RESOURCES ───────────────────────────────────────────────────── */

/* ── EVENT BODY (2026-10-11) ─────────────────────────────────────────
   Slice 3 of the member event-page redesign: "Your registration" as ONE
   ticket card, the form and Materials on the page (no card around them —
   the Register and Materials panels lost theirs above), and the closed /
   full notice. Layout only, scoped to #tab-event-embed, tokens only
   (tools/verify-event-body.mjs fails the deploy on a colour literal). */
:is(#tab-event-embed, #ev-public) :is(#ned-register, #tab-register),
:is(#tab-event-embed, #ev-public) :is(#ned-materials, #tab-materials) { padding-block-start: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) :is(#ned-materials, #tab-materials) .ev-docs-host,
:is(#tab-event-embed, #ev-public) :is(#ned-materials, #tab-materials) #agenda-viewer { max-inline-size: 880px; }

/* The ticket card */
:is(#tab-event-embed, #ev-public) .ned-ticket {
    display: grid;
    gap: var(--oecta-space-xl);
    max-inline-size: 880px;
    min-inline-size: 0;
    padding: var(--oecta-space-xl) var(--oecta-space-2xl);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-lowest);
    box-shadow: var(--oecta-shadow-sm);
}
:is(#tab-event-embed, #ev-public) .ned-ticket__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--oecta-space-lg) var(--oecta-space-2xl);
    align-items: start;
}
:is(#tab-event-embed, #ev-public) .ned-ticket__id { display: grid; gap: var(--oecta-space-sm); min-inline-size: 0; }
:is(#tab-event-embed, #ev-public) .ned-ticket__eyebrow {
    margin: 0;
    font-size: var(--oecta-text-xs);
    font-weight: var(--oecta-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oecta-on-surface-variant);
}
:is(#tab-event-embed, #ev-public) .ned-ticket__codeline { margin: 0; display: flex; align-items: center; gap: var(--oecta-space-xs); min-inline-size: 0; }
/* The code is never split over two lines ("GM2-" / "4821"); it shrinks with the screen instead. */
:is(#tab-event-embed, #ev-public) .ned-ticket__code {
    font-family: var(--oecta-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.5rem, 1rem + 2.6vw, 2.5rem);
    font-weight: var(--oecta-weight-semibold);
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--oecta-on-surface);
}
:is(#tab-event-embed, #ev-public) .ned-ticket__copy {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-primary-text);
    cursor: pointer;
}
:is(#tab-event-embed, #ev-public) .ned-ticket__copy:hover { background: var(--oecta-surface-low); }
:is(#tab-event-embed, #ev-public) .ned-ticket__copy:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .ned-ticket__status { margin: 0; }
:is(#tab-event-embed, #ev-public) .ned-ticket__hint {
    margin: 0;
    max-inline-size: 60ch;
    font-size: var(--oecta-text-sm);
    line-height: 1.5;
    color: var(--oecta-on-surface-variant);
}
/* The QR stays on white in dark mode too, so a door scanner reads it. */
:is(#tab-event-embed, #ev-public) .ned-ticket__qr {
    inline-size: 112px;
    block-size: 112px;
    padding: var(--oecta-space-xs);
    border-radius: var(--oecta-radius-lg);
    background: var(--oecta-contrast-paper);
    object-fit: contain;
}
/* The details and the payment: plain label / value lines, no rules, no boxes. */
:is(#tab-event-embed, #ev-public) .ned-lines { margin: 0; display: grid; gap: var(--oecta-space-md); }
:is(#tab-event-embed, #ev-public) .ned-lines:empty { display: none; }
:is(#tab-event-embed, #ev-public) .ned-lines__row {
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
    gap: 2px var(--oecta-space-lg);
    align-items: baseline;
}
:is(#tab-event-embed, #ev-public) .ned-lines__l {
    font-size: var(--oecta-text-sm);
    font-weight: var(--oecta-weight-semibold);
    line-height: 1.45;
    color: var(--oecta-on-surface-variant);
}
:is(#tab-event-embed, #ev-public) .ned-lines__v {
    margin: 0;
    font-size: var(--oecta-text-md);
    line-height: 1.5;
    color: var(--oecta-on-surface);
    overflow-wrap: anywhere;
}
:is(#tab-event-embed, #ev-public) .ned-lines__link,
:is(#tab-event-embed, #ev-public) .ned-closed .ned-ov__link {
    color: var(--oecta-primary-text);
    font-weight: var(--oecta-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--oecta-radius-xs);
}
:is(#tab-event-embed, #ev-public) .ned-lines__link:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .ned-mono { font-family: var(--oecta-font-mono); white-space: nowrap; }
:is(#tab-event-embed, #ev-public) .ned-mono--wrap { white-space: normal; overflow-wrap: anywhere; }
:is(#tab-event-embed, #ev-public) .ned-ticket__pay { display: grid; gap: var(--oecta-space-md); }
:is(#tab-event-embed, #ev-public) .ned-ticket__pay[hidden] { display: none; }
:is(#tab-event-embed, #ev-public) .ned-ticket__note { max-inline-size: 70ch; }
:is(#tab-event-embed, #ev-public) .ned-ticket__payacts,
:is(#tab-event-embed, #ev-public) .ned-ticket__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-sm); }
/* Cancel: a quiet red link at the end of the row, still a 44px target. */
:is(#tab-event-embed, #ev-public) .ned-ticket__cancel {
    appearance: none;
    -webkit-appearance: none;
    min-block-size: 44px;
    margin-inline-start: auto;
    padding: 0 var(--oecta-space-xs);
    border: 0;
    border-radius: var(--oecta-radius-xs);
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--oecta-text-md);
    font-weight: var(--oecta-weight-semibold);
    color: var(--oecta-error-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
:is(#tab-event-embed, #ev-public) .ned-ticket__cancel:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .ned-ticket__notice[hidden] { display: none; }
@media (max-width: 600px) {
    :is(#tab-event-embed, #ev-public) .ned-ticket { padding: var(--oecta-space-lg); gap: var(--oecta-space-lg); }
    :is(#tab-event-embed, #ev-public) .ned-ticket__top { grid-template-columns: minmax(0, 1fr); }
    :is(#tab-event-embed, #ev-public) .ned-ticket__qr { inline-size: 96px; block-size: 96px; }
    :is(#tab-event-embed, #ev-public) .ned-lines__row { grid-template-columns: minmax(0, 1fr); }
    :is(#tab-event-embed, #ev-public) .ned-ticket__acts .oecta-ev-btn { flex: 1 1 100%; }
    :is(#tab-event-embed, #ev-public) .ned-ticket__cancel { margin-inline-start: 0; }
}

/* The form's order summary (app.js _buildInvoiceHtml on this page): plain lines. */
:is(#tab-event-embed, #ev-public) .ev-inv { display: grid; gap: var(--oecta-space-sm); max-inline-size: 640px; }
:is(#tab-event-embed, #ev-public) .ev-inv__h {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    color: var(--oecta-on-surface);
}
:is(#tab-event-embed, #ev-public) .ev-inv__lines { margin: 0; display: grid; gap: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .ev-inv__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--oecta-space-lg); }
:is(#tab-event-embed, #ev-public) .ev-inv__row dt { display: grid; gap: 2px; font-size: var(--oecta-text-md); color: var(--oecta-on-surface); }
:is(#tab-event-embed, #ev-public) .ev-inv__row dd {
    margin: 0;
    font-family: var(--oecta-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--oecta-text-md);
    color: var(--oecta-on-surface);
    white-space: nowrap;
}
:is(#tab-event-embed, #ev-public) .ev-inv__sub { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) .ev-inv__row--rule { padding-block-start: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .ev-inv__row--total dt,
:is(#tab-event-embed, #ev-public) .ev-inv__row--strong dt,
:is(#tab-event-embed, #ev-public) .ev-inv__row--total dd,
:is(#tab-event-embed, #ev-public) .ev-inv__row--strong dd { font-weight: var(--oecta-weight-bold); }
:is(#tab-event-embed, #ev-public) .ev-inv__empty { margin: 0; font-size: var(--oecta-text-md); color: var(--oecta-on-surface-variant); }

/* The closed / full notice (portal.js _evClosedNotice): words on the page, one note, one button. */
:is(#tab-event-embed, #ev-public) .ned-closed { display: grid; gap: var(--oecta-space-md); max-inline-size: 640px; }
:is(#tab-event-embed, #ev-public) .ned-closed__h {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-xl);
    font-weight: var(--oecta-weight-bold);
    line-height: 1.25;
    color: var(--oecta-on-surface);
}
:is(#tab-event-embed, #ev-public) .ned-closed__text {
    margin: 0;
    font-size: var(--oecta-text-md);
    line-height: 1.6;
    color: var(--oecta-on-surface-variant);
}
:is(#tab-event-embed, #ev-public) .ned-closed__text strong { color: var(--oecta-on-surface); }
:is(#tab-event-embed, #ev-public) .ned-closed__acts { margin: 0; }
/* The ticket card's row of buttons: the legacy .manage-action-bar strip (style2.css: a light
   panel with padding and a rule) does not belong inside the card. */
:is(#tab-event-embed, #ev-public) .ned-ticket .manage-action-bar { padding: 0; border: 0; background: none; }
:is(#tab-event-embed, #ev-public) .ned-ticket__cancel { display: inline-flex; align-items: center; }

/* The "check your details" step before the form (profile.js renderProfileReview): two tonal
   sections on the page (no card around them, no box per field, no rules), readable labels, a 44px
   row per field, the inputs at 16px (no iOS zoom). style2.css forces body.dark-mode .lean-section's
   background to the dark value of the same surface-low token, so both modes agree. */
:is(#tab-event-embed, #ev-public) #profile-review-section { display: grid; gap: var(--oecta-space-lg); max-inline-size: 880px; }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-review-intro { margin: 0; }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-section {
    margin: 0;
    padding: var(--oecta-space-lg) var(--oecta-space-xl);
    border: 0;
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-low);
    box-shadow: none;
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-section-header {
    margin: 0 0 var(--oecta-space-sm);
    padding: 0;
    border: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-md);
    color: var(--oecta-on-surface);
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-section-header .material-icons-outlined { color: var(--oecta-primary-text); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-field-grid { column-gap: var(--oecta-space-xl); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-field-row {
    justify-content: center;
    min-block-size: 44px;
    padding: var(--oecta-space-xs) 0;
    border: 0;
    border-radius: var(--oecta-radius-sm);
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-field-row:hover { background: none; }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-label {
    font-size: var(--oecta-text-xs);
    letter-spacing: 0.06em;
    color: var(--oecta-on-surface-variant);
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-editable { font-size: var(--oecta-text-md); color: var(--oecta-on-surface); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-field-row:hover .lean-editable { border-bottom-color: var(--oecta-outline); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-input {
    font-size: 16px;
    color: var(--oecta-on-surface);
    border-bottom-color: var(--oecta-primary-text);
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-assignment-card {
    margin: 0;
    padding: var(--oecta-space-sm) 0;
    border: 0;
    background: none;
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-assign-school { color: var(--oecta-on-surface); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-assign-school::after { color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-assign-position { color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-assign-meta { color: var(--oecta-on-surface-variant); background: var(--oecta-surface-container); }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-footer-actions { margin: 0; }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-footer-actions .lean-btn-primary {
    flex: 0 1 auto;
    min-block-size: 44px;
    padding: 0 var(--oecta-space-xl);
    border-radius: var(--oecta-radius-md);
    background: var(--oecta-primary);
    color: var(--oecta-on-primary);
    font-size: var(--oecta-text-md);
    font-weight: var(--oecta-weight-semibold);
}
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-footer-actions .lean-btn-primary:hover { background: var(--oecta-primary-hover); box-shadow: none; transform: none; }
:is(#tab-event-embed, #ev-public) #profile-review-section .lean-footer-actions .lean-btn-primary:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
/* The form (#custom-form): SurveyJS's panelless theme (app.js, this page only) takes the frame off each
   question; the form's own panels sit on the page too (no card per panel), and three adapter colours
   that fell under AA here are put on tokens: the unselected Yes/No words, the required star in dark
   mode, and the Complete button's words on amber (white was 2:1). */
:is(#tab-event-embed, #ev-public) #custom-form .sd-panel.sd-element--with-frame,
:is(#tab-event-embed, #ev-public) #custom-form .sd-page > .sd-row > .sd-element--with-frame {
    padding: var(--oecta-space-sm) 0;
    background: none;
    box-shadow: none;
}
:is(#tab-event-embed, #ev-public) #custom-form .sd-boolean__label { color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) #custom-form .sd-boolean__label .sv-string-viewer { color: inherit; }
:is(#tab-event-embed, #ev-public) #custom-form .sd-boolean.sd-boolean--checked .sd-boolean__label--true,
:is(#tab-event-embed, #ev-public) #custom-form .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label--false {
    background: var(--oecta-surface-lowest);
    color: var(--oecta-primary-text);
}
:is(#tab-event-embed, #ev-public) #custom-form .sd-question__required-text { color: var(--oecta-error-text); }
:is(#tab-event-embed, #ev-public) #custom-form .sd-boolean { background: var(--oecta-surface-container); }
:is(#tab-event-embed, #ev-public) #custom-form .sd-item--checked .sd-item__decorator { background: var(--oecta-primary-container); }
:is(#tab-event-embed, #ev-public) #custom-form .sd-item--checked .sd-item__decorator .sd-item__svg { fill: var(--oecta-on-primary); }
:is(#tab-event-embed, #ev-public) #custom-form .sd-navigation__complete-btn,
:is(#tab-event-embed, #ev-public) #custom-form .sd-navigation__complete-btn .sd-action__title { color: var(--oecta-on-accent); }
@media (max-width: 768px) {
    #tab-event-embed #custom-form .sd-navigation {
        inset-block-end: calc(var(--oecta-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        z-index: var(--oecta-z-bottom-nav);
    }
    :is(#tab-event-embed, #ev-public) #custom-form .sd-navigation__complete-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    :is(#tab-event-embed, #ev-public) #custom-form .sd-selectbase--multi-column {
        display: flex;
        flex-direction: column;
    }
}
/* ── END EVENT BODY ────────────────────────────────────────────────── */

/* ── THE PUBLIC PAGE (eventpage.html, 2026-10-11, slice 4) ────────────────
   What only the public page needs on top of the shared rules above: its own
   column (the 1100px events banner above it sets the width), the hidden page
   until the event is in, the public description, the closed notice's host, and
   the phone bar at the very bottom (there is no bottom menu on this page). */
#ev-public .ned-wrap[hidden] { display: none; }
/* The hosts the page fills are grid items of .ned-wrap: without this the tab strip's width (a scroll container in
   the portal, where it is the grid item itself) pushed the page sideways on a phone. */
#ev-public .ned-wrap > * { min-inline-size: 0; }
/* Words for a screen reader only (the tab's document count, "opens in a new tab"). portal.css carries the portal's
   copy; this page did not have one outside the Materials list. */
#ev-public .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#ev-public .ned-wrap { padding-block-start: var(--oecta-space-md); }
#ev-public .ned-ov__about { white-space: pre-line; }
#ev-public #ev-register-closed[hidden] { display: none; }
#ev-public #ev-register-closed:not([hidden]) { margin-block-end: var(--oecta-space-xl); }
#ev-public #ned-register-banner:empty { display: none; }
#ev-public .ev-loading { padding: var(--oecta-space-3xl) var(--oecta-space-lg); text-align: center; color: var(--oecta-on-surface-variant); }
#ev-public .ev-loading__h { margin: var(--oecta-space-lg) 0 0; font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface-variant); }
@media (max-width: 800px) {
    #ev-public.content-wrapper { padding-inline: var(--oecta-space-lg); }
}
/* At 320px the footer's centred org name ran 4px past both edges and the whole page scrolled sideways (before slice 4
   too). It wraps instead, on this page. */
body:has(#ev-public) .site-footer .footer-brand-block { max-inline-size: 100%; min-inline-size: 0; }
body:has(#ev-public) .site-footer .footer-brand-block > * { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    #ev-public .ned-wrap { padding-block-end: calc(88px + var(--oecta-space-lg) + env(safe-area-inset-bottom, 0px)); }
    #ev-public .oh-mobile-sticky-bar.ned-bar {
        inset-block-end: 0;
        padding-block-end: calc(var(--oecta-space-sm) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── THE WAIT-LIST FORM (registration.js App.openWaitlistModal, slice 4) ──
   One dialog for both pages (it opens from the head, the phone bar, the Register
   panel and the form's sold-out tier). Was ~40 inline styles with raw colours
   (white in dark mode, 1.5:1 placeholders); now the kit's tokens, light + dark,
   44px targets, 16px inputs (no iOS zoom). The focus trap, Escape and the return
   of focus are registration.js's (_wlTrap). */
#waitlist-modal {
    position: fixed;
    inset: 0;
    z-index: var(--oecta-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--oecta-space-lg);
    background: color-mix(in srgb, var(--oecta-primary-dark) 62%, transparent);
}
#waitlist-modal .ev-wl {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 480px;
    max-block-size: min(90dvh, 760px);
    overflow: hidden;
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-lowest);
    box-shadow: var(--oecta-shadow-xl);
    color: var(--oecta-on-surface);
    font-family: var(--oecta-font-body);
}
#waitlist-modal .ev-wl__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oecta-space-md);
    padding: var(--oecta-space-lg) var(--oecta-space-xl);
    background: var(--oecta-surface-low);
}
#waitlist-modal .ev-wl__title {
    margin: 0;
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    line-height: 1.3;
    color: var(--oecta-on-surface);
}
#waitlist-modal .ev-wl__close {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-inline-end: calc(-1 * var(--oecta-space-sm));
    border: 0;
    border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-on-surface-variant);
    cursor: pointer;
}
#waitlist-modal .ev-wl__close:hover { background: var(--oecta-surface-container); color: var(--oecta-on-surface); }
#waitlist-modal .ev-wl__body {
    display: grid;
    gap: var(--oecta-space-lg);
    padding: var(--oecta-space-lg) var(--oecta-space-xl) var(--oecta-space-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#waitlist-modal .ev-wl__event { display: grid; gap: 2px; margin: 0; }
#waitlist-modal .ev-wl__k {
    font-size: var(--oecta-text-xs);
    font-weight: var(--oecta-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oecta-on-surface-variant);
}
#waitlist-modal .ev-wl__v { font-size: var(--oecta-text-md); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface); overflow-wrap: anywhere; }
#waitlist-modal .ev-wl__how { margin: 0; font-size: var(--oecta-text-sm); line-height: 1.55; color: var(--oecta-on-surface-variant); }
#waitlist-modal .ev-wl__form { display: grid; gap: var(--oecta-space-md); margin: 0; }
#waitlist-modal .ev-wl__field { display: grid; gap: var(--oecta-space-xs); min-inline-size: 0; }
#waitlist-modal .ev-wl__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oecta-space-md); }
@media (max-width: 420px) { #waitlist-modal .ev-wl__row { grid-template-columns: minmax(0, 1fr); } }
#waitlist-modal .ev-wl__label { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface); }
#waitlist-modal .ev-wl__req { color: var(--oecta-error-text); }
#waitlist-modal .ev-wl__input {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--oecta-space-sm) var(--oecta-space-md);
    border: 1px solid var(--oecta-outline);
    border-radius: var(--oecta-radius-md);
    background: var(--oecta-surface-lowest);
    color: var(--oecta-on-surface);
    font: inherit;
    font-size: 16px;
}
#waitlist-modal .ev-wl__input::placeholder { color: var(--oecta-on-surface-variant); opacity: 1; }
#waitlist-modal .ev-wl__input:focus-visible { outline: none; border-color: var(--oecta-primary-text); box-shadow: var(--oecta-focus-ring); }
#waitlist-modal .ev-wl__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--oecta-space-sm); margin-block-start: var(--oecta-space-xs); }
#waitlist-modal .ev-wl__close:focus-visible,
#waitlist-modal .oecta-ev-btn:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
#waitlist-modal .ev-wl__done { display: grid; gap: var(--oecta-space-md); justify-items: center; text-align: center; padding-block: var(--oecta-space-sm); }
#waitlist-modal .ev-wl__done-h { margin: 0; font-family: var(--oecta-font-display); font-size: var(--oecta-text-xl); font-weight: var(--oecta-weight-bold); color: var(--oecta-on-surface); }
#waitlist-modal .ev-wl__done-p { margin: 0; font-size: var(--oecta-text-md); line-height: 1.55; color: var(--oecta-on-surface-variant); }
#waitlist-modal .ev-wl__done-p strong { color: var(--oecta-on-surface); }
#waitlist-modal .ev-wl__tick { inline-size: 48px; block-size: 48px; color: var(--oecta-success-text); }
@media (prefers-reduced-motion: reduce) { #waitlist-modal * { transition: none; } }
/* ── END THE WAIT-LIST FORM ─────────────────────────────────────────── */
/* The walk-up door note (eventpage.html ?walkup=true) — the kit's note above the form. */
#ev-public .ev-walkup { margin-block-end: var(--oecta-space-lg); max-inline-size: 880px; }
#ev-public .ev-walkup p { margin: 0; }
/* The header bar above the page (the tabs left it in slice 4): the brand is a real link home (it was a div with an
   onclick), the session bar sits at the end, and the floating scroll arrow is retired here as in the portal — it sat
   over the text and, on a phone, over the action bar. */
body:has(#ev-public) .events-hero-nav .ev-pub-brand { text-decoration: none; color: inherit; border-radius: var(--oecta-radius-md); }
body:has(#ev-public) .events-hero-nav .ev-pub-brand:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
body:has(#ev-public) .events-hero-nav .ev-pub-brand .mep-header-title,
body:has(#ev-public) .events-hero-nav .ev-pub-brand .mep-header-sub { display: block; }
body:has(#ev-public) .events-hero-nav .mep-header-actions { margin-inline-start: auto; }
body:has(#ev-public) #scroll-hint { display: none; }

/* ═══ PRIVATE PREVIEW (registration.js, 2026-10-21) ═══
   A preview link's banner and its "nothing was saved" result. */
#ev-public .ev-preview-banner {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    padding: var(--oecta-space-sm) var(--oecta-space-lg);
    background: var(--oecta-primary-container);
    color: var(--oecta-on-primary-container);
    font-size: var(--oecta-text-md);
    line-height: 1.45;
    text-align: center;
}
#ev-public .ev-preview-result {
    display: grid;
    gap: var(--oecta-space-md);
    margin-block: var(--oecta-space-lg);
    padding: var(--oecta-space-lg);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-container-low, var(--oecta-surface));
    color: var(--oecta-on-surface);
}
#ev-public .ev-preview-result:focus-visible { outline: 3px solid var(--oecta-focus-ring); outline-offset: 2px; }
#ev-public .ev-preview-result__h { margin: 0; font-family: var(--oecta-font-display); font-size: var(--oecta-text-xl); font-weight: var(--oecta-weight-bold); color: var(--oecta-primary-text); }
#ev-public .ev-preview-result__list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--oecta-space-sm); }
#ev-public .ev-preview-result__note { margin: 0; color: var(--oecta-on-surface-variant); font-size: var(--oecta-text-md); }

/* ═══ OFFICE HELP (event-page.js App.officeHelpMountAll, 2026-10-22) ═══
   The Help tab (eventpage.html) and the Overview's "Questions?" box (both pages): the phone with the office's
   hours, and a member's note to the office or the helpdesk address. Defined here for BOTH hosts — style2.css's
   .events-v2 .oh-help__* rules never reached the portal's #tab-event-embed. */
:is(#tab-event-embed, #ev-public) .oh-help__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oecta-space-md); }
@media (min-width: 769px) {
    :is(#tab-event-embed, #ev-public) .oh-help__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(#tab-event-embed, #ev-public) .oh-help__grid--compact { grid-template-columns: minmax(0, 1fr); gap: var(--oecta-space-sm); }
:is(#tab-event-embed, #ev-public) .oh-help__card {
    display: flex;
    flex-direction: column;
    gap: var(--oecta-space-xs);
    min-inline-size: 0;
    margin: 0;
    padding: var(--oecta-space-lg);
    border-radius: var(--oecta-radius-xl);
    background: var(--oecta-surface-lowest);
    box-shadow: var(--oecta-shadow-sm);
    color: var(--oecta-on-surface);
    text-decoration: none;
}
:is(#tab-event-embed, #ev-public) .oh-help__grid--compact .oh-help__card { padding: var(--oecta-space-md); background: var(--oecta-surface-low); box-shadow: none; }
:is(#tab-event-embed, #ev-public) a.oh-help__card:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .oh-help__label { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) .oh-help__value { font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-bold); color: var(--oecta-primary-text); overflow-wrap: anywhere; }
:is(#tab-event-embed, #ev-public) .oh-help__hint { font-size: var(--oecta-text-sm); line-height: 1.5; color: var(--oecta-on-surface-variant); }
:is(#tab-event-embed, #ev-public) .oh-help__hint:empty { display: none; }
:is(#tab-event-embed, #ev-public) .oh-help__input {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 88px;
    padding: var(--oecta-space-sm) var(--oecta-space-md);
    border: 1px solid var(--oecta-outline);
    border-radius: var(--oecta-radius-md);
    background: var(--oecta-surface-lowest);
    color: var(--oecta-on-surface);
    font: inherit;
    font-size: 16px;
    resize: vertical;
}
:is(#tab-event-embed, #ev-public) .oh-help__input:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
:is(#tab-event-embed, #ev-public) .oh-help__send { align-self: flex-start; min-block-size: 44px; }
:is(#tab-event-embed, #ev-public) .oh-help__sent { margin: 0; font-size: var(--oecta-text-sm); color: var(--oecta-on-surface); }
:is(#tab-event-embed, #ev-public) .oh-help__sent:empty { display: none; }