/*
 * 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:       #534AB7;
    --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:         #534AB7;
    --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;
}

/* ─────────── 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);
}
[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, #534AB7));
    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, #534AB7));
}
#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     | #534AB7 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 #534AB7 · --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, #534AB7));
}
[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, #534AB7);
    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, #534AB7));
    color: var(--shell-accent, var(--ss-accent, #534AB7));
}
[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, #534AB7);
    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, #534AB7));
}
[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, #534AB7));
    color: var(--shell-accent, var(--ss-accent, #534AB7));
}
[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, #534AB7));
    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, #534AB7));
    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, #534AB7));
}

[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, #534AB7);
}
[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
 * ═══════════════════════════════════════════════════════════════ */

.sse-reg .container.sse-reg-shell,
.sse-reg-shell {
    max-width: 680px;
    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 ────────────────────────────────────── */
.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 1250) 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. */
.sse-reg .container.sse-reg-shell.sse-reg-shell-wide {
    width: 80%;
    max-width: 1250px;
    container-type: inline-size;
    container-name: ssereg;
}
.sse-reg-card-split { display: grid; grid-template-columns: 1fr; gap: 28px; }
.sse-reg-col-cal  { min-width: 0; }
.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; }
/* 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; }
}

/* ── 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;
}
.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);
}
.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;
}
/* 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. */
.sse-slot-btn:hover {
    background: var(--shell-h, #1A1A1A);
    border-color: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
}
.sse-slot-btn.sse-selected {
    background: var(--shell-h, #1A1A1A);
    color: #FFFFFF;
    border-color: var(--shell-h, #1A1A1A);
}

/* 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;
}

/* ── 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, #534AB7);
    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, #534AB7);
    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-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.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, #534AB7); 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, #534AB7); 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, #534AB7);
}
.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. */
.sse-hero-bleed { width: 100%; }
.sse-hero {
    display: grid; grid-template-columns: 1fr; gap: 24px;
    align-items: start;
    width: 80%;
    max-width: 1250px;
    margin: 32px auto 0; /* #7: clear the toolbar above */
    box-sizing: border-box;
}
@media (min-width: 760px) { .sse-hero { grid-template-columns: 1fr 0.7fr; gap: 40px; } }
.sse-hero-main { min-width: 0; }
.sse-hero-mode {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 14px;
}
.sse-hero-mode-dot { width: 7px; height: 7px; border-radius: 50%; }
.sse-mode-meeting    { color: var(--ssla-accent-meeting, #4A6FA5); }
.sse-mode-meeting    .sse-hero-mode-dot { background: var(--ssla-accent-meeting, #4A6FA5); }
.sse-mode-engagement { color: var(--ssla-accent-event, #5B8C5A); }
.sse-mode-engagement .sse-hero-mode-dot { background: var(--ssla-accent-event, #5B8C5A); }
.sse-mode-on_demand  { color: var(--shell-accent-warm, #D4740E); }
.sse-mode-on_demand  .sse-hero-mode-dot { background: var(--shell-accent-warm, #D4740E); }

.sse-hero-title {
    font-family: var(--shell-hf, sans-serif);
    font-weight: 500; font-size: 30px; line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--shell-h, #1A1A1A);
    margin: 0 0 16px;
}
@media (min-width: 760px) { .sse-hero-title { font-size: 38px; } }
.sse-hero-sub {
    font-size: 15px; line-height: 1.6;
    color: var(--shell-t, #2B2B2B);
    margin: 0 0 22px; max-width: 52ch;
}
.sse-hero-meta {
    display: flex; flex-wrap: wrap; gap: 14px 26px;
    padding-top: 18px;
    border-top: 0.5px solid var(--shell-line, #D3D1C7);
}
.sse-hero-meta-item {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--shell-t, #2B2B2B);
}
.sse-hero-meta-item svg { color: var(--shell-m, rgba(26,26,26,0.55)); flex: 0 0 auto; }
.sse-hero-meta-item b { font-weight: 500; }
/* v1.14.09: pricing → value role. Three-role policy reserves --shell-accent
 * for value surfaces (pricing, badges, discount validation). The duration b
 * stays default; only the cost b picks up the accent color. */
.sse-hero-meta-item b.sse-hero-cost {
    color: var(--shell-accent, #534AB7);
}

.sse-hero-aside { order: -1; max-width: 220px; }
@media (min-width: 760px) { .sse-hero-aside { order: 0; max-width: none; } }
.sse-hero-iconcard {
    background: var(--shell-card, #F5F4F0);
    border: 0.5px solid var(--shell-line, #D3D1C7);
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.sse-iconcard-meeting    svg { color: var(--ssla-accent-meeting, #4A6FA5); opacity: .85; }
.sse-iconcard-engagement svg { color: var(--ssla-accent-event,   #5B8C5A); opacity: .85; }
.sse-iconcard-on_demand  svg { color: var(--shell-accent-warm,   #D4740E); opacity: .85; }
/* v1.17.0: featured image fills the icon-card frame (4/3) when set; SVG icon is the no-image fallback. */
.sse-hero-iconcard.sse-iconcard-hasimg { background: var(--shell-bg, #FFFFFF); padding: 0; }
.sse-hero-iconcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 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, #534AB7);
}
.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, #534AB7); }

/* ─────────────────────────────────────────────────────────────────────
   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-hero-aside { max-width: 150px; }       /* icon-card must not eat the fold */
    .sse-hero-iconcard { aspect-ratio: 16 / 10; }
    .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, #534AB7));
    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, #534AB7));
}
.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, #534AB7);
}
[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, #534AB7);
    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, #534AB7);
    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, #534AB7);
}
[data-ssla-type="sse-event-list"] .sse-filter-popover-apply {
    height: 30px;
    padding: 0 14px;
    background: var(--shell-accent, #534AB7);
    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;
}

/* hero callout */
[data-ssla-type="sse-my-bookings"] .sse-mb-hero{ display: flex; align-items: center; gap: 28px; padding: 30px 34px; }
[data-ssla-type="sse-my-bookings"] .sse-mb-hero-main{ flex: 1; }
[data-ssla-type="sse-my-bookings"] .sse-mb-hero-title{
  font-size: 29px; line-height: 1.15; font-weight: 800; color: #0F1E33; margin: 0 0 10px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-hero-copy{
  font-size: 16px; line-height: 1.55; color: var(--t-body, #3F4A59); margin: 0; max-width: 640px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-hero-cta{ flex: none; }
[data-ssla-type="sse-my-bookings"] .sse-mb-btn{
  display: inline-flex; align-items: center; gap: 10px; background: var(--im-navy, #1F3A5F); color: #FFFFFF;
  text-decoration: none; font-size: 15px; font-weight: 700; padding: 0 26px; height: 54px;
}
[data-ssla-type="sse-my-bookings"] .sse-mb-btn:hover{ background: var(--im-navy-deep, #16304F); color: #FFFFFF; }

/* 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);
}

/* 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-hero{ flex-direction: column; align-items: flex-start; gap: 18px; }
  [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;
}