/*
 * SS Events — Visitor FE styles
 *
 * Conforms to Simple Theme chrome contract:
 *   - All colors via --shell-* tokens with literal fallbacks
 *   - All sections rooted as <section data-ssla-type="..."> per Launch section
 *     authoring contract
 *   - All editable fields carry data-ssla-field bindings
 *   - 0px border-radius on chrome surfaces; native pill/toggle/time inputs
 *     keep their canonical radii for affordance recognition
 *
 * @since 1.5.0
 */

/* ─────────── v1.8.12 Token defaults (locked palette) ───────────
 * The registration surface relies on --ssla-* tokens. On themes that don't
 * define them, they must still resolve — so we alias the locked SimpleSuite
 * palette here (from ss-events-build-contract-v1.1 §4.2 + ui-conformance
 * audit). This is what stops the "unstyled browser defaults" look: without
 * these, inputs/cards/buttons fell back to raw UA styling (hard black
 * borders, flat colors). Theme --ss-* vars still win via the cascade when
 * present; these are the floor.
 */
:root {
    /* SSE editorial design — baked in per sse-visual-contract-v1.
       The plugin ships the real SimpleSuite identity as defaults; Hub/Simple
       Theme MAY repaint via --shell-* but the default is the designed look,
       never a bland floor. (Retires the prior no-named-font invariant.) */
    --shell-bg:           #FFFFFF;
    --shell-bg-secondary: #FAF9F5;
    --shell-card:         #F5F4F0;
    --shell-h:            #1A1A1A;
    --shell-t:            #2B2B2B;
    --shell-m:            #6B6A64;
    --shell-line:         #D3D1C7;
    --shell-accent:       #A9835A;
    --shell-accent-warm:  #D4740E;
    --shell-success:      #1D9E75;
    --shell-error:        #C0392B;
    /* v1.13.0 (D1): typography defers to the active theme font. No named
       webfonts. Headings keep editorial size/weight/spacing; only the
       typeface inherits from the theme (e.g. Simple Theme / Montserrat). */
    --shell-hf: inherit;
    --shell-bf: inherit;
    /* mode accents — sparse (text/dot/icon), never fills */
    --sse-meeting:    #4A6FA5;
    --sse-engagement: #5B8C5A;
    --sse-ondemand:   #D4740E;
    /* legacy --ssla-* aliases (kept for back-compat) */
    --ssla-text-primary:   #1A1A1A;
    --ssla-text-secondary: #666663;
    --ssla-text-tertiary:  #B4B2A9;
    --ssla-line:           #D3D1C7;
    --ssla-tone-bg:        #FFFFFF;
    --ssla-tone-card:      #F5F4F0;
    --ssla-accent:         #A9835A;
    --ssla-accent-meeting: #4A6FA5;
    --ssla-accent-event:   #5B8C5A;
    --ssla-success:        #1D9E75;
    --ssla-danger:         #C0392B;
}
/* v1.14.10 — Adoption-friendly cascade contract.
 *
 * Prior pattern (v1.13.x line through v1.14.09): every shell colour token was
 * re-declared with !important at SSE surface scope to "guarantee editorial
 * identity." The intent was theme-leak protection (Simple Theme's :root
 * system-ui font in particular); the side effect was that Launch presets and
 * any other higher-layer caller could not override colour tokens — !important
 * at this layer beat everything but a higher !important.
 *
 * The new contract:
 *
 *   1. Theme baseline    :root              (0,1,0)
 *   2. Module fallback   :root  (SSE CSS)   (0,1,0)   ← SIM defaults above
 *   3. Hub canonical     :root[data-ss-hub] (0,1,0)–(0,2,0) [future]
 *   4. Launch preset     body[data-ssla-preset="<slug>"] (0,2,0)+
 *   5. Module surface    surface-scope rules consume via var(), never re-declare
 *
 * Higher specificity wins by selector depth. No !important anywhere on colour
 * tokens. Font tokens stay protected at controlled specificity below — that's
 * the only legitimate reason this block needed to exist.
 *
 * Visual diff vs v1.14.09: zero. Launch and SSE both emit the SIM defaults
 * today, so the cascade resolves to the same values. The unlock is latent —
 * Launch presets can now flow through without !important fights.
 *
 * See: bible-amendment-css-specificity-token-adoption-v1.md
 */

/* Font-leak protection only. Targets the narrow legitimate concern that
 * justified the prior block: a theme leaking system-ui at :root would override
 * the editorial typeface. Specificity (0,1,1) beats :root (0,1,0) regardless
 * of stylesheet load order, without !important. Colour tokens are NOT
 * re-declared here — they cascade from :root and remain overridable. */
html [data-ssla-type^="sse-"] {
    --shell-hf: inherit;
    --shell-bf: inherit;
}

/* v1.13.01 #2a — hide the theme page title on SSE base pages (scoped via the
   sse-fe-page body class from Assets::body_class). Theme-independent: covers
   both the core post-title block and Simple Theme's st-page-title. */
body.sse-fe-page .wp-block-post-title,
body.sse-fe-page .st-page-title {
    display: none !important;
}

/* ─────────── Launch section container ─────────── */
/* v1.14.07: padding zeroed (was 56px). The 56px vertical pad was inserting
   an unwanted gap below the breadcrumb/toolbar tray on event-list and
   event-detail pages. Spacing is now governed by individual block chrome
   (toolbar margin-bottom, hero padding) rather than a wholesale section pad. */
.ssla-section {
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    padding: 0;
}
.ssla-section + .ssla-section { padding-top: 0; }
.ssla-section .container {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
}

/* v1.14.13 — vertical rhythm via real DOM buffer element.
 *
 * Four builds (v1.14.09 → v1.14.12) chased this in CSS. The v1.14.12 rule
 * `html [data-ssla-type^="sse-"] { margin-bottom: 46px }` was parsed and in
 * the stylesheet but computed to 0px with no traceable override. We gave up
 * on the cascade fight.
 *
 * `class-ask-events-block.php` now appends a `<div class="sse-block-buffer">`
 * after every sse/* block (except sse/breadcrumb) via a `render_block`
 * filter. That div is a real layout element. It can't be margin-collapsed,
 * can't be reset by an unseen `margin: 0` rule.
 *
 * Triple defense against theme resets that might try to suppress it:
 *   - &nbsp; content prevents `:empty { display: none }` from matching
 *   - both `min-height` and `height` defend against either being overridden
 *   - `html` prefix raises specificity above any theme `.sse-block-buffer` rule
 */
html .sse-block-buffer {
    min-height: 46px;
    height: 46px;
}
/* v1.65.0: the buffer immediately after the hero is collapsed to 0 — hero and
   registration now render as one continuous card (see "Hero block" section
   below) and any gap here would reopen the seam Glenn asked us to close.
   Scoped to this one adjacency only; every other `.sse-block-buffer` on the
   site (between other sse/* blocks) keeps its normal 46px rhythm. */
/* v1.65.01: the v1.65.0 override above only ever reset `min-height`/`height`.
   The div still carries a 19.2px `margin-top` (measured live — not set
   anywhere in this file for `.sse-block-buffer`, so it's an inherited
   block-level default, not an override we forgot) which alone reopened most
   of the "one box" gap. `margin: 0` (not just margin-top) since we have no
   evidence margin-bottom is always 0 either — safer to kill the whole box. */
html .sse-hero-bleed + .sse-block-buffer {
    min-height: 0;
    height: 0;
    margin: 0;
}
/* v1.65.01: the other ~16px of the leftover gap was the registration
   section's own `padding-top: 16px` (v1.64.0, see the "sse/event-registration"
   rule below) — breathing room written for the *previous*, non-merged
   design, never revisited when v1.65.0 fused the two cards. Zeroing it on
   the base rule would also strip it from the standalone-registration case
   (e.g. the `demo-bookable` seeded page, which renders `sse/event-registration`
   alone with no hero above it — see class-sse-demo-seeder.php — and the
   modal-trigger path in blocks/event-registration/render.php, where the
   section lives inside a hidden overlay, not adjacent to a hero at all), so
   this is scoped to the same hero+buffer adjacency as the rule above. `~`
   (not `+`) because the registration block always opens with an inline
   `<script>` (window.SSE_PAY, unconditional — see render.php) that sits
   between the buffer and the section in the sibling chain, breaking a plain
   adjacent-sibling match. */
html .sse-hero-bleed + .sse-block-buffer ~ [data-ssla-type="sse-event-registration"] {
    padding-top: 0;
}
/* v1.65.01: closing the vertical gap exposed a pre-existing horizontal jog —
   `.sse-reg-shell` carries its own `padding: 0 24px` (below), so the visible
   `.sse-reg-card` border sits inset 24px from the shell's outer edge on each
   side, while `.sse-hero`'s border sits flush with ITS outer edge (its 32px
   side padding is internal, on the bordered element itself). Measured live:
   with the shell padding in place, `.sse-reg-card`'s left/right edges land
   24px inside `.sse-hero`'s — a visible step in what should be one
   continuous border once the vertical seam is closed. Zeroing the shell's
   horizontal padding here lets `.sse-reg-card` (which fills the shell's
   content box) inherit the shell's full 80%/940–1060 width (v1.67.0; was
   680–1250), matching `.sse-hero` exactly; `.sse-reg-card`'s own 32px
   padding then mirrors `.sse-hero`'s 32px side padding for matching
   interior insets too. */
html .sse-hero-bleed + .sse-block-buffer ~ [data-ssla-type="sse-event-registration"] .sse-reg-shell {
    padding-left: 0;
    padding-right: 0;
}

