/* =========================================================================
   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) and eventpage.html; 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; }
: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: 767.98px) {
    :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-overview-cta-btn { display: none; } /* the bar carries the one action */
    :is(#tab-event-embed, #ev-public) .ned-band__btns { display: contents; }   /* so the hidden button leaves no gap */
    :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; }
/* A deadline's band is amber: its words stay dark in dark mode too (ao-event-card.css gives the kind
   --oecta-on-surface, which turns light there — 1.8:1 on amber, measured). */
#tab-event-embed .evn-art.ao-evc--k-deadline { --aoe-kind-ink: var(--oecta-on-accent); }
#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; }
/* The description keeps .ao-event-desc and the Writer's blocks (ao-blocks.css). Their --aod-* roles are resolved
   once on :root (light), so in dark mode a callout stayed a light card; here they follow the theme. */
#tab-event-embed .evn-ov .ned-ov__desc {
    max-inline-size: 72ch;
    --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);
}
/* The attachments list (app.js _aoAttHtml) on the page's own surfaces, light and dark. */
#tab-event-embed .evn-ov .oh-att { margin: 0; max-inline-size: 72ch; }
#tab-event-embed .evn-ov .oh-att__head { color: var(--oecta-on-surface-variant); }
#tab-event-embed .evn-ov .oh-att__link { min-block-size: 44px; box-sizing: border-box; background: var(--oecta-surface-container); color: var(--oecta-primary-text); }
#tab-event-embed .evn-ov .oh-att__link:hover { background: var(--oecta-surface-high); }
#tab-event-embed .evn-ov .oh-att__link:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }
/* The taps' and the reveals' 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, .ev-reveal) .material-icons-outlined { color: var(--oecta-primary-text); }
/* The reveals and the taps keep their markup (style2.css); on this page they sit in the grid's columns. */
#tab-event-embed .evn-ov .ev-reveals { margin: 0; max-inline-size: 72ch; }
#tab-event-embed .evn-ov .ev-reveals__h {
    margin: 0 0 var(--oecta-space-sm);
    font-family: var(--oecta-font-display);
    font-size: var(--oecta-text-lg);
    font-weight: var(--oecta-weight-bold);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    color: var(--oecta-on-surface);
}
#tab-event-embed .evn-taps { margin-block-start: 0; }
#tab-event-embed .evn-bar__act { display: contents; }
@media (max-width: 767.98px) {
    #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 ───────────────────────────────────────────────── */

/* ── 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); }
/* ── 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: 767.98px) {
    #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; }