/* ─────────── sse/event-details (hero) ─────────── */
[data-ssla-type="sse-event-details"] {
    background: var(--shell-card, #F5F4F0);
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-event-details"] .container {
    padding-top: 36px;
    padding-bottom: 36px;
}
[data-ssla-type="sse-event-details"] .sse-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin-bottom: 14px;
}
[data-ssla-type="sse-event-details"] .sse-eyebrow .sse-dot {
    width: 4px; height: 4px;
    background: var(--shell-m, rgba(26,26,26,0.4));
    border-radius: 50%;
}
[data-ssla-type="sse-event-details"] h1 {
    font-family: var(--shell-hf, sans-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 14px;
}
[data-ssla-type="sse-event-details"] .sse-lead {
    font-size: 16px;
    color: var(--shell-t, #2B2B2B);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 640px;
    opacity: 0.85;
}
[data-ssla-type="sse-event-details"] .sse-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding-top: 20px;
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-event-details"] .sse-meta-item {
    display: flex; flex-direction: column; gap: 4px;
}
[data-ssla-type="sse-event-details"] .sse-meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-event-details"] .sse-meta-value {
    font-size: 14px;
    /* v1.14.11: --shell-h → --shell-t per canonical hierarchy.
     * Meta values are body data, not headings. Prototype line 116. */
    color: var(--shell-t, #2B2B2B);
    font-weight: 500;
}
[data-ssla-type="sse-event-details"] .sse-meta-value svg {
    vertical-align: -2px;
    margin-right: 6px;
    color: var(--shell-m, rgba(26,26,26,0.6));
}

/* ─────────── sse/event-registration (slot picker + form) ─────────── */
[data-ssla-type="sse-event-registration"] {
    background: var(--shell-bg, #FFFFFF);
    /* v1.64.0: modest top/bottom breathing room so the card doesn't sit
       flush against the hero band above / footer chrome below. Kept small
       on top since the auto-inserted .sse-block-buffer (46px, see the
       "vertical rhythm" note near the top of this file) already separates
       this section from the hero. */
    padding: 16px 0 56px;
    box-sizing: border-box;
}
[data-ssla-type="sse-event-registration"] h2 {
    font-family: var(--shell-hf, sans-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 22px;
}

/* Bookable mode: slot picker grid */
[data-ssla-type="sse-event-registration"] .sse-booking-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}
[data-ssla-type="sse-event-registration"] .sse-cal-pane,
[data-ssla-type="sse-event-registration"] .sse-slots-pane {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 24px;
}
[data-ssla-type="sse-event-registration"] .sse-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
[data-ssla-type="sse-event-registration"] .sse-cal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    margin: 0;
}
[data-ssla-type="sse-event-registration"] .sse-cal-nav {
    display: flex;
    gap: 4px;
}
[data-ssla-type="sse-event-registration"] .sse-cal-nav button {
    background: transparent;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-m, rgba(26,26,26,0.6));
}
[data-ssla-type="sse-event-registration"] .sse-cal-nav button:hover {
    border-color: var(--shell-h, #1A1A1A);
    color: var(--shell-h, #1A1A1A);
}
[data-ssla-type="sse-event-registration"] .sse-cal-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
[data-ssla-type="sse-event-registration"] .sse-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
[data-ssla-type="sse-event-registration"] .sse-cal-dow {
    text-align: center;
    font-size: 11px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 0;
    font-weight: 500;
}
[data-ssla-type="sse-event-registration"] .sse-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: 0.5px solid transparent;
    /* v1.14.11: --shell-h → --shell-t per canonical hierarchy.
     * Day numbers are body data. Hover border + selected state stay on
     * --shell-h (action affordance). */
    color: var(--shell-t, #2B2B2B);
    position: relative;
    background: var(--shell-bg, #FFFFFF);
}
[data-ssla-type="sse-event-registration"] .sse-cal-day:hover:not(.sse-disabled):not(.sse-empty) {
    border-color: var(--shell-h, #1A1A1A);
}
[data-ssla-type="sse-event-registration"] .sse-cal-day.sse-available {
    font-weight: 500;
}
[data-ssla-type="sse-event-registration"] .sse-cal-day.sse-available::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px; height: 4px;
    background: var(--shell-accent, var(--ss-accent, #A9835A));
    border-radius: 50%;
}
[data-ssla-type="sse-event-registration"] .sse-cal-day.sse-disabled {
    color: var(--shell-m, rgba(26,26,26,0.4));
    cursor: not-allowed;
}
[data-ssla-type="sse-event-registration"] .sse-cal-day.sse-empty { cursor: default; }
/* v1.14.08: scoped .sse-cal-day.sse-selected dead-code removed — the unscoped
 * rule later in this file always won by cascade order. Canonical definition
 * lives in the .sse-reg-cal block below, retargeted to --shell-h (action). */
[data-ssla-type="sse-event-registration"] .sse-cal-day.sse-today:not(.sse-selected) {
    border-color: var(--shell-line, #D3D1C7);
}

[data-ssla-type="sse-event-registration"] .sse-slots-pane {
    max-height: 480px;
    overflow-y: auto;
}
[data-ssla-type="sse-event-registration"] .sse-slots-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    margin-bottom: 14px;
}
[data-ssla-type="sse-event-registration"] .sse-slots-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[data-ssla-type="sse-event-registration"] .sse-slot-btn {
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 11px 14px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    /* v1.14.11: --shell-h → --shell-t per canonical hierarchy.
     * Slot text is data; hover border + selected state stay action role. */
    color: var(--shell-t, #2B2B2B);
    font-family: inherit;
    transition: border-color 0.15s;
}
[data-ssla-type="sse-event-registration"] .sse-slot-btn:hover {
    border-color: var(--shell-h, #1A1A1A);
}
/* v1.14.08: scoped .sse-slot-btn.sse-selected dead-code removed — see note above.
 * Canonical definition is the unscoped rule below, retargeted to --shell-h. */
[data-ssla-type="sse-event-registration"] .sse-slots-empty {
    color: var(--shell-m, rgba(26,26,26,0.55));
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
    font-style: italic;
}
[data-ssla-type="sse-event-registration"] .sse-slots-loading {
    color: var(--shell-m, rgba(26,26,26,0.55));
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}
[data-ssla-type="sse-event-registration"] .sse-timezone-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}

[data-ssla-type="sse-event-registration"] .sse-booking-confirm {
    background: var(--shell-h, #1A1A1A);
    color: var(--shell-bg, #FFFFFF);
    padding: 18px 22px;
    margin-top: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
[data-ssla-type="sse-event-registration"] .sse-booking-confirm .sse-confirm-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
    display: block;
    margin-bottom: 2px;
}
[data-ssla-type="sse-event-registration"] .sse-booking-confirm .sse-confirm-value {
    font-weight: 500;
}

/* ─────────── Modal (visitor registration form) ─────────── */
#sse-visitor-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    overflow-y: auto;
}
#sse-visitor-modal.sse-show { display: flex; }
#sse-visitor-modal .sse-modal-inner {
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    max-width: 480px;
    width: 100%;
    padding: 32px 36px;
}
#sse-visitor-modal .sse-modal-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    cursor: pointer;
    padding: 0;
    float: right;
    margin-top: -8px;
    margin-right: -8px;
    font-family: inherit;
}
#sse-visitor-modal h2 {
    font-family: var(--shell-hf, sans-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
#sse-visitor-modal .sse-modal-lead {
    font-size: 14px;
    color: var(--shell-t, #2B2B2B);
    opacity: 0.75;
    margin-bottom: 24px;
}
#sse-visitor-modal .sse-recap {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13px;
}
#sse-visitor-modal .sse-recap-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--shell-h, #1A1A1A);
}
#sse-visitor-modal .sse-recap-label {
    color: var(--shell-m, rgba(26,26,26,0.55));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
#sse-visitor-modal .sse-form-field {
    margin-bottom: 16px;
}
#sse-visitor-modal .sse-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    /* v1.14.11: --shell-h → --shell-m per canonical hierarchy.
     * Form labels are label role (secondary), not heading. */
    color: var(--shell-m, #6B6A64);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#sse-visitor-modal input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
    font-size: 14px;
    font-family: inherit;
    color: var(--shell-h, #1A1A1A);
    outline: none;
}
#sse-visitor-modal input:focus {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
}
#sse-visitor-modal .sse-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
#sse-visitor-modal .sse-divider {
    height: 0.5px;
    background: var(--shell-line, #D3D1C7);
    margin: 20px 0;
}
#sse-visitor-modal .sse-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* ----------------------------------------------------------------------------
 * v1.14.08: Three-role color policy adopted across the registration surface.
 *
 * Role           | Token              | Default       | Used on
 * -------------- | ------------------ | ------------- | -------------------
 * Action         | --shell-h          | #1A1A1A char  | CTAs, selected day,
 *                |                    |               | selected slot, primary
 *                |                    |               | success-state buttons
 * Value          | --shell-accent     | #A9835A indigo| Pricing, badges,
 *                |                    |               | discount validation
 * Identity       | --sse-{archetype}  | varies        | Eyebrow chip + dot,
 *                |                    |               | available-date dot
 *                |                    |               | (sparse, never fills)
 *
 * Headings (color + font) consume --shell-h + --shell-hf — already correct.
 * Body text uses --shell-t (#2B2B2B). Muted uses --shell-m.
 *
 * Canonical literal fallbacks match the SIM palette (Bible Ch 9.1, prototype):
 * --shell-h #1A1A1A · --shell-t #2B2B2B · --shell-m #6B6A64 ·
 * --shell-bg #FFFFFF · --shell-bg-secondary #FAF9F5 · --shell-card #F5F4F0 ·
 * --shell-line #D3D1C7 · --shell-accent #A9835A · --shell-accent-warm #D4740E
 *
 * Every var(token, literal) fallback in this file aligns to that palette so
 * the plugin paints coherently on first load with no theme binding required.
 * ----------------------------------------------------------------------------
 * Buttons (visitor side, matches plugin canonical) */
.sse-fe-btn {
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border: 0;
    padding: 0 16px;
    height: 36px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
    transition: opacity 0.15s;
    display: inline-flex;
    align-items: center;
}
.sse-fe-btn:hover { opacity: 0.9; }
/* v1.7.02: explicit primary alias. .sse-fe-btn alone already styles primary,
   but render.php uses .sse-fe-btn.sse-fe-btn-primary for class clarity. */
.sse-fe-btn.sse-fe-btn-primary {
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
}
.sse-fe-btn.sse-fe-btn-secondary {
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-m, rgba(26,26,26,0.7));
    border: 0.5px solid var(--shell-line, #D3D1C7);
    height: 32px;
    padding: 0 14px;
}
.sse-fe-btn.sse-fe-btn-secondary:hover {
    color: var(--shell-h, #1A1A1A);
    opacity: 1;
}
.sse-fe-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Success state */
.sse-success-icon {
    width: 56px; height: 56px;
    background: #E7F0E7;
    border: 0.5px solid #5B8C5A;
    display: flex; align-items: center; justify-content: center;
    color: #5B8C5A;
    margin: 0 auto 16px;
}
.sse-success-detail {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 13px;
    text-align: left;
    color: var(--shell-h, #1A1A1A);
}
.sse-success-detail strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

/* Spinner */
.sse-fe-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sse-fe-spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}
@keyframes sse-fe-spin { to { transform: rotate(360deg); } }

/* Error banner */
.sse-fe-error {
    background: #FAEDD6;
    border: 0.5px solid #C97A3C;
    color: #8A5325;
    padding: 10px 14px;
    font-size: 12px;
    margin-bottom: 16px;
}

@media (max-width: 700px) {
    [data-ssla-type="sse-event-registration"] .sse-booking-grid {
        grid-template-columns: 1fr;
    }
    [data-ssla-type="sse-event-details"] h1 { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.6.0 — FE block sweep
   Adds visitor styles for the 8 blocks brought to contract conformance:
   event-list, single-event, my-bookings, video, event-cta, event-pricing,
   course-catalog, event-calendar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────── sse/event-list ─────────── */
[data-ssla-type="sse-event-list"] .sse-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
[data-ssla-type="sse-event-list"] .sse-event-list-item + .sse-event-list-item {
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-event-list"] .sse-event-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    text-decoration: none;
    color: var(--shell-t, #2B2B2B);
    transition: color 0.15s ease;
}
[data-ssla-type="sse-event-list"] .sse-event-list-link:hover {
    color: var(--shell-accent, var(--ss-accent, #A9835A));
}
[data-ssla-type="sse-event-list"] .sse-event-list-main {
    flex: 1;
    min-width: 0;
}
[data-ssla-type="sse-event-list"] .sse-event-list-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 4px;
    line-height: 1.3;
}
[data-ssla-type="sse-event-list"] .sse-event-list-when {
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-event-list"] .sse-event-list-price {
    font-size: 14px;
    font-weight: 500;
    /* v1.14.12: --shell-h → --shell-accent per three-role policy.
     * Pricing is value-role, not action/heading. */
    color: var(--shell-accent, #A9835A);
    white-space: nowrap;
}
[data-ssla-type="sse-event-list"] .sse-list-empty {
    color: var(--shell-m, rgba(26,26,26,0.55));
    font-size: 14px;
}

/* ─────────── sse/single-event ─────────── */
[data-ssla-type="sse-single-event"] .sse-single-event-card {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 28px;
}
[data-ssla-type="sse-single-event"] .sse-single-event-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 8px;
}
[data-ssla-type="sse-single-event"] .sse-single-event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin-bottom: 14px;
}
[data-ssla-type="sse-single-event"] .sse-single-event-meta .sse-dot {
    width: 4px; height: 4px;
    background: var(--shell-m, rgba(26,26,26,0.4));
    border-radius: 50%;
}
[data-ssla-type="sse-single-event"] .sse-single-event-description {
    font-size: 14px;
    color: var(--shell-t, #2B2B2B);
    line-height: 1.6;
    margin-bottom: 18px;
}
[data-ssla-type="sse-single-event"] .sse-single-event-cta {
    display: inline-block;
    /* v1.14.08: action role — charcoal. */
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
}

/* ─────────── sse/my-bookings ─────────── */
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-group + .sse-my-bookings-group {
    margin-top: 36px;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-heading {
    font-family: var(--shell-hf, sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin: 0 0 14px;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-item:first-child {
    border-top: none;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-item.is-past {
    opacity: 0.65;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--shell-h, #1A1A1A);
    margin-bottom: 2px;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-when {
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-action {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    color: var(--shell-h, #1A1A1A);
    border: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-action:hover {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
    color: var(--shell-accent, var(--ss-accent, #A9835A));
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-action-cancel:hover {
    border-color: #C97A3C;
    color: #C97A3C;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-empty {
    text-align: center;
    padding: 24px 0;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-empty p {
    margin: 0 0 14px;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-cta {
    display: inline-block;
    /* v1.14.08: action role — charcoal. */
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
}

/* ─────────── sse/video ─────────── */
[data-ssla-type="sse-video"] .sse-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
[data-ssla-type="sse-video"] .sse-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─────────── sse/event-cta ─────────── */
[data-ssla-type="sse-event-cta"] {
    text-align: center;
}
[data-ssla-type="sse-event-cta"] .sse-cta-button {
    display: inline-block;
    /* v1.14.08: action role — charcoal. */
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 0 24px;
    height: 36px;
    line-height: 36px;
    transition: opacity 0.15s ease;
}
[data-ssla-type="sse-event-cta"] .sse-cta-button:hover {
    opacity: 0.9;
}
[data-ssla-type="sse-event-cta"] .sse-cta-price-suffix {
    margin-left: 4px;
    opacity: 0.85;
}

/* ─────────── sse/event-pricing ─────────── */
[data-ssla-type="sse-event-pricing"] .sse-pricing-card {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 24px;
    text-align: center;
    max-width: 360px;
    margin: 0 auto;
}
[data-ssla-type="sse-event-pricing"] .sse-pricing-tier-name {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin-bottom: 6px;
}
[data-ssla-type="sse-event-pricing"] .sse-pricing-amount {
    font-family: var(--shell-hf, sans-serif);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    /* v1.14.12: --shell-h → --shell-accent per three-role policy. */
    color: var(--shell-accent, #A9835A);
    margin-bottom: 10px;
    line-height: 1;
}
[data-ssla-type="sse-event-pricing"] .sse-pricing-countdown {
    font-size: 12px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin-bottom: 4px;
}
[data-ssla-type="sse-event-pricing"] .sse-pricing-spots {
    font-size: 12px;
    color: #C97A3C;
    font-weight: 500;
}

/* ─────────── sse/course-catalog ─────────── */
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-card {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-card:hover {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-card-link {
    display: block;
    text-decoration: none;
    color: var(--shell-t, #2B2B2B);
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-thumb img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-body {
    padding: 16px;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 6px;
    line-height: 1.3;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-excerpt {
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.65));
    line-height: 1.5;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-empty {
    color: var(--shell-m, rgba(26,26,26,0.55));
    text-align: center;
    padding: 24px 0;
}

/* ─────────── sse/event-calendar ─────────── */
[data-ssla-type="sse-event-calendar"] .sse-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    text-decoration: none;
    color: var(--shell-h, #1A1A1A);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    font-size: 14px;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-nav:hover {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
    color: var(--shell-accent, var(--ss-accent, #A9835A));
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-month {
    font-family: var(--shell-hf, sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    margin: 0;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border-left: 0.5px solid var(--shell-line, #D3D1C7);
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-dow {
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--shell-m, rgba(26,26,26,0.55));
    background: var(--shell-card, #F5F4F0);
    border-right: 0.5px solid var(--shell-line, #D3D1C7);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
    text-align: center;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day {
    min-height: 84px;
    padding: 4px;
    border-right: 0.5px solid var(--shell-line, #D3D1C7);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
    font-size: 12px;
    position: relative;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day.is-blank {
    background: rgba(0,0,0,0.02);
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day.is-today .sse-calendar-day-num {
    background: var(--shell-accent, var(--ss-accent, #A9835A));
    color: #FFFFFF;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day-num {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: var(--shell-t, #2B2B2B);
    font-weight: 500;
    border-radius: 50%;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day-events {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-event {
    display: block;
    padding: 2px 4px;
    margin-bottom: 2px;
    font-size: 10px;
    text-decoration: none;
    color: #FFFFFF;
    background: var(--shell-accent, var(--ss-accent, #A9835A));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-event-time {
    font-weight: 500;
    margin-right: 4px;
    opacity: 0.85;
}

@media (max-width: 700px) {
    [data-ssla-type="sse-event-calendar"] .sse-calendar-day {
        min-height: 56px;
    }
    [data-ssla-type="sse-event-calendar"] .sse-calendar-event-title {
        display: none;
    }
    [data-ssla-type="sse-course-catalog"] .sse-course-catalog-grid {
        grid-template-columns: 1fr;
    }
    [data-ssla-type="sse-my-bookings"] .sse-my-bookings-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.7.0 — sse/event-list CARD layout (replaces legacy bootstrap cards from
   render_event_list_block in class-ask-events-block.php).
   ═══════════════════════════════════════════════════════════════════════════ */

[data-ssla-type="sse-event-list"] .sse-event-list-container {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
}

[data-ssla-type="sse-event-list"] .sse-event-list-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-event-list"] .sse-event-list-filter-label {
    font-weight: 500;
}
[data-ssla-type="sse-event-list"] .sse-event-list-filter select {
    height: 32px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    font-size: 13px;
    outline: none;
}
[data-ssla-type="sse-event-list"] .sse-event-list-filter select:focus {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
}

[data-ssla-type="sse-event-list"] .sse-event-list-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--shell-m, rgba(26,26,26,0.55));
    font-size: 14px;
    background: var(--shell-bg-secondary, #FAF9F5);
}

/* v1.13.0 #5 — card grid. v1.14.02: capped at 3 columns; responsive collapse. */
[data-ssla-type="sse-event-list"] .sse-event-list-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    [data-ssla-type="sse-event-list"] .sse-event-list-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    [data-ssla-type="sse-event-list"] .sse-event-list-cards { grid-template-columns: 1fr; }
}
[data-ssla-type="sse-event-list"] .sse-event-list-card[hidden] { display: none; }

[data-ssla-type="sse-event-list"] .sse-event-list-card {
    display: flex;
    flex-direction: column;
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    overflow: hidden;
}

/* Thumbnail — real featured image OR mode archetype icon-card. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-thumb {
    aspect-ratio: 16 / 10;
    background: var(--shell-card, #F5F4F0);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}

/* Mode tag — colored eyebrow, mirrors the hero mode tag. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-mode-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

[data-ssla-type="sse-event-list"] .sse-event-list-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
/* v1.14.09: typography conformity with event-details hero.
 * Card title uses the hero's weight (600), letter-spacing (-0.02em), and
 * line-height (1.2) — scaled smaller for grid context. Description picks
 * up the hero's 0.85 opacity. Eyebrow above already aligned to 0.06em
 * tracking to match the hero's chip. Result: index cards and detail page
 * read as one typographic family at two scales. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 8px;
    line-height: 1.2;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-desc {
    font-size: 14px;
    color: var(--shell-t, #2B2B2B);
    margin: 0 0 8px;
    line-height: 1.6;
    opacity: 0.85;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-date {
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin: 0 0 16px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-date strong {
    color: var(--shell-t, #2B2B2B);
    font-weight: 500;
}

[data-ssla-type="sse-event-list"] .sse-event-list-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto; /* pin CTA to card bottom for even rows */
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-actions .sse-fe-btn {
    text-decoration: none;
}
/* v1.14.14: pre-archetype context — event list cards have no chosen event
   yet, so primary CTAs surface in value-role indigo per the refined
   three-role policy (action=charcoal, value=indigo, archetype=mode-token).
   Specificity (0,3,0) beats the global .sse-fe-btn.sse-fe-btn-primary (0,2,0)
   at line ~582 without needing !important. Disabled keeps neutral grey
   (no action signal at all). */
[data-ssla-type="sse-event-list"] .sse-event-list-card-actions .sse-fe-btn-primary {
    background: var(--shell-accent, #A9835A);
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-actions .sse-fe-btn-disabled {
    background: var(--shell-line, #D3D1C7);
    color: var(--shell-m, rgba(26,26,26,0.55));
}

@media (max-width: 600px) {
    [data-ssla-type="sse-event-list"] .sse-event-list-cards {
        grid-template-columns: 1fr;
    }
}

/* ─────────── Band 6 (v1.8.05) — Access gate block message ─────────── */
[data-ssla-type="sse-event-registration"] .sse-gate-block {
    display: flex;
    gap: 16px;
    padding: 24px 28px;
    background: var(--ssla-tone-card, #FAF9F5);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    align-items: flex-start;
}
[data-ssla-type="sse-event-registration"] .sse-gate-block-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ssla-tone-bg, #FFFFFF);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    color: var(--ssla-text-secondary, #666663);
}
[data-ssla-type="sse-event-registration"] .sse-gate-block-body {
    flex: 1 1 auto;
}
[data-ssla-type="sse-event-registration"] .sse-gate-block-heading {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ssla-text-primary, #1A1A1A);
    margin: 0 0 12px;
}
[data-ssla-type="sse-event-registration"] .sse-gate-block-body .sse-fe-btn {
    margin: 0;
}

/* ─────────── Band 8 (v1.8.07) — FE rebuild ─────────── */

/* Gate badge — surfaces at card/title level on gated events */
.sse-gate-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 0;
    line-height: 1.2;
    vertical-align: middle;
    margin-left: 8px;
}
.sse-gate-badge-gated {
    background: var(--ssla-tone-card, #FAF9F5);
    color: var(--ssla-text-secondary, #666663);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
}

/* event-list — title row alignment */
[data-ssla-type="sse-event-list"] .sse-event-list-card-titlebar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card-titlebar .sse-event-list-card-title {
    margin: 0;
}

/* single-event title row alignment */
[data-ssla-type="sse-single-event"] .sse-single-event-titlebar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
[data-ssla-type="sse-single-event"] .sse-single-event-titlebar .sse-single-event-title {
    margin: 0;
}

/* event-details — gate badge row above eyebrow */
[data-ssla-type="sse-event-details"] .sse-event-details-gate-row {
    margin-bottom: 12px;
}

/* Disabled CTA — non-interactive "Members only" state.
 * v1.14.12: !important removed per bible-amendment-css-specificity-token-
 * adoption-v1.md. The state-lock pattern now uses .sse-fe-btn compound
 * selector for higher specificity (0,2,0 beats .sse-fe-btn's 0,1,0). */
.sse-fe-btn.sse-fe-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--ssla-tone-card, #FAF9F5);
    color: var(--ssla-text-secondary, #666663);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
}
.sse-fe-btn-login {
    background: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-tone-bg, #FFFFFF);
}

/* event-cta — disabled state */
[data-ssla-type="sse-event-cta"] .sse-cta-button-disabled {
    display: inline-block;
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ssla-tone-card, #FAF9F5);
    color: var(--ssla-text-secondary, #666663);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    padding: 12px 20px;
}

/* my-bookings — title row + archetype chips */
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-titlerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    line-height: 1.2;
    background: var(--ssla-tone-card, #FAF9F5);
    color: var(--ssla-text-secondary, #666663);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-chip-meeting {
    /* default tone */
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-chip-engagement {
    color: var(--ssla-text-primary, #1A1A1A);
}
[data-ssla-type="sse-my-bookings"] .sse-my-bookings-chip-on_demand {
    background: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-tone-bg, #FFFFFF);
}

/* ─────────── v1.8.09 — FE polish ─────────── */

/* event-list — empty state polish */
[data-ssla-type="sse-event-list"] .sse-event-list-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ssla-text-secondary, #666663);
}
[data-ssla-type="sse-event-list"] .sse-event-list-empty svg {
    color: var(--ssla-text-tertiary, #B4B2A9);
    margin-bottom: 14px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-empty-title {
    margin: 0 0 12px;
    font-size: 14px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-empty-action {
    display: inline-block;
    font-size: 13px;
    color: var(--ssla-text-primary, #1A1A1A);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* event-list — card hover treatment (subtle border-color shift, not motion) */
[data-ssla-type="sse-event-list"] .sse-event-list-card {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card:hover {
    border-color: var(--ssla-text-primary, #1A1A1A);
}

/* course-catalog — source badge per card */
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-titlerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-source {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    line-height: 1.2;
    background: var(--ssla-tone-card, #FAF9F5);
    color: var(--ssla-text-secondary, #666663);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    white-space: nowrap;
    flex-shrink: 0;
}
[data-ssla-type="sse-course-catalog"] .sse-course-catalog-source-cfg {
    background: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-tone-bg, #FFFFFF);
    border-color: var(--ssla-text-primary, #1A1A1A);
}

/* event-calendar polish — Today button, accessible nav, gate marker */
[data-ssla-type="sse-event-calendar"] .sse-calendar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    color: var(--ssla-text-secondary, #666663);
    text-decoration: none;
    transition: border-color 150ms, color 150ms;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-nav:hover {
    border-color: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-text-primary, #1A1A1A);
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-today-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ssla-text-secondary, #666663);
    text-decoration: none;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    transition: border-color 150ms, color 150ms;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-today-btn:hover {
    border-color: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-text-primary, #1A1A1A);
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day {
    transition: background-color 120ms;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-day.has-event:hover {
    background: var(--ssla-tone-card, #FAF9F5);
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-event.is-gated {
    opacity: 0.7;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-event-gate {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.7;
}
[data-ssla-type="sse-event-calendar"] .sse-calendar-empty {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--ssla-text-secondary, #666663);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
 * v1.8.12 — Single-page registration (prototype-grade rebuild)
 *
 * Design source: sse-v1_8_0-ui-conformance-audit.md
 *   - Visitor surfaces use EDITORIAL scale (serif title 22px, body 15px)
 *   - Card containment, 0.5px borders, zero border-radius
 *   - Inputs 44px (large-CTA scale allowed on visitor), 0.5px --ssla-line,
 *     focus ring --ssla-accent
 *   - Meeting accent = SHIFT blue (--ssla-accent-meeting)
 *   - Primary button flat --ssla-accent, 48px CTA
 * ═══════════════════════════════════════════════════════════════ */

/* v1.67.0: widened 680 → 940 to converge with the meeting archetype's
   `.sse-reg-shell-wide` (1250 → 1060 below) — Glenn's round-3 feedback was
   that the two archetypes' card widths should read as "basically the same,"
   not a ~570px gap. Both this and `.sse-hero` (Hero block section) must
   change together or the border-alignment bug fixed in v1.65.01 reopens. */
.sse-reg .container.sse-reg-shell,
.sse-reg-shell {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Event header ─────────────────────────────────────────── */
.sse-reg-header {
    margin-bottom: 28px;
}
.sse-reg-header-media {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--ssla-tone-card, #F5F4F0);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
}
.sse-reg-header-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sse-reg-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 30px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--ssla-text-primary, #1A1A1A);
}
.sse-reg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--ssla-line, #D3D1C7);
}
.sse-reg-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--ssla-text-secondary, #666663);
}
.sse-reg-meta-item svg { color: var(--ssla-text-tertiary, #B4B2A9); flex-shrink: 0; }
.sse-reg-meta-price {
    font-weight: 600;
    font-size: 15px;
    color: var(--ssla-text-primary, #1A1A1A);
}
.sse-reg-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ssla-text-secondary, #666663);
    margin: 0;
}

/* ── Registration card ────────────────────────────────────── */
/* v1.64.0: thin accent-gold top edge — a small, deliberate spot of the
   value-role token (--shell-accent, per the three-role policy documented
   below) on the card that used to be the plainest surface on the page.
   Reset to `border: none` entirely in the .is-confirmed state (see rule
   further down), so it never lingers on the success screen. */
/* v1.65.0: the gold accent edge moved to .sse-hero (the true top of the now-
   merged hero+registration card — see "Hero block" section). This card is
   the BOTTOM half of that card: a plain 0.5px top border, same weight as its
   other three sides, so hero and registration read as one continuous box
   with a hairline row-divider rather than two separately-accented cards. */
.sse-reg-card {
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    background: var(--ssla-tone-bg, #FFFFFF);
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.04);
    padding: 32px;
}

/* v1.13.05 — meeting booking split: wide calendar | booking rail.
   The meeting shell conforms to the hero width (80% / max 1060, see
   v1.67.0 note above) and is a query container, so the two-column <->
   stacked decision tracks the card's own width rather than the viewport.
   Single column is the default. */
/* v1.68.0: scoped to >760px so the mobile full-bleed override in
   `.ssla-section .container` (760px media query below) isn't fought by this
   rule's higher specificity (4 classes vs 2) — see mobile hardening note
   below. Below 760px the wide shell now falls through to the same base
   `.sse-reg-shell` rule (max-width 940, no explicit width) as the non-wide
   archetypes, which already collapses to full-bleed correctly on mobile. */
@media (min-width: 761px) {
    .sse-reg .container.sse-reg-shell.sse-reg-shell-wide {
        width: 80%;
        max-width: 1060px;
        container-type: inline-size;
        container-name: ssereg;
    }
}
.sse-reg-card-split { display: grid; grid-template-columns: 1fr; gap: 28px; }
/* v1.64.0: the calendar column gets a light card-within-card treatment
   (tinted background + border) so "pick a date" reads as visually distinct
   from the white "pick a time" / identity+form column beside it, instead of
   both columns sitting on identical flat white. */
.sse-reg-col-cal  {
    min-width: 0;
    background: var(--shell-bg-secondary, #FAF9F5);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    padding: 24px;
    box-sizing: border-box;
}
.sse-reg-col-book { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* In the split, the calendar owns its column (no trailing margin) and the
   slots/times sit at the top of the rail (no leading margin). */
.sse-reg-card-split .sse-reg-cal   { margin-bottom: 0; }
.sse-reg-card-split .sse-reg-slots { margin-top: 0; }

/* v1.68.1: mobile/collapsed stacking order. Glenn: "when it collapses on
   mobile, the right column is top and then the left column floats to the
   bottom." Below the 884px container breakpoint .sse-reg-card-split is a
   single-column stack (grid-template-columns: 1fr, set above); DOM order is
   still .sse-reg-col-cal then .sse-reg-col-book, so `order` is used to flip
   the visual stack without touching markup: book column (photo + slots/
   form) on top, calendar column below. At/above the breakpoint both are
   reset to natural left-to-right (cal, then book). */
.sse-reg-col-cal  { order: 2; }
.sse-reg-col-book { order: 1; }

/* ── Registration photo (v1.68.0 header→card move; v1.68.1 corrects
   placement + orientation) ───────────────────────────────────────────────
   Glenn's round-4 feedback: pull the event photo out of the (now-thinner)
   hero header entirely. v1.68.0 misread "next to the calendar" as *above*
   the calendar in the calendar's own column, portrait-oriented. Glenn
   corrected this: "the photo on the right side with the calendar on the
   left... the photo should be already landscape, so just fit it into the
   column on the right." So for the meeting archetype the photo sits at the
   TOP of .sse-reg-col-book (the right/booking column), above the time
   slots — the calendar column stays photo-free. For engagement/on_demand
   (no column split) render.php places it at the top of .sse-reg-card
   instead — same treatment, single-column flow, same landscape ratio so
   the photo isn't a different shape between archetypes. Landscape,
   sized to the column's width ("generous", fills it, not a thumbnail);
   object-fit: cover crops a portrait or off-ratio source photo gracefully
   — Glenn explicitly OK'd cropping. */
.sse-reg-portrait {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}
.sse-reg-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No-image fallback: archetype-colored line icon (SSE_FE_Helpers::archetype_icon_svg()),
   same mapping the old hero icon-card used — mirrors it, doesn't reuse its
   classes (different box size/aspect). */
.sse-reg-portrait-meeting    svg { color: var(--ssla-accent-meeting, #4A6FA5); opacity: .85; }
.sse-reg-portrait-engagement svg { color: var(--ssla-accent-event,   #5B8C5A); opacity: .85; }
.sse-reg-portrait-on_demand  svg { color: var(--shell-accent-warm,   #D4740E); opacity: .85; }
.sse-reg-portrait svg { width: 56px; height: 56px; }
.sse-reg-portrait.sse-reg-portrait-hasimg { background: var(--shell-bg, #FFFFFF); }
/* Engage two columns only when the card itself is wide enough (~820px usable
   after card padding). Below that the card stacks, regardless of viewport. */
@container ssereg (min-width: 884px) {
    .sse-reg-card-split {
        grid-template-columns: 1.4fr 1fr;
        gap: 40px;
        align-items: start;
    }
    .sse-reg-card-split .sse-cal-grid .sse-cal-day { min-height: 44px; }
    /* Wide layout: back to natural left-to-right — calendar column left,
       photo+booking column right (undoes the mobile order swap above). */
    .sse-reg-col-cal  { order: 1; }
    .sse-reg-col-book { order: 2; }
}

/* ── Inline calendar (meeting) ────────────────────────────── */
.sse-reg-cal { margin-bottom: 24px; }
.sse-reg-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
/* v1.64.0: every step heading (calendar, cohorts, seat count) gets a small
   accent-gold marker dot — same sparse dot language already used for
   .sse-hero-mode-dot / calendar availability, extended here to visually
   separate the booking flow into distinct labeled sections. */
.sse-reg-step-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: var(--ssla-text-primary, #1A1A1A);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sse-reg-step-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--shell-accent, #A9835A);
}
.sse-reg-cal .sse-cal-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.sse-reg-cal .sse-cal-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    background: var(--ssla-tone-bg, #FFFFFF);
    color: var(--ssla-text-secondary, #666663);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.sse-reg-cal .sse-cal-nav button:hover:not(:disabled) {
    border-color: var(--ssla-text-primary, #1A1A1A);
    color: var(--ssla-text-primary, #1A1A1A);
    background: var(--ssla-tone-card, #F5F4F0);
}
.sse-reg-cal .sse-cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.sse-reg-cal .sse-cal-month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ssla-text-primary, #1A1A1A);
    min-width: 116px;
    text-align: center;
}
.sse-reg-cal .sse-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.sse-reg-cal .sse-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ssla-text-tertiary, #B4B2A9);
    padding: 4px 0 10px;
}
.sse-reg-cal .sse-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ssla-text-primary, #1A1A1A);
    border: 0.5px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sse-reg-cal .sse-cal-day.sse-empty { border: none; }
.sse-reg-cal .sse-cal-day.sse-disabled {
    color: var(--ssla-text-tertiary, #B4B2A9);
    opacity: 0.45;
}
.sse-reg-cal .sse-cal-day.sse-available {
    cursor: pointer;
    border-color: var(--ssla-line, #D3D1C7);
    font-weight: 500;
}
/* v1.14.12 — Path A: archetype-driven interaction chrome (calendar days).
 *
 * Hover + selected adopt the event's archetype identity colour. The
 * data-event-archetype attribute on the section root scopes the rule.
 *
 * Cascade:
 *   1. Base .sse-cal-day rule (no fill)
 *   2. Base hover/selected = charcoal fallback if no archetype attribute
 *   3. Archetype-scoped overrides (higher specificity, win the cascade)
 *
 * Bible: bible-amendment-three-role-color-v1.md (drafted v1.14.12).
 *
 * Replaces v1.14.08's "selected=charcoal" rule and v1.13.x's hardcoded
 * meeting-blue hover. The schizophrenia (hover blue → selected charcoal)
 * is resolved by unifying both states on the archetype colour.
 */
.sse-reg-cal .sse-cal-day.sse-available:hover {
    background: var(--shell-h, #1A1A1A);
    border-color: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
}
.sse-reg-cal .sse-cal-day.sse-today { font-weight: 700; }
.sse-reg-cal .sse-cal-day.sse-today.sse-disabled { opacity: 0.7; }
.sse-reg-cal .sse-cal-day.sse-selected {
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border-color: var(--shell-h, #1A1A1A);
    font-weight: 600;
}

/* Archetype overrides — meeting */
[data-event-archetype="meeting"] .sse-reg-cal .sse-cal-day.sse-available:hover,
[data-event-archetype="meeting"] .sse-reg-cal .sse-cal-day.sse-selected {
    background: var(--sse-meeting, #4A6FA5);
    border-color: var(--sse-meeting, #4A6FA5);
    color: #FFFFFF;
}

/* Archetype overrides — engagement */
[data-event-archetype="engagement"] .sse-reg-cal .sse-cal-day.sse-available:hover,
[data-event-archetype="engagement"] .sse-reg-cal .sse-cal-day.sse-selected {
    background: var(--sse-engagement, #5B8C5A);
    border-color: var(--sse-engagement, #5B8C5A);
    color: #FFFFFF;
}

/* Archetype overrides — on-demand (data attribute uses underscore) */
[data-event-archetype="on_demand"] .sse-reg-cal .sse-cal-day.sse-available:hover,
[data-event-archetype="on_demand"] .sse-reg-cal .sse-cal-day.sse-selected {
    background: var(--sse-ondemand, #D4740E);
    border-color: var(--sse-ondemand, #D4740E);
    color: #FFFFFF;
}

/* slot list */
.sse-reg-slots { margin-top: 20px; }
.sse-reg-slots-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ssla-text-primary, #1A1A1A);
    margin-bottom: 12px;
}
.sse-reg-slots-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}
.sse-slot-btn {
    padding: 11px 8px;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    background: var(--ssla-tone-bg, #FFFFFF);
    color: var(--ssla-text-primary, #1A1A1A);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
/* v1.14.12 — Path A: archetype-driven interaction chrome (slot buttons).
 * Same pattern as cal-day above. Base = charcoal fallback when no archetype
 * attribute; archetype-scoped rules override with higher specificity.
 * v1.64.0: added a soft box-shadow on hover/selected — archetype overrides
 * below only redeclare background/border/color, so the shadow carries
 * through to every archetype without needing to be repeated per block. */
.sse-slot-btn:hover {
    background: var(--shell-h, #1A1A1A);
    border-color: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.15);
}
.sse-slot-btn.sse-selected {
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border-color: var(--shell-h, #1A1A1A);
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.15);
}

/* Archetype overrides — meeting */
[data-event-archetype="meeting"] .sse-slot-btn:hover,
[data-event-archetype="meeting"] .sse-slot-btn.sse-selected {
    background: var(--sse-meeting, #4A6FA5);
    border-color: var(--sse-meeting, #4A6FA5);
    color: #FFFFFF;
}

/* Archetype overrides — engagement */
[data-event-archetype="engagement"] .sse-slot-btn:hover,
[data-event-archetype="engagement"] .sse-slot-btn.sse-selected {
    background: var(--sse-engagement, #5B8C5A);
    border-color: var(--sse-engagement, #5B8C5A);
    color: #FFFFFF;
}

/* Archetype overrides — on-demand */
[data-event-archetype="on_demand"] .sse-slot-btn:hover,
[data-event-archetype="on_demand"] .sse-slot-btn.sse-selected {
    background: var(--sse-ondemand, #D4740E);
    border-color: var(--sse-ondemand, #D4740E);
    color: #FFFFFF;
}
.sse-slots-loading,
.sse-slots-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--ssla-text-secondary, #666663);
    font-style: italic;
    padding: 10px 0;
}
.sse-timezone-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--ssla-text-tertiary, #B4B2A9);
}
.sse-timezone-line svg { flex-shrink: 0; }

/* selected-time confirmation line */
.sse-reg-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
    background: rgba(74, 111, 165, 0.07);
    border: 0.5px solid var(--ssla-accent-meeting, #4A6FA5);
    font-size: 14px;
    color: var(--ssla-text-primary, #1A1A1A);
}
.sse-reg-selected svg { color: var(--ssla-accent-meeting, #4A6FA5); flex-shrink: 0; }
.sse-reg-selected-label { color: var(--ssla-text-secondary, #666663); }
.sse-reg-selected-value { font-weight: 600; }
.sse-reg-selected-change {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--ssla-accent-meeting, #4A6FA5);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 13px;
    cursor: pointer;
}

/* divider between calendar block and form */
.sse-reg-card .sse-reg-cal + .sse-reg-form,
.sse-reg-selected + .sse-reg-form {
    border-top: 0.5px solid var(--ssla-line, #D3D1C7);
    padding-top: 24px;
}
/* v1.64.0: the split-layout booking rail (meeting archetype) stacks slots /
 * selected-time / identity / form inside one flex column, so the adjacent-
 * sibling rule above (which only fires when the form directly follows .sse-
 * reg-cal or .sse-reg-selected) misses the logged-in case where .sse-reg-
 * identity sits between them. This unconditional child selector guarantees
 * the same "booking picker vs. register panel" divider regardless of what
 * immediately precedes the form. */
.sse-reg-col-book form.sse-reg-form {
    border-top: 0.5px solid var(--ssla-line, #D3D1C7);
    padding-top: 20px;
}

/* ── Form ─────────────────────────────────────────────────── */
.sse-reg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sse-reg-field {
    display: block;
    margin-bottom: 18px;
}
.sse-reg-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ssla-text-secondary, #666663);
    margin-bottom: 7px;
}
.sse-reg-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    background: var(--ssla-tone-bg, #FFFFFF);
    color: var(--ssla-text-primary, #1A1A1A);
    font-size: 15px;
    line-height: 44px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sse-reg-field input::placeholder { color: var(--ssla-text-tertiary, #B4B2A9); }
.sse-reg-field input:focus {
    border-color: var(--ssla-accent, #A9835A);
    box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12);
}
.sse-reg-field input.sse-reg-field-invalid {
    border-color: var(--ssla-danger, #C0392B);
}
.sse-reg-field input.sse-reg-field-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.sse-reg-form-error {
    font-size: 13px;
    color: var(--ssla-danger, #C0392B);
    margin-bottom: 16px;
    padding: 11px 14px;
    background: rgba(192, 57, 43, 0.06);
    border: 0.5px solid rgba(192, 57, 43, 0.3);
}

/* primary submit button */
/* v1.14.09: action role — charcoal. Surfaced by preset adoption probe;
 * missed by v1.14.08's nine-surface sweep because this rule lives in the
 * registration-form section, not the .sse-fe-btn button section. Hover
 * uses opacity (matches .sse-fe-btn:hover pattern at line 517). */
.sse-reg-submit {
    width: 100%;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-top: 4px;
    transition: opacity 150ms ease;
}
.sse-reg-submit:hover:not(:disabled) {
    opacity: 0.9;
}
.sse-reg-submit:disabled {
    background: var(--shell-h, #1A1A1A);
    opacity: 0.4;
    cursor: not-allowed;
}

/* v1.14.14: post-archetype context — Path A pattern extension. The
   .sse-reg-submit lives inside the event-registration section, which emits
   data-event-archetype on its root (render.php line 207). Background follows
   the mode token so the primary action consumes the same archetype color the
   user has been seeing on the calendar/slot picker chrome. :disabled stays
   neutral grey — no archetype signal when there is no action available.
   Specificity (0,1,0 + 0,1,0) = (0,2,0) beats unscoped .sse-reg-submit (0,1,0). */
[data-event-archetype="meeting"] .sse-reg-submit {
    background: var(--sse-meeting, #4A6FA5);
}
[data-event-archetype="engagement"] .sse-reg-submit {
    background: var(--sse-engagement, #5B8C5A);
}
[data-event-archetype="on_demand"] .sse-reg-submit {
    background: var(--sse-ondemand, #D4740E);
}
[data-event-archetype="meeting"] .sse-reg-submit:disabled,
[data-event-archetype="engagement"] .sse-reg-submit:disabled,
[data-event-archetype="on_demand"] .sse-reg-submit:disabled {
    background: var(--shell-h, #1A1A1A);
}
.sse-reg-submit-label { transition: opacity 150ms ease; }
.sse-reg-submit-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-right-color: #FFFFFF;
    border-radius: 50%;
    animation: sse-reg-spin 0.6s linear infinite;
}
@keyframes sse-reg-spin { to { transform: rotate(360deg); } }
.sse-reg-submit-hint {
    text-align: center;
    font-size: 12px;
    color: var(--ssla-text-tertiary, #B4B2A9);
    margin: 12px 0 0;
}

/* ── Success state ────────────────────────────────────────── */
.sse-reg-success {
    text-align: center;
    padding: 28px 8px 12px;
}
.sse-reg-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.1);
    color: var(--ssla-success, #1D9E75);
}
.sse-reg-success-title {
    font-family: var(--shell-hf, sans-serif);
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--ssla-text-primary, #1A1A1A);
}
.sse-reg-success-detail {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ssla-text-secondary, #666663);
    margin: 0;
}
.sse-reg-success-detail a {
    color: var(--ssla-accent, #A9835A);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Gate block (login required etc.) ─────────────────────── */
.sse-reg .sse-gate-block {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 28px;
    border: 0.5px solid var(--ssla-line, #D3D1C7);
    background: var(--ssla-tone-card, #F5F4F0);
}
.sse-reg .sse-gate-block-icon { color: var(--ssla-text-tertiary, #B4B2A9); flex-shrink: 0; }
.sse-reg .sse-gate-block-heading {
    font-size: 17px;
    margin: 0 0 12px;
    color: var(--ssla-text-primary, #1A1A1A);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sse-reg-shell { padding: 0 16px; }
    .sse-reg-card { padding: 22px 18px; }
    .sse-reg-col-cal { padding: 16px; }
    .sse-reg-title { font-size: 25px; }
    .sse-reg-form-row { grid-template-columns: 1fr; gap: 0; }
    .sse-reg-cal-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sse-reg-cal .sse-cal-day { font-size: 13px; }
    .sse-reg-slots-list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .sse-reg-header-media { aspect-ratio: 16 / 10; margin-bottom: 18px; }
    .sse-reg-meta { gap: 12px; }
    /* v1.64.0 — scale the polish-pass additions down for narrow viewports */
    [data-ssla-type="sse-event-registration"] { padding: 8px 0 40px; }
    .sse-hero-mode { padding: 5px 10px; }
    /* v1.65.0 — merged-card pass: the hero is now the compact top half of
       one continuous card (see "Hero block" section), so its mobile padding
       shrinks to match a card header instead of a full hero band, and the
       bleed wrapper only needs enough top clearance to sit off the toolbar. */
    .sse-hero-bleed { padding: 20px 0 0; }
    .sse-hero { padding: 20px 20px 18px; gap: 14px; }
    .sse-hero-title { font-size: 22px; }
}

/* ── v1.9.01 Band 2: logged-in identity + forced-login ───────────── */
.sse-reg-identity {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
}
.sse-reg-identity-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--shell-accent, #A9835A); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px; flex: 0 0 auto;
}
.sse-reg-identity-who { flex: 1; min-width: 0; }
.sse-reg-identity-who b { display: block; font-size: 13px; font-weight: 600; color: var(--shell-h, #1A1A1A); }
.sse-reg-identity-who span { font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55)); }
.sse-reg-identity-notme {
    background: 0; border: 0; cursor: pointer;
    color: var(--shell-accent, #A9835A); font: inherit; font-size: 12px; text-decoration: underline;
}
/* Collapsed form: hidden when the one-click chip is active; "Not you?" reveals it. */
.sse-reg-fields-collapsed { display: none; }
.sse-reg-fields-collapsed + .sse-reg-success { margin-top: 0; }

.sse-reg-forcelogin {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 20px;
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
}
.sse-reg-forcelogin-icon { color: var(--shell-m, rgba(26,26,26,0.55)); }
.sse-reg-forcelogin-text { margin: 0; font-size: 13px; color: var(--shell-t, #2B2B2B); }

/* ── v1.9.02 Band 3: cohort picker (engagement) ──────────────────── */
.sse-reg-cohorts { margin-bottom: 18px; }
.sse-cohort-list {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--shell-line, #D3D1C7);
    border: 0.5px solid var(--shell-line, #D3D1C7);
}
.sse-cohort {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--shell-bg, #FFFFFF); border: 0;
    padding: 12px 14px; font: inherit; text-align: left; cursor: pointer;
}
.sse-cohort:hover { background: var(--shell-bg-secondary, #FAF9F5); }
.sse-cohort[aria-pressed="true"] {
    background: var(--shell-card, #F5F4F0);
    box-shadow: inset 2px 0 0 var(--ssla-accent-event, #5B8C5A);
}
.sse-cohort.is-full { opacity: 0.55; cursor: not-allowed; }
.sse-cohort-radio {
    width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; position: relative;
    border: 0.5px solid var(--shell-m, rgba(26,26,26,0.4));
}
.sse-cohort[aria-pressed="true"] .sse-cohort-radio { border-color: var(--ssla-accent-event, #5B8C5A); }
.sse-cohort[aria-pressed="true"] .sse-cohort-radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--ssla-accent-event, #5B8C5A);
}
.sse-cohort-main { flex: 1; min-width: 0; }
.sse-cohort-title { display: block; font-size: 13px; font-weight: 600; color: var(--shell-h, #1A1A1A); }
.sse-cohort-meta { display: block; font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55)); }
.sse-cohort-seats { font-size: 11px; color: var(--shell-m, rgba(26,26,26,0.55)); white-space: nowrap; }
.sse-cohort-seats.is-low { color: var(--shell-accent-warm, #D4740E); }

/* ── v1.9.05 Band 5: group registration (stepper + attendees) ────── */
.sse-reg-group { margin-bottom: 18px; }
.sse-qty {
    display: inline-flex; align-items: center;
    border: 0.5px solid var(--shell-line, #D3D1C7); width: max-content;
}
.sse-qty button {
    appearance: none; background: var(--shell-bg, #FFFFFF); border: 0;
    width: 40px; height: 40px; font: inherit; font-size: 18px; line-height: 1;
    cursor: pointer; color: var(--shell-h, #1A1A1A);
}
.sse-qty button:hover:not(:disabled) { background: var(--shell-bg-secondary, #FAF9F5); }
.sse-qty button:disabled { color: var(--shell-line, #D3D1C7); cursor: default; }
.sse-qty-val {
    min-width: 52px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-left: 0.5px solid var(--shell-line, #D3D1C7);
    border-right: 0.5px solid var(--shell-line, #D3D1C7);
    font-size: 15px; font-weight: 500; color: var(--shell-h, #1A1A1A);
}
.sse-qty-hint { font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55)); margin: 8px 0 0; }
.sse-attendees-extra { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sse-attendee-block {
    border: 0.5px solid var(--shell-line, #D3D1C7); padding: 14px;
}
.sse-attendee-head {
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--shell-m, rgba(26,26,26,0.55)); margin-bottom: 10px;
}

/* ── v1.9.07 Band 6: payment surface ─────────────────────────────── */
.sse-reg-pay {
    margin: 16px 0;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
}
.sse-reg-pay-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 13px 14px;
    background: var(--shell-card, #F5F4F0);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
}
.sse-reg-pay-total-label {
    font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55));
}
.sse-reg-pay-total-amount {
    font-family: var(--shell-hf, sans-serif);
    /* v1.14.12: --shell-h → --shell-accent per three-role policy. */
    font-size: 22px; font-weight: 500; color: var(--shell-accent, #A9835A);
}
.sse-reg-pay-total-amount small {
    font-size: 12px; font-weight: 400; color: var(--shell-m, rgba(26,26,26,0.55));
    font-family: inherit;
}
.sse-reg-pay-body { padding: 14px; }
.sse-reg-pay-element {
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg-secondary, #FAF9F5);
    padding: 13px;
    min-height: 44px;
    margin-bottom: 10px;
}
.sse-reg-pay-placeholder {
    font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55));
}
.sse-reg-pay-discount {
    display: flex; gap: 8px;
}
.sse-reg-pay-discount-input {
    flex: 1; height: 36px; padding: 0 11px;
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    font: inherit; font-size: 13px;
    color: var(--shell-t, #2B2B2B);
}
.sse-reg-pay-discount-apply {
    height: 36px; padding: 0 14px;
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    font: inherit; font-size: 12px; cursor: pointer;
    color: var(--shell-h, #1A1A1A);
}
.sse-reg-pay-discount-apply:hover:not(:disabled) { background: var(--shell-bg-secondary, #FAF9F5); }
.sse-reg-pay-discount-msg {
    margin: 8px 0 0; font-size: 12px; color: var(--shell-m, rgba(26,26,26,0.55));
}
.sse-reg-pay-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 10px 0 0;
    font-size: 11px; color: var(--shell-m, rgba(26,26,26,0.55));
}
.sse-reg-pay-unavailable {
    padding: 14px;
    font-size: 13px; color: var(--shell-m, rgba(26,26,26,0.55));
    background: var(--shell-bg-secondary, #FAF9F5);
}

/* ── v1.9.08 Band 7: events landing + confirmation templates ─────── */

/* Page containers (block patterns wrap content in .sse-page / .sse-page-landing / .sse-page-confirm) */
.sse-page { padding: 28px 18px 60px; }

/* Breadcrumb / toolbar — v1.14.02: bar is 100%; inner is 80%/1250. */
.sse-breadcrumb {
    width: 100%;
    background: var(--shell-bg, #FFFFFF);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
    margin-bottom: 28px;
    box-sizing: border-box;
}
.sse-breadcrumb-inner {
    /* v1.14.04: padding raised 9px → 20px so the breadcrumb tray reads at
       the same total height as the event-list toolbar (14px pad + 32px
       select = 60px). UI congruency between the two header strips. */
    display: flex; align-items: center; gap: 10px;
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 13px;
}
.sse-breadcrumb-home {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    text-decoration: none;
}
.sse-breadcrumb-home:hover { color: var(--shell-h, #1A1A1A); }
.sse-breadcrumb-sep { color: var(--shell-line, #D3D1C7); }
.sse-breadcrumb-current { color: var(--shell-h, #1A1A1A); font-weight: 500; }

/* Hero block */
/* v1.13.01 #2b: alignfull wrapper escapes the theme's reading-width frame;
   the inner .sse-hero re-centers the body at 80% / 1250px. */
/* v1.64.0: subtle background band gave the hero visual weight instead of
   floating directly on the bare page background (design-polish pass). */
/* v1.65.0 — round 2: Glenn's reaction to v1.64.0 was that the hero band and
   the registration card read as two segmented pieces ("photo vs
   description... hard time connecting") and asked for one integrated card:
   short description top-left, compact photo top-right, calendar+form below
   in the SAME box. `.sse-hero-bleed` is no longer an independent full-bleed
   background band — it's just the alignfull structural wrapper (top
   clearance only). The actual card shape (background/border/shadow/gold
   accent) now lives on `.sse-hero` itself, sized to match
   `.container.sse-reg-shell` exactly (see below) so the two elements'
   left/right edges line up with zero jog and the auto-inserted
   `.sse-block-buffer` between them is collapsed to 0 (see the "vertical
   rhythm" note near the top of this file) — hero (top half) + registration
   card (bottom half) render as one continuous bordered box. */
.sse-hero-bleed {
    width: 100%;
    padding: 32px 0 0;
    box-sizing: border-box;
}
/* Width parity with `.container.sse-reg-shell` (non-meeting archetypes cap
   at 940px; `.sse-hero-meeting` below matches `.sse-reg-shell-wide`'s
   80% / 1060px so the meeting archetype's calendar+form split still gets
   the wider card it needs). Both selectors share the same width:80% base
   from `.ssla-section .container`, so only max-width needs to match.
   v1.67.0: converged from 680/1250 (a ~570px gap at wide viewports) per
   Glenn's round-3 feedback — engagement widened, meeting narrowed, so the
   two archetypes read as basically the same card width. The meeting
   archetype keeps a modest ~120px edge over engagement because its 2-column
   calendar+form split (`.sse-reg-card-split`, registration-card section)
   needs the extra room; verified live on staging that this width still
   engages the split comfortably (@container ssereg min-width:884px). */
/* v1.68.0 — round-4 design polish: Glenn asked for the photo out of this
   header entirely (moved to the registration card, see .sse-reg-portrait
   below) and the header itself thinner — title+description on the left,
   the mode + price chips grouped in the upper right. The old `1fr auto`
   grid (main content | square photo aside) is gone; this is now a flex row
   that puts a much narrower, non-square chip group on the right instead of
   a whole aside column. Padding trimmed (26/22 → 20/18) since there's no
   longer a tall photo setting the row's minimum height. */
.sse-hero {
    display: flex; flex-direction: column; gap: 14px;
    width: 80%;
    max-width: 940px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--shell-bg-secondary, #FAF9F5);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    border-top: 3px solid var(--shell-accent, #A9835A);
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.04);
    padding: 20px 32px 18px;
}
.sse-hero-meeting { max-width: 1060px; }
@media (min-width: 760px) {
    .sse-hero { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
}
.sse-hero-main { min-width: 0; flex: 1 1 auto; }
/* v1.64.0: eyebrow becomes a tinted chip (was bare colored text) — adds
   visual weight and a second, larger spot of the archetype's identity color
   without introducing a new token (background/border are the existing
   --ssla-accent-meeting/-event / --shell-accent-warm hexes at low opacity).
   v1.68.0: margin-bottom removed — the mode chip now lives in
   `.sse-hero-chips` beside the price chip, not stacked above the title, so
   it no longer needs its own bottom gutter (the chip group's own `gap`
   handles spacing between the two chips). */
.sse-hero-mode {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 0.5px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
}
/* v1.68.0: the mode + price chip group — Glenn's round-4 ask, "put meeting
   and the free/no-charge... next to each other in the upper right." Row
   (side by side) once there's room; stacked below 480px so two chips don't
   force the thin header to widen or wrap awkwardly on small phones.
   flex-shrink:0 keeps this group from being squeezed by the title/desc
   column when both share a row. */
.sse-hero-chips {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    flex: 0 0 auto;
}
@media (min-width: 480px) { .sse-hero-chips { flex-direction: row; align-items: center; } }
.sse-hero-mode-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sse-mode-meeting    { color: var(--ssla-accent-meeting, #4A6FA5); background: rgba(74, 111, 165, 0.08); border-color: rgba(74, 111, 165, 0.25); }
.sse-mode-meeting    .sse-hero-mode-dot { background: var(--ssla-accent-meeting, #4A6FA5); }
.sse-mode-engagement { color: var(--ssla-accent-event, #5B8C5A); background: rgba(91, 140, 90, 0.08); border-color: rgba(91, 140, 90, 0.25); }
.sse-mode-engagement .sse-hero-mode-dot { background: var(--ssla-accent-event, #5B8C5A); }
.sse-mode-on_demand  { color: var(--shell-accent-warm, #D4740E); background: rgba(212, 116, 14, 0.08); border-color: rgba(212, 116, 14, 0.25); }
.sse-mode-on_demand  .sse-hero-mode-dot { background: var(--shell-accent-warm, #D4740E); }

/* v1.65.0: sized down for a compact card-header row rather than a full hero
   band — at the old 38px/52ch scale the title+description dominated the new
   smaller photo instead of reading as a proportionate intro. */
.sse-hero-title {
    font-family: var(--shell-hf, sans-serif);
    font-weight: 500; font-size: 22px; line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 8px;
}
@media (min-width: 760px) { .sse-hero-title { font-size: 27px; } }
/* v1.68.0: margin-bottom zeroed — .sse-hero-sub is now the last element in
   .sse-hero-main (the meta row that used to follow it inside this column is
   gone; duration/price moved to .sse-hero-chips beside it), so there's
   nothing below it inside this column left to space away from. */
.sse-hero-sub {
    font-size: 14px; line-height: 1.55;
    color: var(--shell-t, #2B2B2B);
    margin: 0; max-width: 66ch;
}

/* v1.68.0: the price chip — round-4 pairing with .sse-hero-mode in
   .sse-hero-chips (upper right). Same tinted-pill treatment the old
   .sse-hero-meta-item.sse-hero-meta-price chip used (this rule replaces
   it; the meta row it lived in is retired along with the photo aside). */
.sse-hero-price-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--shell-t, #2B2B2B);
    background: rgba(169, 131, 90, 0.08);
    border: 0.5px solid rgba(169, 131, 90, 0.28);
    padding: 6px 12px;
    box-sizing: border-box;
    white-space: nowrap;
}
.sse-hero-price-chip svg { color: var(--shell-m, rgba(26,26,26,0.55)); flex: 0 0 auto; }
/* v1.14.09: pricing → value role. Three-role policy reserves --shell-accent
 * for value surfaces (pricing, badges, discount validation). */
.sse-hero-price-chip b.sse-hero-cost { font-weight: 500; color: var(--shell-accent, #A9835A); }

/* Confirmation card + success copy */
.sse-page-confirm .sse-confirm-card {
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 30px 24px;
    max-width: 620px; margin: 0 auto;
}
@media (min-width: 760px) { .sse-page-confirm .sse-confirm-card { padding: 34px 30px; } }
.sse-confirm-title {
    font-family: var(--shell-hf, sans-serif);
    font-weight: 500; font-size: 26px;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 8px;
}
.sse-confirm-lede {
    font-size: 14px;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin: 0 0 26px;
}

/* Follow-up tile grid */
.sse-followup { text-align: left; }
.sse-followup-label {
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--shell-m, rgba(26,26,26,0.55));
    margin: 0 0 12px;
}
.sse-tiles {
    display: grid; grid-template-columns: 1fr; gap: 1px;
    background: var(--shell-line, #D3D1C7);
    border: 0.5px solid var(--shell-line, #D3D1C7);
}
@media (min-width: 480px) { .sse-tiles { grid-template-columns: 1fr 1fr; } }
.sse-tile {
    background: var(--shell-bg, #FFFFFF);
    padding: 16px;
    display: flex; align-items: center; gap: 13px;
    text-decoration: none; cursor: pointer;
    color: inherit;
}
.sse-tile:hover { background: var(--shell-bg-secondary, #FAF9F5); }
.sse-tile-icon {
    width: 38px; height: 38px;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    color: var(--shell-accent, #A9835A);
}
.sse-tile-text b {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--shell-h, #1A1A1A);
    text-decoration: none;
}
.sse-tile-text span {
    font-size: 12px;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
.sse-tile-accent-profile .sse-tile-icon { color: var(--shell-accent, #A9835A); }

/* ─────────────────────────────────────────────────────────────────────
   v1.9.11 · Band 8 — Polish + viewport fit
   Modal placement (displayMode=modal), keyboard focus rings, narrow-vp hardening.
   Chrome matches the inline card: 0.5px shell-line borders, no border-radius.
   ───────────────────────────────────────────────────────────────────── */

/* Modal placement — the registration <section> is reused inside an overlay */
.sse-reg-modal-trigger { display: inline-flex; }
.sse-reg-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px 16px;
    background: rgba(26, 26, 26, 0.42);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sse-reg-modal-overlay[hidden] { display: none; }
.sse-reg-modal-dialog {
    position: relative;
    width: 100%; max-width: 680px; margin: auto 0;
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    box-shadow: 0 8px 40px rgba(26, 26, 26, 0.18);
}
.sse-reg-modal-dialog .sse-reg { background: transparent; border: 0; box-shadow: none; }
.sse-reg-modal-close {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    width: 34px; height: 34px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: transparent; border: 0.5px solid transparent;
    color: var(--shell-m, rgba(26, 26, 26, 0.55)); cursor: pointer;
}
.sse-reg-modal-close:hover { color: var(--shell-h, #1A1A1A); }
html.sse-modal-lock { overflow: hidden; }
@media (max-width: 480px) {
    .sse-reg-modal-overlay { padding: 0; }
    .sse-reg-modal-dialog { max-width: none; min-height: 100%; margin: 0; }
}

/* Keyboard focus rings (a11y) — visible only for keyboard users */
.sse-cohort:focus-visible,
.sse-qty button:focus-visible,
.sse-reg-pay-discount-apply:focus-visible,
.sse-reg-pay-discount-input:focus-visible,
.sse-reg-modal-trigger:focus-visible,
.sse-reg-modal-close:focus-visible,
.sse-tile:focus-visible,
.sse-cal-prev:focus-visible,
.sse-cal-next:focus-visible,
.sse-reg-selected-change:focus-visible {
    outline: 2px solid var(--shell-accent, var(--ssla-accent-event, #5B8C5A));
    outline-offset: 2px;
}

/* Narrow-viewport hardening for the new surfaces */
@media (max-width: 480px) {
    .sse-reg-pay-total { flex-wrap: wrap; }      /* total label + amount stay legible */
    .sse-reg-pay-total-amount { font-size: 20px; }
}
.sse-hero-sub, .sse-cohort-title, .sse-cohort-meta { overflow-wrap: anywhere; }

/* v1.13.0 #2b: mobile — body wrapper fills width with a gutter, not 80%. */
@media (max-width: 760px) {
    .sse-hero,
    .ssla-section .container,
    [data-ssla-type="sse-event-list"] .sse-event-list-container {
        width: auto;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        box-sizing: border-box;
    }
}


/* v1.14.02: calendar loader overlay (shown during fetchMonth, especially
   during the auto-advance double-fetch). Positions over the calendar grid. */
[data-sse-cal] { position: relative; }
.sse-cal-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,0.85);
    color: var(--shell-m, rgba(26,26,26,0.65));
    font-size: 13px;
    z-index: 4;
    backdrop-filter: blur(1px);
}
.sse-cal-loader[hidden] { display: none; }
.sse-cal-loader-dot {
    width: 6px;
    height: 6px;
    background: var(--shell-accent, var(--ss-accent, #A9835A));
    border-radius: 50%;
    opacity: 0.4;
    animation: sse-cal-pulse 1.2s infinite ease-in-out;
}
.sse-cal-loader-dot:nth-child(2) { animation-delay: 0.18s; }
.sse-cal-loader-dot:nth-child(3) { animation-delay: 0.36s; }
.sse-cal-loader-label { margin-left: 4px; font-weight: 500; }
@keyframes sse-cal-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1.1); }
}


/* v1.14.02: My Bookings cancel + reschedule modals. */
.sse-mbm-root { position: relative; z-index: 9999; }
.sse-mbm-root[hidden] { display: none; }
.sse-mbm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9999;
}
.sse-mbm-overlay[hidden] { display: none; }
.sse-mbm-panel {
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sse-mbm-panel-wide { max-width: 560px; }
.sse-mbm-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--shell-t, #2B2B2B);
}
.sse-mbm-body {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--shell-t, #2B2B2B);
    line-height: 1.5;
}
.sse-mbm-explain {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.65));
    line-height: 1.5;
}
.sse-mbm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.sse-mbm-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.sse-mbm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sse-mbm-btn-ghost { background: transparent; }
.sse-mbm-btn-secondary { background: var(--shell-bg-secondary, #FAF9F5); }
.sse-mbm-btn-primary {
    /* v1.14.08: action role — charcoal. */
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border-color: var(--shell-h, #1A1A1A);
}
.sse-mbm-btn-danger {
    background: var(--ss-error, #C0392B);
    color: #FFFFFF;
    border-color: var(--ss-error, #C0392B);
}
.sse-mbm-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: rgba(192, 57, 43, 0.08);
    border: 0.5px solid rgba(192, 57, 43, 0.35);
    color: var(--ss-error, #C0392B);
    font-size: 13px;
}

/* Reschedule modal pickers */
.sse-mbm-reschedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0 20px;
}
@media (max-width: 520px) {
    .sse-mbm-reschedule-grid { grid-template-columns: 1fr; }
}
.sse-mbm-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--shell-m, rgba(26,26,26,0.65));
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sse-mbm-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.sse-mbm-month-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-t, #2B2B2B);
}
.sse-mbm-month-btn {
    width: 28px;
    height: 28px;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.sse-mbm-date-select,
.sse-mbm-time-select {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    font-size: 13px;
    outline: none;
}
.sse-mbm-date-select:focus,
.sse-mbm-time-select:focus {
    border-color: var(--shell-accent, var(--ss-accent, #A9835A));
}
.sse-mbm-time-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Convert linkified actions to button look */
.sse-my-bookings-action {
    cursor: pointer;
    font: inherit;
}


/* v1.14.02: event-list toolbar (full-width strip, inner constrained). */
/* v1.14.06: toolbar now mirrors breadcrumb tray on detail pages — same height,
   same horizontal rhythm, page title left + filter right. Bg dropped to match
   the breadcrumb tray's white-on-line treatment for visual continuity. */
[data-ssla-type="sse-event-list"] .sse-event-list-toolbar {
    width: 100%;
    background: var(--shell-bg, #FFFFFF);
    border-bottom: 0.5px solid var(--shell-line, #D3D1C7);
    margin-bottom: 28px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-toolbar-inner {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
[data-ssla-type="sse-event-list"] .sse-event-list-toolbar-title {
    /* v1.14.07: eyebrow-style title — small caps, muted color, Montserrat default.
       Reads as a section label rather than a page hero, which matches the
       toolbar's role as a chrome strip (not a hero). */
    margin: 0;
    font-family: Montserrat, var(--shell-hf, sans-serif);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666666;
}
[data-ssla-type="sse-event-list"] .sse-event-list-toolbar .sse-event-list-filter {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-filter-label {
    font-size: 13px;
    color: var(--shell-m, rgba(26,26,26,0.65));
}

/* v1.14.02: view-more button (revealed when more than 6 events). */
[data-ssla-type="sse-event-list"] .sse-event-list-viewmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
[data-ssla-type="sse-event-list"] .sse-event-list-viewmore {
    height: 38px;
    padding: 0 22px;
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
[data-ssla-type="sse-event-list"] .sse-event-list-viewmore:hover {
    background: var(--shell-bg-secondary, #FAF9F5);
}
[data-ssla-type="sse-event-list"] .sse-event-list-viewmore[hidden] { display: none; }


/* v1.14.05: success-state buttons after booking confirmation. */
.sse-reg-success-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}
.sse-reg-success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 0.5px solid var(--shell-line, #D3D1C7);
    transition: opacity 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}
.sse-reg-success-btn-primary {
    /* v1.14.08: action role — charcoal, matching the rest of the CTA family. */
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border-color: var(--shell-h, #1A1A1A);
}
.sse-reg-success-btn-primary:hover { opacity: 0.92; }
.sse-reg-success-btn-secondary {
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
}
.sse-reg-success-btn-secondary:hover {
    background: var(--shell-bg-secondary, #FAF9F5);
}
/* Centered success card */
.sse-reg-success {
    text-align: center;
}
.sse-reg-success-icon { display: flex; justify-content: center; margin-bottom: 14px; }
.sse-reg-success-icon svg { color: var(--ss-success, #5B8C5A); }


/* v1.14.06: card hover affordance + visual rhythm pass. */
[data-ssla-type="sse-event-list"] .sse-event-list-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}
[data-ssla-type="sse-event-list"] .sse-event-list-card:hover {
    border-color: var(--shell-t, #2B2B2B);
    transform: translateY(-1px);
}

/* Chip dot size raised 6 → 7 to match hero exactly. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-mode-dot {
    width: 7px;
    height: 7px;
}

/* When the thumb is showing only the archetype icon (no uploaded image), cap
   its height so it doesn't dominate the card. Real images still fill 16:10. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-thumb:has(.sse-event-list-card-icon:only-child) {
    aspect-ratio: auto;
    height: 132px;
}

/* Card body padding tightened so the chip-to-title rhythm matches the hero. */
[data-ssla-type="sse-event-list"] .sse-event-list-card-info {
    padding: 18px;
    display: flex;
    flex-direction: column;
}

/* ─────────── v1.14.14: filter popover ─────────── */
/* Replaces the v1.14.06 <select> with a sliders-icon trigger + inline
   anchored popover. Multi-select via checkbox group; checked values submit
   as sse_event_type[]=N. The form itself preserves any other query params
   via hidden inputs (e.g. paged), so the popover can be applied without
   nuking unrelated URL state. */
[data-ssla-type="sse-event-list"] .sse-event-list-toolbar .sse-event-list-filter {
    position: relative;
}
[data-ssla-type="sse-event-list"] .sse-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: var(--shell-bg, #FFFFFF);
    color: var(--shell-t, #2B2B2B);
    /* v1.14.17: border uses --shell-h (charcoal) at rest, not --shell-line (light tan).
       The light-tan resting border was invisible against the white toolbar background,
       which made the filter trigger look absent until hover. Caught by v1.14.16 staging walk. */
    border: 0.5px solid var(--shell-h, #1A1A1A);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
[data-ssla-type="sse-event-list"] .sse-filter-trigger:hover,
[data-ssla-type="sse-event-list"] .sse-filter-trigger[aria-expanded="true"] {
    border-color: var(--shell-accent, #A9835A);
}
[data-ssla-type="sse-event-list"] .sse-filter-trigger-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-event-list"] .sse-filter-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--shell-accent, #A9835A);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
[data-ssla-type="sse-event-list"] .sse-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 4px;
}
[data-ssla-type="sse-event-list"] .sse-filter-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    background: var(--shell-bg-secondary, #FAF9F5);
    color: var(--shell-t, #2B2B2B);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    max-width: 320px;
    background: var(--shell-bg, #FFFFFF);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
[data-ssla-type="sse-event-list"] .sse-filter-popover[hidden] {
    display: none;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-title {
    margin: 0 0 10px;
    font-family: Montserrat, var(--shell-hf, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-m, rgba(26,26,26,0.55));
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 260px;
    overflow-y: auto;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--shell-t, #2B2B2B);
    cursor: pointer;
    user-select: none;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--shell-accent, #A9835A);
    cursor: pointer;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
    padding-top: 12px;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-clear {
    background: none;
    border: none;
    padding: 0;
    color: var(--shell-m, rgba(26,26,26,0.55));
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-clear:hover {
    color: var(--shell-accent, #A9835A);
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-apply {
    height: 30px;
    padding: 0 14px;
    background: var(--shell-accent, #A9835A);
    color: #FFFFFF;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-apply:hover {
    opacity: 0.92;
}

/* ─────────── v1.14.15: success-state collapse ─────────── */
/* Closes the v1.14.05 spec: when booking confirms, every booking-stage
 * chrome collapses (calendar column, slot grid, identity card / form panel
 * border, cohort + group pickers). What remains is a centered success card
 * with two CTAs (My Bookings, More Events).
 *
 * The state is signaled by adding `is-confirmed` to the registration
 * section root in registration.js's showSuccess(). One declarative state
 * class means the entire collapse is described in CSS — no JS poking at
 * individual elements, no per-archetype branching, no theme override
 * surface that can drift between calendar variants.
 *
 * Hero (sse-reg-header) and footer are intentionally NOT touched — the
 * spec is "everything between hero and footer collapses to centered
 * confirmation", not "everything goes away."
 */

/* Collapse the calendar column entirely. The flex/grid layout reflows
   without it, letting the book column fill the row. */
.sse-reg.is-confirmed .sse-reg-col-cal {
    display: none;
}

/* Inside the book column, hide every sibling that isn't the success card.
   The :not() avoids enumerating every booking-stage element and survives
   future additions to the column (a new cohort UI, a new field group). */
.sse-reg.is-confirmed .sse-reg-col-book > *:not([data-sse-success]):not(.sse-reg-success) {
    display: none !important;
}

/* The form itself usually wraps slots/selected/identity/fields — kill it
   whole. Defense in depth against form-internal chrome leaking through. */
.sse-reg.is-confirmed [data-sse-form] {
    display: none !important;
}

/* Center the success card across the full container, drop all panel
   chrome (border, shadow, card padding). The hero strip handles top
   spacing; the success card sits in clean air below it. */
.sse-reg.is-confirmed .sse-reg-col-book {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
}
.sse-reg.is-confirmed [data-sse-success] {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    text-align: center;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* Hide the booking-shell wrapper's panel chrome — the success state is a
   focused confirmation, not a card-in-card. */
.sse-reg.is-confirmed .sse-reg-card {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* =====================================================================
 * my-bookings v1.14.24 — ASK-profile house style (section cards + accent
 * bar, hero callout, results tables, filled type tags, icon actions).
 * Congruent with the InsightMent Insights tab. Colors key to --im-* vars
 * (fallbacks here) so a global --im-* definition aligns every account tab.
 * ===================================================================== */
[data-ssla-type="sse-my-bookings"].sse-mb{ color: var(--t-body, #3F4A59); }

/* neutralize the legacy flex-item rule now that rows are <tr> */
[data-ssla-type="sse-my-bookings"] .sse-mb-table .sse-my-bookings-item{
  display: table-row; padding: 0; border-top: none; opacity: 1; align-items: initial;
}

/* section card + accent-bar header */
[data-ssla-type="sse-my-bookings"] .sse-mb-card{
  border: 1px solid var(--im-line, #E5E7EB); background: #FFFFFF; margin-bottom: 26px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-head{
  display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-bottom: 1px solid var(--im-line, #E5E7EB); border-left: 4px solid var(--im-navy, #1F3A5F);
}
[data-ssla-type="sse-my-bookings"] .sse-mb-ico{ color: var(--im-navy, #1F3A5F); display: flex; }
[data-ssla-type="sse-my-bookings"] .sse-mb-label{
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--im-ink, #1E293B);
}
[data-ssla-type="sse-my-bookings"] .sse-mb-count{
  margin-left: auto; font-size: 12px; color: var(--im-mute, #6B7280); letter-spacing: .04em;
}

/* empty state — compact row (replaced the oversized hero callout) */
[data-ssla-type="sse-my-bookings"] .sse-mb-empty{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px 20px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-empty-text{
  font-size: 14px; line-height: 1.45; color: var(--im-mute, #6B7280); margin: 0;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-empty-link{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 700; color: var(--im-navy, #1F3A5F); text-decoration: none;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-empty-link:hover{ text-decoration: underline; }
[data-ssla-type="sse-my-bookings"] .sse-mb-empty-link svg{ width: 14px; height: 14px; }

/* results table */
[data-ssla-type="sse-my-bookings"] .sse-mb-table{ width: 100%; border-collapse: collapse; }
[data-ssla-type="sse-my-bookings"] .sse-mb-table thead th{
  background: var(--im-th-bg, #F8FAFC); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--im-mute, #6B7280); padding: 12px 22px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-table thead th.right{ text-align: right; }
[data-ssla-type="sse-my-bookings"] .sse-mb-table tbody td{
  padding: 18px 22px; border-top: 1px solid var(--im-line-soft, #EEF0F2); vertical-align: middle;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-table tbody tr:first-child td{ border-top: none; }
[data-ssla-type="sse-my-bookings"] .sse-mb-c-date{ color: var(--im-mute, #6B7280); font-size: 15px; white-space: nowrap; }
[data-ssla-type="sse-my-bookings"] .sse-mb-c-event{ color: var(--im-ink, #1E293B); font-size: 15px; font-weight: 500; }
[data-ssla-type="sse-my-bookings"] .sse-mb-c-actions{ text-align: right; white-space: nowrap; }
[data-ssla-type="sse-my-bookings"] .sse-mb-row.is-past td{ opacity: .6; }

/* type tag — filled, module palette */
[data-ssla-type="sse-my-bookings"] .sse-mb-tag{
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFFF; padding: 6px 12px; line-height: 1;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-tag-meeting{ background: var(--evt-meeting, #3B5C8A); }
[data-ssla-type="sse-my-bookings"] .sse-mb-tag-engagement{ background: var(--evt-engagement, #5B8C5A); }
[data-ssla-type="sse-my-bookings"] .sse-mb-tag-on_demand{ background: var(--evt-ondemand, #374151); }

/* status pill */
[data-ssla-type="sse-my-bookings"] .sse-mb-pill{
  display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 11px; line-height: 1;
  color: var(--im-green, #15803D); background: var(--im-green-bg, #F0FDF4); border: 1px solid var(--im-green-line, #BBF7D0);
}
[data-ssla-type="sse-my-bookings"] .sse-mb-pill-muted{
  color: var(--im-mute, #6B7280); background: #FFFFFF; border-color: var(--im-line, #E5E7EB);
}

/* compact 2-line booking cards (replaces the hero + table layout) */
[data-ssla-type="sse-my-bookings"] .sse-mb-list{ display: flex; flex-direction: column; }
[data-ssla-type="sse-my-bookings"] .sse-mb-bk{
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--im-line, #E5E7EB);
}
[data-ssla-type="sse-my-bookings"] .sse-mb-bk:first-child{ border-top: 0; }
[data-ssla-type="sse-my-bookings"] .sse-mb-bk-main{ flex: 1; min-width: 0; }
[data-ssla-type="sse-my-bookings"] .sse-mb-bk-title{
  font-weight: 600; font-size: 14px; color: var(--im-ink, #1A1A1A);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-bk-sub{ font-size: 12.5px; color: var(--im-mute, #6B7280); margin-top: 2px; }
[data-ssla-type="sse-my-bookings"] .sse-mb-bk.is-past{ opacity: .6; }
[data-ssla-type="sse-my-bookings"] .sse-mb-bk .sse-mb-actions{ flex: none; }

/* icon action buttons */
[data-ssla-type="sse-my-bookings"] .sse-mb-actions{ display: flex; gap: 0; justify-content: flex-end; }
[data-ssla-type="sse-my-bookings"] .sse-mb-iact{
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--im-line, #E5E7EB); background: #FFFFFF; color: var(--im-mute, #6B7280);
  cursor: pointer; margin-left: 8px; padding: 0; text-decoration: none;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-iact:first-child{ margin-left: 0; }
[data-ssla-type="sse-my-bookings"] .sse-mb-iact.primary{ background: var(--im-navy, #1F3A5F); border-color: var(--im-navy, #1F3A5F); color: #FFFFFF; }
[data-ssla-type="sse-my-bookings"] .sse-mb-iact:hover:not(.primary){ border-color: var(--im-navy, #1F3A5F); color: var(--im-navy, #1F3A5F); }
[data-ssla-type="sse-my-bookings"] .sse-mb-iact.danger:hover{ border-color: var(--shell-accent-warm, #D4740E); color: var(--shell-accent-warm, #D4740E); }

@media (max-width: 720px){
  [data-ssla-type="sse-my-bookings"] .sse-mb-empty{ align-items: flex-start; }
  [data-ssla-type="sse-my-bookings"] .sse-mb-table thead{ display: none; }
  [data-ssla-type="sse-my-bookings"] .sse-mb-table tbody td{ display: block; padding: 4px 18px; border: none; }
  [data-ssla-type="sse-my-bookings"] .sse-mb-table tbody tr{ display: block; border-top: 1px solid var(--im-line-soft, #EEF0F2); padding: 14px 0; }
  [data-ssla-type="sse-my-bookings"] .sse-mb-c-actions{ text-align: left; padding-top: 12px; }
  [data-ssla-type="sse-my-bookings"] .sse-mb-actions{ justify-content: flex-start; }
}

/* =====================================================================
 * my-bookings v1.14.26 — width behavior. The surface is a dashboard/tab
 * canvas, not a centered marketing section, so it must FILL the column the
 * tab/composer gives it rather than self-shrink to .ssla-section's 80%.
 * That 80% made it read narrower than the IM/ASK surface beside it.
 * Scoped tighter than `.ssla-section .container` so it wins on source order.
 * ===================================================================== */
[data-ssla-type="sse-my-bookings"].sse-mb .container{
  width: 100%;
  max-width: 1250px;   /* suite content cap — matches the sibling tab surfaces */
}
/* Embed-aware: inside a dashboard/composer cell, defer fully to the host. */
[data-ssla-embed] [data-ssla-type="sse-my-bookings"].sse-mb .container,
.sse-mb-embed [data-ssla-type="sse-my-bookings"].sse-mb .container{
  max-width: none;
  padding: 0;
}