@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Color, radius, shadow, spacing, type, and breakpoint tokens now live in
   wwwroot/css/design-tokens.css (DS-01), loaded before this file. */

body {
    font-family: var(--font-sans);
    color: var(--mud-palette-text-primary, var(--tr-ink));
    background: var(--mud-palette-background, var(--tr-bg));
}

html.eventrika-dark,
body.eventrika-dark {
    background: #14161c;
    color-scheme: dark;
}

body.eventrika-dark .landing-page {
    --landing-ink: #e9e8e3;
    --landing-heading: #fafaf9;
    --landing-subtle: #c9c6be;
    --landing-line: rgba(201, 198, 190, 0.28);
    --landing-surface: #14161c;
    --landing-accent: #93adf6;
    --landing-accent-deep: #5e7dee;
    --landing-shadow: 0 22px 56px rgba(16, 15, 14, 0.5);
}

h1,h2,h3,h4,h5,h6,.brand,.button,button,.btn {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

.account-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.2rem 0.6rem 3rem;
    animation: account-page-fadein 220ms ease-out;
}

@keyframes account-page-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Hero header for Login / Register landing pages ── */
.account-page--hero .account-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}

.account-hero-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(180deg, #eef2fe 0%, #dce4fd 100%);
    color: #223cab;
    border: 1px solid #becefb;
    border-radius: 999px;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-page--hero .account-heading {
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.account-page--hero .account-subheading {
    font-size: 1.08rem;
    max-width: 36ch;
    margin: 0.4rem auto 0;
}

/* ── Row of "remember me" + "forgot password?" ── */
.account-page .account-row-between {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-page .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tr-muted);
    cursor: pointer;
    font-size: 0.94rem;
}

.account-page .account-inline-link {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--tr-accent-2);
    text-decoration: none;
}

.account-page .account-inline-link:hover {
    text-decoration: underline;
}

/* ── "OR" divider ── */
.account-page .account-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.25rem 0 1rem;
    color: var(--tr-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.account-page .account-divider::before,
.account-page .account-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7e6e2;
}

.account-page .account-passkey-btn {
    background: #ffffff;
    color: var(--tr-ink);
}

.account-page .account-passkey-btn svg {
    color: var(--tr-accent-2);
}

/* ── Footer prompt under the card ── */
.account-page .account-footer-prompt {
    margin: 1.4rem 0 0;
    text-align: center;
    color: var(--tr-muted);
    font-size: 0.96rem;
}

.account-approval-note {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: #eef2fe;
    border: 1px solid #becefb;
    color: #1e2f6d;
    font-size: 0.88rem;
    line-height: 1.4;
}

.account-page .account-footer-prompt a {
    color: var(--tr-accent-2);
    font-weight: 600;
    text-decoration: none;
}

.account-page .account-footer-prompt a:hover {
    text-decoration: underline;
}

.account-page .account-footer-sep {
    margin: 0 0.45rem;
    color: #d6d4ce;
}

.account-heading {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    margin: 0 0 0.4rem;
    color: var(--tr-ink);
}

.account-subheading {
    margin: 0 0 1.2rem;
    color: var(--tr-muted);
    font-size: 1.02rem;
}

.account-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 1.1rem;
}

.account-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 20px 40px rgba(26, 25, 23, 0.06), 0 6px 12px rgba(26, 25, 23, 0.04);
}

.account-page--hero .account-card {
    padding: 2rem;
}

@media (max-width: 600px) {
    .account-card,
    .account-page--hero .account-card {
        padding: 1.25rem;
    }
}

.account-card hr {
    border: 0;
    border-top: 1px solid #e7e6e2;
    margin: 0.9rem 0;
}

/* ── Floating-label form controls (Bootstrap-style, native CSS) ── */
.account-page .form-floating {
    position: relative;
}

.account-page .form-floating > .form-control {
    width: 100%;
    height: calc(3.4rem + 2px);
    min-height: calc(3.4rem + 2px);
    padding: 1.45rem 0.9rem 0.45rem;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    background: #ffffff;
    color: var(--tr-ink);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.25;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-page .form-floating > .form-control::placeholder {
    color: transparent;
}

.account-page .form-floating > .form-control:disabled {
    background: #f6f5f3;
    color: #85817a;
    cursor: not-allowed;
}

.account-page .form-floating > .form-control:focus,
.account-page .form-floating > .form-control:not(:placeholder-shown) {
    outline: none;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem #2a4bd122;
}

.account-page .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1.05rem 0.9rem;
    color: #85817a;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-page .form-floating > .form-control:focus ~ label,
.account-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: translate(0.05rem, -0.6rem) scale(0.78);
    opacity: 0.85;
    color: #5f5b54;
}

/* ── Plain inputs (when not inside .form-floating) ── */
.account-page .form-control {
    display: block;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    background: #ffffff;
    color: var(--tr-ink);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-page .form-control:focus {
    outline: none;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem #2a4bd122;
}

.account-page .form-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--tr-ink);
    font-weight: 600;
    font-size: 0.94rem;
}

.account-page .form-check {
    position: relative;
    display: block;
    padding-left: 0;
}

.account-page .form-check-input,
.account-page .checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid #d6d4ce;
    border-radius: 4px;
    accent-color: var(--tr-accent);
    cursor: pointer;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.account-page .form-check-label {
    color: var(--tr-muted);
    line-height: 1.4;
}

.account-page .checkbox label {
    display: inline-flex;
    align-items: center;
    color: var(--tr-muted);
    cursor: pointer;
}

/* ── Buttons ── */
.account-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--tr-ink);
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 90ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.account-page .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.22rem #2a4bd133;
}

.account-page .btn-lg {
    padding: 0.85rem 1.2rem;
    font-size: 1.02rem;
    border-radius: 12px;
}

.account-page .btn-sm {
    padding: 0.38rem 0.7rem;
    font-size: 0.86rem;
    border-radius: 8px;
}

.account-page .btn-primary,
.account-page .btn.btn-primary {
    background: linear-gradient(180deg, var(--tr-accent) 0%, var(--tr-accent-2) 100%);
    border-color: var(--tr-accent-2);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(42, 75, 209, 0.22);
}

.account-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(42, 75, 209, 0.32);
}

.account-page .btn-outline-primary {
    border-color: var(--tr-accent);
    color: var(--tr-accent-2);
    background: #ffffff;
}

.account-page .btn-outline-primary:hover {
    background: #eef2fe;
}

.account-page .btn-outline-secondary {
    border-color: #d6d4ce;
    color: var(--tr-muted);
    background: #ffffff;
}

.account-page .btn-outline-secondary:hover {
    background: #f4f4f2;
    color: var(--tr-ink);
}

.account-page .btn-outline-danger {
    border-color: #f6c9cd;
    color: #a81d25;
    background: #ffffff;
}

.account-page .btn-outline-danger:hover {
    background: #fdf0f1;
    border-color: #ec9aa0;
}

.account-page .btn-danger {
    background: linear-gradient(180deg, #d22730 0%, #d22730 100%);
    border-color: #d22730;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(210, 39, 48, 0.22);
}

.account-page .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(210, 39, 48, 0.32);
}

.account-page .btn-link {
    color: var(--tr-accent-2);
    background: transparent;
    border-color: transparent;
    padding: 0.2rem 0;
}

.account-page .btn-link:hover {
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

.account-page a,
.account-page .btn-link {
    color: var(--tr-accent-2);
}

/* ── Alerts ── */
.account-page .alert {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    line-height: 1.45;
}

.account-page .alert > p { margin: 0; }
.account-page .alert > p + p { margin-top: 0.4rem; }

.account-page .alert-info {
    background: #eef2fe;
    border-color: #becefb;
    color: #1e2f6d;
}

.account-page .alert-warning {
    background: #fef6e7;
    border-color: #f6e0b0;
    color: #7a4a08;
}

.account-page .alert-danger {
    background: #fdf0f1;
    border-color: #f6c9cd;
    color: #8f1a21;
}

.account-page .alert-success {
    background: #ecfbf1;
    border-color: #a7f3d0;
    color: #12652f;
}

/* ── Input group (for the verified-email checkmark) ── */
.account-page .input-group {
    display: flex;
    align-items: stretch;
}

.account-page .input-group > .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.account-page .input-group > .input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 0.95rem;
    background: #fafaf9;
    border: 1px solid #d6d4ce;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    color: var(--tr-muted);
}

.account-page .input-group .text-success {
    color: #15803d;
}

/* ── Tables ── */
.account-page .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
}

.account-page .table th,
.account-page .table td {
    padding: 0.7rem 0.55rem;
    border-bottom: 1px solid #f4f4f2;
    text-align: left;
}

.account-page .table.align-middle th,
.account-page .table.align-middle td {
    vertical-align: middle;
}

/* ── Utility classes used across the auth pages ── */
.account-page .w-100 { width: 100%; }
.account-page .p-0 { padding: 0 !important; }
.account-page .ps-3 { padding-left: 1rem; }
.account-page .mb-0 { margin-bottom: 0 !important; }
.account-page .mb-2 { margin-bottom: 0.5rem !important; }
.account-page .mb-3 { margin-bottom: 1rem !important; }
.account-page .mb-4 { margin-bottom: 1.4rem !important; }
.account-page .mt-1 { margin-top: 0.25rem !important; }
.account-page .mt-2 { margin-top: 0.55rem !important; }
.account-page .mt-3 { margin-top: 1rem !important; }
.account-page .mx-auto { margin-left: auto; margin-right: auto; }
.account-page .d-flex { display: flex; }
.account-page .d-block { display: block; }
.account-page .d-inline-flex { display: inline-flex; }
.account-page .flex-column { flex-direction: column; }
.account-page .flex-wrap { flex-wrap: wrap; }
.account-page .gap-2 { gap: 0.6rem; }
.account-page .text-end { text-align: right; }
.account-page .text-secondary { color: var(--tr-muted); }
.account-page .text-success { color: #15803d; }
.account-page .text-info { color: #223cab; }
.account-page .font-weight-bold { font-weight: 700; }
.account-page kbd {
    background: #1a1917;
    color: #fafaf9;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.92rem;
}

.validation-message,
.text-danger {
    color: #d22730 !important;
}

/* ── Account: narrow single-column variant (forgot password, lockout, etc.) ── */
.account-page--narrow {
    max-width: 520px;
}

.account-page--narrow .account-card + .account-card {
    margin-top: 1rem;
}

.account-card h2,
.account-card h3 {
    margin: 0 0 0.4rem;
    color: var(--tr-ink);
    font-size: 1.15rem;
}

.account-card > p:first-of-type,
.account-card > .account-lede {
    color: var(--tr-muted);
    margin: 0 0 1rem;
}

.account-card .form-floating + .form-floating {
    margin-top: 0.1rem;
}

/* ── Account utility links / "back to login" footer ── */
.account-card .account-links {
    margin-top: 0.4rem;
    display: grid;
    gap: 0.25rem;
}

.account-card .account-links p {
    margin: 0;
}

/* ── Manage layout side nav polish ── */
.account-page .nav.nav-pills {
    gap: 0.2rem;
}

.account-page .nav-pills .nav-link {
    color: var(--tr-muted);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
}

.account-page .nav-pills .nav-link:hover {
    background: #eef2fe;
    color: #223cab;
}

.account-page .nav-pills .nav-link.active {
    background: linear-gradient(180deg, var(--tr-accent) 0%, var(--tr-accent-2) 100%);
    color: #ffffff;
}

/* ── Manage page micro-typography ── */
.account-card .alert {
    border-radius: 10px;
}

.account-card .form-text {
    color: var(--tr-muted);
    font-size: 0.88rem;
}

.account-card .table {
    margin: 0.4rem 0 0.8rem;
}

.account-card .table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: #f4f4f2;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.55rem;
    padding: 0.85rem;
    background: #fafaf9;
    border: 1px solid #e7e6e2;
    border-radius: 10px;
}

.recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.98rem;
    padding: 0.4rem 0.55rem;
    background: #ffffff;
    border: 1px solid #e7e6e2;
    border-radius: 6px;
    text-align: center;
    user-select: all;
}

@media (max-width: 920px) {
    .account-page--narrow {
        max-width: 100%;
    }
}

/* ── Admin layout ──────────────────────────────────── */
.admin-layout-main {
    min-height: 100vh;
}

.admin-drawer .mud-nav-link {
    border-radius: 8px;
    margin-bottom: 2px;
}

.admin-kpi-card {
    min-height: 88px;
}

.admin-onboarding {
    border-left: 4px solid var(--mud-palette-primary);
}

.admin-onboarding-steps {
    display: grid;
    gap: 0.6rem;
}

.admin-onboarding-step {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e7e6e2;
    border-radius: var(--radius-md);
    background: #ffffff;
}

.admin-onboarding-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #ffffff;
    font-weight: 800;
}

.admin-onboarding-step-body {
    flex: 1;
    min-width: 0;
}

.admin-kpi-clickable {
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.admin-kpi-clickable:hover,
.admin-kpi-clickable:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(26, 25, 23, 0.10);
    transform: translateY(-1px);
    outline: none;
}

.admin-kpi-value {
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.1rem;
}
/* ───────────────────────────────────────────────────── */

.admin-page-header {
    padding: 0.25rem 0 0.6rem;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.admin-panel,
.admin-form-panel {
    border-radius: 8px !important;
    border-color: rgba(176, 172, 163, 0.28) !important;
}

.admin-panel {
    padding: 0.75rem 1rem;
}

.admin-form-panel {
    max-width: 920px;
    padding: 1.25rem;
}

/* FND-10: keep the primary form actions reachable on long forms that scroll past the fold. */
.admin-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0.5rem -1.25rem -1.25rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(176, 172, 163, 0.32);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    align-items: center;
}

.admin-breadcrumbs {
    font-size: 0.9rem;
}

.admin-dashboard-overview {
    align-items: stretch;
}

.admin-recent-orders-panel,
.admin-nav-card {
    height: 100%;
}

.admin-nav-card--core {
    border-color: rgba(42, 75, 209, 0.34) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
}

.admin-nav-card--secondary {
    background: #fafaf9;
}

.admin-table-toolbar,
.admin-filter-chips,
.admin-status-actions {
    flex-wrap: wrap;
}

.admin-clickable-row {
    cursor: pointer;
}

.admin-row-link {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.admin-status-panel {
    padding: 1rem;
    background: #fafaf9;
}

.admin-status-panel-content {
    gap: 1rem;
    flex-wrap: wrap;
}

.venue-form-panel {
    max-width: 100% !important;
}

.venue-builder-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* The inspector overlays the toolbox column (see .venue-builder-inspector-rail) rather than
   taking a third column — selecting an element must never squeeze the canvas. Stays 2-col. */
.venue-builder-shell.has-inspector {
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
}

.venue-builder-shell.is-disabled {
    opacity: 0.92;
}

.venue-builder-sidebar,
.venue-builder-main,
.venue-builder-inspector-rail {
    min-width: 0;
}

.venue-builder-sidebar {
    grid-column: 1;
    grid-row: 1;
}

.venue-builder-main {
    grid-column: 2;
    grid-row: 1;
}

/* Docked in the SAME grid cell as the toolbox (→ identical width) and lifted above it, so the
   properties panel reads as a card covering the toolbox. Close (X) hides it without deselecting. */
.venue-builder-inspector-rail {
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.venue-builder-panel {
    background:
        radial-gradient(circle at top, #fafaf9 0%, #ffffff 58%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid #e7e6e2;
    border-radius: 18px;
    box-shadow: 0 18px 40px #1a191712;
    padding: 1rem;
}

.venue-builder-panel + .venue-builder-panel {
    margin-top: 1rem;
}

.venue-builder-panel-header {
    margin-bottom: 0.9rem;
}

.venue-builder-panel-header-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.venue-builder-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.venue-builder-tool-groups {
    display: grid;
    gap: 0.85rem;
}

.venue-builder-tool-group {
    display: grid;
    gap: 0.35rem;
}

.venue-builder-tool-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #85817a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.venue-builder-canvas-size {
    margin-top: 0.75rem;
}

.venue-builder-room-shape {
    margin-top: 0.75rem;
}

.venue-builder-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    color: #454239;
    font-size: 0.84rem;
    font-weight: 700;
}

.venue-color-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.venue-color-control-with-favorite {
    gap: 0.3rem;
}

.venue-color-swatch {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(26, 25, 23, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

.venue-color-input {
    width: 2.4rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #d6d4ce;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.venue-chart-color-cell {
    flex-wrap: wrap;
    gap: 0.4rem;
}

.venue-chart-swatch-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.venue-chart-swatch {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(26, 25, 23, 0.18);
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform .12s, box-shadow .12s;
}

.venue-chart-swatch:hover:not(:disabled) {
    transform: scale(1.08);
}

.venue-chart-swatch.is-active {
    box-shadow: 0 0 0 2px #2a4bd1, inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.venue-chart-swatch:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.venue-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.2rem 1.25rem;
    border: 1px dashed rgba(176, 172, 163, 0.55);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.6);
    color: #5f5b54;
}

.venue-chart-readonly {
    opacity: 0.85;
    filter: saturate(0.85);
    position: relative;
}

.venue-chart-readonly::after {
    content: "Read-only";
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92580a;
    background: rgba(254, 243, 199, 0.95);
    border: 1px solid rgba(180, 83, 9, 0.35);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
}

@keyframes venue-category-row-pulse {
    0% { background-color: rgba(34, 197, 94, 0.22); }
    100% { background-color: transparent; }
}

.venue-category-row-pulse,
.venue-category-row-pulse > td {
    animation: venue-category-row-pulse 0.9s ease-out;
}

.venue-builder-stagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* VLB-04 layout problems panel */
.venue-builder-problems {
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    background: #fef6e7;
    border: 1px solid #f6e0b0;
    color: #7a4a08;
}

.venue-builder-problems.has-blocking {
    background: #fdf0f1;
    border-color: #f6c9cd;
    color: #8f1a21;
}

.venue-builder-problems-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.venue-builder-problems-list {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
}

.venue-builder-problems-list li.is-blocking {
    font-weight: 700;
}

.venue-builder-seatview {
    margin-top: 1rem;
    background:
        radial-gradient(circle at top, #fafaf9 0%, #ffffff 58%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid #e7e6e2;
    border-radius: 18px;
    box-shadow: 0 18px 40px #1a191712;
    padding: 1rem;
}

.venue-builder-seatview-controls {
    margin-bottom: 0.5rem;
}

.venue-builder-seatview-render {
    max-width: 760px;
}

.venue-builder-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.venue-builder-canvas-wrap {
    overflow: auto;
    border-radius: 24px;
    border: 1px solid #e7e6e2;
    background:
        radial-gradient(circle at top, #fafaf9 0%, #f4f4f2 44%, #e7e6e2 100%);
    padding: 1.15rem;
}

.venue-builder-canvas-wrap.is-preview-mode {
    background:
        radial-gradient(circle at top, #fafaf9 0%, #f4f4f2 50%, #e7e6e2 100%);
    border-color: #e7e6e2;
}

.venue-builder-canvas {
    --venue-base-cell-size: clamp(24px, 2.15vw, 38px);
    --venue-cell-size: calc(var(--venue-base-cell-size) * var(--venue-builder-zoom, 1));
    --venue-floor-color: #f4f4f2;
    display: grid;
    grid-template-columns: repeat(var(--venue-builder-columns), var(--venue-cell-size));
    grid-template-rows: repeat(var(--venue-builder-rows), var(--venue-cell-size));
    gap: 4px;
    position: relative;
    align-content: start;
    justify-content: start;
    width: fit-content;
    min-width: calc(var(--venue-builder-columns) * var(--venue-cell-size));
    background-color: var(--venue-floor-color);
}

.venue-builder-canvas-rectangle {
    border-radius: 18px;
}

/* VLB-10: mini-map — scaled overview pinned over the canvas corner; click to jump. */
.venue-builder-minimap {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 180px;
    border: 1px solid #d6d4ce;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(26, 25, 23, 0.12);
    cursor: pointer;
    overflow: hidden;
}

.venue-builder-minimap-item {
    position: absolute;
    border-radius: 1px;
    opacity: 0.85;
    pointer-events: none;
}

/* VLB-01: multi-selection — dashed violet outline distinguishes group members from the primary selection. */
.venue-node.multi-selected {
    outline: 2px dashed var(--tr-primary, #2a4bd1);
    outline-offset: 2px;
}

.venue-layer-item.multi-selected {
    border-color: var(--tr-primary, #2a4bd1);
    border-style: dashed;
}

.venue-builder-multibar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #becefb;
    border-radius: 999px;
    background: #eef2fe;
}

.venue-builder-multibar-count {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1f3488;
    white-space: nowrap;
}

.venue-builder-multibar-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #becefb;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

/* VLB-07: visible grid overlay — one line per cell period (cell + 4px gap), toggled from the stagebar. */
.venue-builder-canvas.show-grid {
    background-image:
        repeating-linear-gradient(to right,
            rgba(95, 91, 84, 0.18) 0, rgba(95, 91, 84, 0.18) 1px,
            transparent 1px, transparent calc(var(--venue-cell-size) + 4px)),
        repeating-linear-gradient(to bottom,
            rgba(95, 91, 84, 0.18) 0, rgba(95, 91, 84, 0.18) 1px,
            transparent 1px, transparent calc(var(--venue-cell-size) + 4px));
}

.venue-floor-standard {
    background: var(--venue-floor-color);
}

.venue-floor-concrete {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(26, 25, 23, 0.06)),
        repeating-linear-gradient(90deg, rgba(26, 25, 23, 0.05) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(26, 25, 23, 0.04) 0 1px, transparent 1px 42px),
        var(--venue-floor-color);
}

.venue-floor-carpet {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(26, 25, 23, 0.07) 0 1px, transparent 1px 5px),
        var(--venue-floor-color);
}

/* Maple gym floor: horizontal boards (edge line + a faintly alternating tone per board) with
   sparse offset butt joints so the run reads as staggered planks, not tile. */
.venue-floor-hardwood {
    background:
        repeating-linear-gradient(90deg, rgba(93, 58, 20, 0.06) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(93, 58, 20, 0.05) 23px 24px, transparent 24px 70px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 12px, rgba(93, 58, 20, 0.05) 12px 24px),
        repeating-linear-gradient(0deg, rgba(93, 58, 20, 0.10) 0 1px, transparent 1px 12px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.10), rgba(93, 58, 20, 0.04)),
        var(--venue-floor-color);
}

/* Outdoor site surfaces. Each texture layers over var(--venue-floor-color) (defaults in
   VenueLayoutStyleDefaults.GetDefaultFloorColor) so an organizer's custom tint carries through. */
.venue-floor-grass {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 62%),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.10) 0 34px,
            rgba(20, 83, 45, 0.08) 34px 68px),
        var(--venue-floor-color);
}

.venue-floor-turf {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.08) 0 22px,
            rgba(20, 83, 45, 0.07) 22px 44px),
        repeating-linear-gradient(0deg, rgba(26, 25, 23, 0.03) 0 1px, transparent 1px 6px),
        var(--venue-floor-color);
}

.venue-floor-asphalt {
    background:
        repeating-linear-gradient(90deg, rgba(26, 25, 23, 0.10) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(0deg, rgba(26, 25, 23, 0.08) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px),
        linear-gradient(0deg, rgba(26, 25, 23, 0.10), rgba(26, 25, 23, 0.10)),
        var(--venue-floor-color);
}

.venue-builder-canvas-round {
    border-radius: 999rem;
    padding: calc(var(--venue-cell-size) * 0.6);
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.18) 62%, rgba(26, 25, 23, 0.08) 100%),
        var(--venue-floor-color);
}

.venue-builder-canvas-round::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid rgba(44, 42, 37, 0.26);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.venue-grid-cell {
    border: 1px dashed transparent;
    border-radius: 8px;
    background: transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

/* The dashed cell tiles ARE the grid, so gate them on the stagebar toggle — otherwise "Hide grid"
   leaves the tiles behind and the button reads as broken. The .show-grid overlay lines pair with these. */
.venue-builder-canvas.show-grid .venue-grid-cell {
    border-color: #d6d4ce;
    background: rgba(255, 255, 255, 0.62);
}

/* Scoped to match the .show-grid tile specificity (and placed after it) so the hover affordance
   still wins whether or not the grid is shown. */
.venue-builder-canvas .venue-grid-cell:hover {
    background: rgba(42, 75, 209, 0.12);
    border-color: #6285ee;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-grid-cell,
.venue-builder-canvas-wrap.is-preview-mode .venue-node-toolbar,
.venue-builder-canvas-wrap.is-preview-mode .venue-resize-handle {
    display: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node {
    cursor: default;
    pointer-events: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node.selected {
    outline: none;
}

.venue-builder-canvas-wrap.is-preview-mode .venue-node:hover {
    transform: none;
}

.venue-builder-canvas-wrap.is-dragging,
.venue-builder-canvas-wrap.is-dragging .venue-grid-cell,
.venue-builder-canvas-wrap.is-dragging .venue-node,
.venue-builder-canvas-wrap.is-dragging .venue-layer-item,
.venue-builder-drag-active .venue-builder-canvas-wrap,
.venue-builder-drag-active .venue-grid-cell,
.venue-builder-drag-active .venue-node,
.venue-builder-drag-active .venue-layer-item,
.venue-builder-global-dragging {
    cursor: grabbing;
}

.venue-node {
    z-index: 2;
    border: 0;
    border-radius: 18px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.3rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 24px #1a19171a;
    backdrop-filter: blur(6px);
    user-select: none;
    overflow: visible;
    position: relative;
}

.venue-node-toolbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.1rem;
    position: relative;
    z-index: 3;
}

.venue-resize-handle {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    touch-action: none;
    user-select: none;
}

.venue-resize-handle:hover {
    color: transparent;
}

.venue-resize-handle .mud-icon-root {
    display: none;
}

.venue-resize-handle::before {
    content: "";
    display: block;
    border-radius: 999px;
    background: rgba(26, 25, 23, 0.34);
    transition: background 120ms ease, transform 120ms ease;
}

.venue-resize-handle:hover::before {
    background: rgba(34, 60, 171, 0.55);
}

.venue-node-stage .venue-resize-handle::before {
    background: rgba(255, 255, 255, 0.5);
}

.venue-node-stage .venue-resize-handle:hover::before {
    background: rgba(190, 206, 251, 0.92);
}

.venue-resize-handle-n,
.venue-resize-handle-s {
    left: 50%;
    transform: translate(-50%, 0);
    cursor: ns-resize;
}

.venue-resize-handle-e,
.venue-resize-handle-w {
    top: 50%;
    transform: translate(0, -50%);
    cursor: ew-resize;
}

.venue-resize-handle-n::before,
.venue-resize-handle-s::before {
    width: 1.1rem;
    height: 0.18rem;
}

.venue-resize-handle-e::before,
.venue-resize-handle-w::before {
    width: 0.18rem;
    height: 1.1rem;
}

.venue-resize-handle-n {
    top: 0;
    transform: translate(-50%, -42%);
}

.venue-resize-handle-s {
    bottom: 0;
    transform: translate(-50%, 42%);
}

.venue-resize-handle-e {
    right: 0;
    transform: translate(42%, -50%);
}

.venue-resize-handle-w {
    left: 0;
    transform: translate(-42%, -50%);
}

.venue-node.selected {
    outline: 3px solid #1a1917;
    outline-offset: 2px;
}

/* An element that paints above the current selection AND overlaps it fades to a ghost and stops
   catching pointer events, so the selected element stays visible underneath and its resize/drag
   handles remain grabbable. The dashed outline keeps the ghosted element's footprint readable.
   Transient editing state only — clearing the selection restores every node. */
.venue-node.is-ghosted {
    opacity: 0.22;
    pointer-events: none;
    outline: 1px dashed rgba(26, 25, 23, 0.85);
    outline-offset: -1px;
}

.venue-node.selected,
.venue-node:has(.venue-node-action-menu) {
    overflow: visible;
}

.venue-node:has(.venue-node-action-menu) {
    z-index: 100000 !important;
}

.venue-node-stage {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #2c2a25) 82%, #ffffff 18%) 0%, var(--venue-node-bg, #2c2a25) 100%);
    color: var(--venue-node-fg, #fafaf9);
    isolation: isolate;
}

.venue-node-sports-field {
    background:
        linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255, 255, 255, 0.58) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
        linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(255, 255, 255, 0.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #86d39f) 76%, #ffffff 24%) 0%, var(--venue-node-bg, #86d39f) 100%);
    color: var(--venue-node-fg, #0f3d25);
    border: 2px solid color-mix(in srgb, var(--venue-node-bg, #86d39f) 58%, #14532d 42%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.34),
        0 12px 24px rgba(20, 83, 45, 0.18);
}

/* Generic (multipurpose / unspecified) field markings: centre circle + boundary
   box. Sport-specific fields carry a .venue-node-field-* class and supply their
   own ::before/::after below, so they are excluded here to avoid leaking these
   base markings (e.g. the round centre circle bleeding into a rectangular court). */
.venue-node-sports-field:not(.venue-node-diamond-field):not([class*="venue-node-field-"])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(32%, 4.6rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    pointer-events: none;
}

.venue-node-sports-field:not(.venue-node-diamond-field):not([class*="venue-node-field-"])::after {
    content: "";
    position: absolute;
    inset: 0.55rem;
    z-index: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.35rem;
    pointer-events: none;
}

/* ===== Diamond fields (baseball is the base art; softball overrides both pseudos below) =====
   Unlike every other field, the diamond element draws NO box at all — the element is fully
   transparent and only the PARK is painted, so the ballpark reads as a fan-shaped aerial
   sitting on the venue's site grass instead of a sticker on a dark square. The park is a
   90° fan from home plate at (50% 92%): ::before is masked to the fan wedge and paints the
   fair-territory grass (mowed in arcs around home), infield, bases, mound, warning track,
   and fence — the wedge mask is what ends the track exactly at the foul poles, and the
   grass radial is transparent past the fence so the site floor shows beyond the wall.
   ::after is masked to a disc just past the fence and paints the overlays that must ignore
   the wedge: the foul lines (disc-cropped at the fence), the yellow foul-pole dots, and the
   batter's dirt circle around home, which straddles foul ground and covers the wedge apex.
   Radial stop percentages resolve against each gradient's farthest corner (from home,
   √(0.5² + 0.92²) ≈ 1.047 box widths), so every radius below is a real box fraction
   pre-divided by that distance — fence at 0.68 box → 64.9%, foul poles where the ±45°
   lines meet it at (50±48.1% 43.9%). Both pseudos rotate as one piece via
   --venue-field-rotation (like every rotatable field, exact only on square boxes). */
.venue-node-diamond-field {
    background: transparent;
    color: var(--venue-node-fg, #0f3d25);
    border: none;
    box-shadow: none;
}

.venue-node-diamond-field::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: rotate(var(--venue-field-rotation, 0deg));
    transform-origin: center;
    /* The masked fan casts its own soft shadow, so the park sits on the lawn with depth. */
    filter: drop-shadow(0 10px 18px rgba(20, 83, 45, 0.25));
    -webkit-mask-image: conic-gradient(from 315deg at 50% 92%, transparent 0deg, #000 0.5deg 89.5deg, transparent 90deg 360deg);
    mask-image: conic-gradient(from 315deg at 50% 92%, transparent 0deg, #000 0.5deg 89.5deg, transparent 90deg 360deg);
    background:
        /* bases (white dots): 90 ft = 0.19 box → 1B/3B at (50±13.5% 78.5%), 2B at (50% 65%) */
        radial-gradient(circle at 50% 65%, rgba(255,255,255,0.96) 0 1.6%, transparent 2.0% 100%),
        radial-gradient(circle at 63.5% 78.5%, rgba(255,255,255,0.96) 0 1.5%, transparent 1.9% 100%),
        radial-gradient(circle at 36.5% 78.5%, rgba(255,255,255,0.96) 0 1.5%, transparent 1.9% 100%),
        /* pitcher's mound: white rubber on a tan bump inside the infield grass */
        radial-gradient(circle at 50% 79%, rgba(255,255,255,0.95) 0 0.9%, transparent 1.2% 100%),
        radial-gradient(circle at 50% 79%, #c79a6b 0 3.2%, color-mix(in srgb, #c79a6b 74%, #14532d 26%) 3.2% 4.0%, transparent 4.4% 100%),
        /* infield: grass interior inside the base paths */
        radial-gradient(circle at 50% 78.5%, color-mix(in srgb, var(--venue-node-bg, #5fb87f) 88%, #ffffff 12%) 0 12.4%, transparent 12.8% 100%),
        /* infield: skinned dirt carrying the base paths (0.20 box around the diamond center) */
        radial-gradient(circle at 50% 78.5%, #c79a6b 0 21.7%, color-mix(in srgb, #c79a6b 80%, #14532d 20%) 21.7% 23%, transparent 23.5% 100%),
        /* fair territory in one home-centered radial: outfield grass mowed in alternating
           arcs, then warning track, then the fence line — and transparent past the fence,
           which is what lets the site lawn show beyond the wall. */
        radial-gradient(circle at 50% 92%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 82%, #ffffff 18%) 0 24%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 92%, #ffffff 8%) 24% 33%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 82%, #ffffff 18%) 33% 42%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 92%, #ffffff 8%) 42% 51%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 82%, #ffffff 18%) 51% 60.6%,
            color-mix(in srgb, #c79a6b 86%, #14532d 14%) 60.6% 64.9%,
            color-mix(in srgb, var(--venue-node-bg, #5fb87f) 30%, #14532d 70%) 64.9% calc(64.9% + 2.5px),
            transparent calc(64.9% + 2.5px) 100%);
}

/* Overlays that must escape the fan wedge (drawn over ::before): foul lines cropped at the
   fence by the disc mask, yellow foul poles where the lines meet the arc, and the batter's
   dirt circle around home — a full circle straddling foul ground, hiding the wedge apex. */
.venue-node-diamond-field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: rotate(var(--venue-field-rotation, 0deg));
    transform-origin: center;
    -webkit-mask-image: radial-gradient(circle at 50% 92%, #000 0 66%, transparent 66.6% 100%);
    mask-image: radial-gradient(circle at 50% 92%, #000 0 66%, transparent 66.6% 100%);
    background:
        /* home plate on the batter's dirt */
        radial-gradient(circle at 50% 92%, rgba(255,255,255,0.98) 0 1.8%, transparent 2.2% 100%),
        /* foul poles: yellow markers where the foul lines meet the fence */
        radial-gradient(circle at 1.9% 43.9%, rgba(250,204,21,0.95) 0 1.0%, transparent 1.4% 100%),
        radial-gradient(circle at 98.1% 43.9%, rgba(250,204,21,0.95) 0 1.0%, transparent 1.4% 100%),
        /* foul lines: thin rays along the fan edges, ending at the fence via the disc mask */
        conic-gradient(from 315deg at 50% 92%,
            transparent 0deg 0.7deg,
            rgba(255,255,255,0.9) 0.7deg 1.6deg,
            transparent 1.6deg 88.4deg,
            rgba(255,255,255,0.9) 88.4deg 89.3deg,
            transparent 89.3deg 360deg),
        /* batter's area: skinned dirt circle around home plate */
        radial-gradient(circle at 50% 92%, #c79a6b 0 5.5%, color-mix(in srgb, #c79a6b 78%, #14532d 22%) 5.5% 6.3%, transparent 6.7% 100%);
}

.venue-node-section {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #bfd6f3) 72%, #ffffff 28%) 0%, var(--venue-node-bg, #bfd6f3) 100%);
    color: var(--venue-node-fg, #1a1917);
    position: relative;
    isolation: isolate;
}

.venue-node-section.is-accessible-section {
    background: linear-gradient(180deg, color-mix(in srgb, #bbdefb 82%, #ffffff 18%) 0%, #bbdefb 100%);
    border: 3px solid #1565c0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.56),
        0 12px 28px rgba(21, 101, 192, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.48);
    color: #0d47a1;
    min-height: 5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-stage > .venue-node-subtitle,
.venue-node-area > .venue-node-title,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-title,
.venue-node-section > .venue-node-subtitle,
.venue-node-table > .venue-node-title,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-title,
.venue-node-floor-zone > .venue-node-subtitle {
    position: absolute;
    z-index: 2;
    left: 1rem;
    margin: 0;
}

.venue-node-stage > .venue-node-toolbar,
.venue-node-area > .venue-node-toolbar,
.venue-node-section > .venue-node-toolbar,
.venue-node-table > .venue-node-toolbar,
.venue-node-floor-zone > .venue-node-toolbar {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-area > .venue-node-title,
.venue-node-section > .venue-node-title,
.venue-node-table > .venue-node-title,
.venue-node-floor-zone > .venue-node-title {
    top: 0.95rem;
}

.venue-node-stage > .venue-node-subtitle,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-subtitle,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-subtitle {
    top: 2.5rem;
}

.venue-node-stage > .venue-node-title,
.venue-node-stage > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(26, 25, 23, 0.18);
}

.venue-node-sports-field > .venue-node-title,
.venue-node-sports-field > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.82);
    color: var(--venue-node-fg, #0f3d25);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(20, 83, 45, 0.16);
}

.venue-node-area > .venue-node-title,
.venue-node-area > .venue-node-subtitle,
.venue-node-section > .venue-node-title,
.venue-node-table > .venue-node-title,
.venue-node-table > .venue-node-subtitle,
.venue-node-floor-zone > .venue-node-title,
.venue-node-floor-zone > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(26, 25, 23, 0.12);
    font-weight: 700;
    font-size: 0.85rem;
}

.venue-node-section > .venue-node-subtitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
    background: transparent;
    padding: 0.2rem 0.65rem;
    border-radius: 4px;
    border: none;
    font-weight: 500;
    font-size: 0.75rem;
    color: #5f5b54;
}

.venue-node-section-elevated {
    box-shadow:
        0 28px 56px rgba(26, 25, 23, 0.32),
        0 14px 24px rgba(26, 25, 23, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.58);
    transform: translateY(-3px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #bfd6f3) 65%, #ffffff 35%) 0%, var(--venue-node-bg, #bfd6f3) 100%) !important;
    perspective: 800px;
}

.venue-node-section-elevated::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2%;
    height: 0.6rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 40%, rgba(26, 25, 23, 0.22) 100%);
    opacity: 0.92;
    pointer-events: none;
    box-shadow:
        0 6px 16px rgba(26, 25, 23, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.32);
}

.venue-node-accessible-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.62rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #1976d2;
    color: #fff;
    box-shadow: 0 8px 18px rgba(25, 118, 210, 0.24);
}

.venue-node-area {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #ffd979) 68%, #ffffff 32%) 0%, var(--venue-node-bg, #ffd979) 100%);
    color: var(--venue-node-fg, #7a4a08);
    isolation: isolate;
}

.venue-node-floor-zone {
    background: var(--venue-node-bg, #e7e6e2);
    color: var(--venue-node-fg, #454239);
    border: 2px dashed color-mix(in srgb, var(--venue-node-bg, #e7e6e2) 50%, #5f5b54 50%);
    opacity: 0.72;
    isolation: isolate;
}

.venue-node-floor-zone.venue-floor-concrete {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(26, 25, 23, 0.06)),
        repeating-linear-gradient(90deg, rgba(26, 25, 23, 0.08) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(0deg, rgba(26, 25, 23, 0.06) 0 1px, transparent 1px 36px),
        var(--venue-node-bg, #e7e6e2);
}

.venue-node-floor-zone.venue-floor-carpet {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(26, 25, 23, 0.09) 0 1px, transparent 1px 5px),
        var(--venue-node-bg, #e7e6e2);
}

.venue-node-floor-zone.venue-floor-hardwood {
    background:
        repeating-linear-gradient(90deg, rgba(93, 58, 20, 0.08) 0 1px, transparent 1px 38px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 10px, rgba(93, 58, 20, 0.06) 10px 20px),
        repeating-linear-gradient(0deg, rgba(93, 58, 20, 0.12) 0 1px, transparent 1px 10px),
        var(--venue-node-bg, #e7d2a6);
}

/* Outdoor floor-zone surfaces mirror the canvas venue-floor-* textures, tinted by the zone's own
   color so a grass zone can sit on a concrete site (or vice versa). */
.venue-node-floor-zone.venue-floor-grass {
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.12) 0 18px,
            rgba(20, 83, 45, 0.10) 18px 36px),
        var(--venue-node-bg, #b5d9bc);
}

.venue-node-floor-zone.venue-floor-turf {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.10) 0 12px,
            rgba(20, 83, 45, 0.08) 12px 24px),
        var(--venue-node-bg, #a9d2b4);
}

.venue-node-floor-zone.venue-floor-asphalt {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 8px),
        linear-gradient(0deg, rgba(26, 25, 23, 0.12), rgba(26, 25, 23, 0.12)),
        var(--venue-node-bg, #b7bfc9);
}

.venue-node-floor-zone.selected {
    opacity: 1;
    border-style: solid;
}

.venue-node-walkway {
    background:
        linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.16) 7% 8%, transparent 8% 92%, rgba(255, 255, 255, 0.16) 92% 93%, transparent 93% 100%),
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--venue-node-bg, #dce4fd) 28%, #ffffff 72%) 0, color-mix(in srgb, var(--venue-node-bg, #dce4fd) 28%, #ffffff 72%) 8px, var(--venue-node-bg, #dce4fd) 8px, var(--venue-node-bg, #dce4fd) 16px);
    color: var(--venue-node-fg, #1e2f6d);
    border: 1px solid color-mix(in srgb, var(--venue-node-bg, #dce4fd) 70%, #1a1917 30%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 20px rgba(30, 64, 175, 0.12);
}

.venue-node-walkway::before {
    content: "";
    position: absolute;
    inset: 16% 42% 16% 42%;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0 10px, rgba(255, 255, 255, 0.18) 10px 18px);
    box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.08);
    opacity: 0.9;
    pointer-events: none;
}

.venue-node-walkway::after {
    content: "";
    position: absolute;
    inset: 12% 8%;
    border-top: 1px dashed rgba(30, 64, 175, 0.34);
    border-bottom: 1px dashed rgba(30, 64, 175, 0.34);
    pointer-events: none;
    opacity: 0.78;
}

.venue-node-entrance {
    color: var(--venue-node-fg, #14532d);
}

.venue-node-exit {
    color: var(--venue-node-fg, #8f1a21);
}

.venue-node-entrance-exit {
    color: var(--venue-node-fg, #12652f);
}

.venue-node-door {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    min-width: 2rem !important;
    width: 2.2rem !important;
    height: 1.8rem !important;
}

.venue-node-door > .venue-node-title,
.venue-node-door > .venue-node-subtitle {
    display: none !important;
}

.venue-node-entrance > .venue-node-title,
.venue-node-exit > .venue-node-title,
.venue-node-entrance-exit > .venue-node-title {
    position: absolute !important;
    bottom: -1.8rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 0.25rem 0.4rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(26, 25, 23, 0.2) !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 5rem !important;
    text-align: center !important;
    margin: 0 !important;
}

.venue-node-door::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 20%;
    height: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #86efac) 72%, #ffffff 28%), color-mix(in srgb, var(--venue-node-bg, #86efac) 72%, #1a1917 28%));
    box-shadow: 0 4px 8px rgba(26, 25, 23, 0.08);
}

.venue-door-leaf {
    display: none;
}

.venue-door-swing {
    display: none;
}

/* Stairs & tunnel openings — circulation features dropped inside seating. The carved seat gap is
   produced by the layout mapper; these styles draw the stair flight / tunnel mouth so the opening
   reads as built circulation rather than a patch of missing seats. Step and mouth geometry is sized
   off --venue-cell-size, so the treads stay legible whether one section is zoomed in or the whole
   bowl is fit to view (where a fixed-pixel tread would wash out to a blank strip). */
.venue-node-structure {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 60%, #ffffff 40%) 0%, color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 96%, #5f5b54 4%) 100%);
    color: var(--venue-node-fg, #1a1917);
    border: 1px solid color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 50%, #1a1917 50%);
    isolation: isolate;
    position: relative;
    overflow: hidden;
    /* Circulation features carve full grid cells, but seating sits inset by the node padding (0.7rem),
       so a full-bleed stair/tunnel overhangs the seating band top & bottom and reads as a crooked bar
       sticking out of the stand. Inset the painted box (grid margin) so the flight nestles flush inside
       the band like a real aisle, and drop the seat-sized 18px radius to a tight strip corner. */
    margin: 0.55rem;
    border-radius: 0.5rem;
}

.venue-structure-glyph {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* One stair step ≈ two-thirds of a grid cell: a run shows several crisp treads up close and still
   reads as a ribbed flight when fit to view. Two background layers — a no-repeat rail layer that
   frames the flight along its run, and a repeating tread layer that tiles one step (bright nosing
   edge, lit tread face, then a shadowed riser). */
.venue-node-stairs .venue-structure-glyph {
    --stair-step: calc(var(--venue-cell-size, 30px) * 0.66);
    background-repeat: no-repeat, repeat;
}

/* Vertical stair: climbs through the rows, so the treads are horizontal and the rails vertical. */
.venue-node-stairs-vertical .venue-structure-glyph {
    background-image:
        linear-gradient(90deg, rgba(26, 25, 23, 0.4) 0 6%, transparent 6% 94%, rgba(26, 25, 23, 0.4) 94% 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0 10%, rgba(26, 25, 23, 0.06) 10% 58%, rgba(26, 25, 23, 0.44) 58% 100%);
    background-size: 100% 100%, 100% var(--stair-step);
}

/* Sideways stair: climbs across the width, so the treads are vertical and the rails horizontal. */
.venue-node-stairs-horizontal .venue-structure-glyph {
    background-image:
        linear-gradient(180deg, rgba(26, 25, 23, 0.4) 0 6%, transparent 6% 94%, rgba(26, 25, 23, 0.4) 94% 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0 10%, rgba(26, 25, 23, 0.06) 10% 58%, rgba(26, 25, 23, 0.44) 58% 100%);
    background-size: 100% 100%, var(--stair-step) 100%;
}

/* Tunnel / vomitory — a concrete portal: the node is the surround, the glyph is a dark arched mouth
   inset within it, with a bright lintel along the arch top so it reads as an opening fans walk
   through (a dark slab alone just reads as a hole in the seats). */
.venue-node-tunnel {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-node-bg, #454239) 46%, #d6d4ce 54%) 0%,
        color-mix(in srgb, var(--venue-node-bg, #454239) 90%, #1a1917 10%) 100%);
    color: var(--venue-node-fg, #fafaf9);
    border-color: color-mix(in srgb, var(--venue-node-bg, #454239) 55%, #000000 45%);
}

.venue-node-tunnel .venue-structure-glyph {
    inset: 16% 22% 0;
    border-radius: 999px 999px 0 0;
    background: radial-gradient(135% 116% at 50% 100%, #0a0b0e 0 46%, rgba(4, 6, 12, 0.5) 68%, rgba(4, 6, 12, 0.12) 85%, transparent 93%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(26, 25, 23, 0.4);
}

/* Flat walkway strip (cross-aisle / stair landing) — plain concrete, lighter than a stair flight,
   with no tread pattern so it reads as a lane fans walk along rather than climb. */
.venue-node-aisle {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 28%, #ffffff 72%) 0%,
        color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 58%, #ffffff 42%) 100%);
    border-color: color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 55%, #1a1917 45%);
}

/* ---- Circulation tiles on the public seat map ----
   A structure that sits inside a stand renders as a tile in that section's overlay grid, whose
   tracks mirror the seat rows exactly (same 1fr tracks, same gaps). Each tile therefore sits
   precisely on the cells its structure carved out of the seat grid — in the zoomed-in section
   view and the overview alike. Tiles paint under the seats and are never interactive. */
.public-venue-structure-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--venue-overlay-columns, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--venue-overlay-rows, 1), minmax(0, 1fr));
    column-gap: 0.24rem;
    row-gap: 0.28rem;
    pointer-events: none;
    z-index: 0;
}

/* Bench seats merge along their run (that axis's gap collapses to 0) — mirror it so the overlay
   tracks keep matching the seat tracks. The block-target overlay shares the same tracks. */
.public-venue-section.is-facing-up .public-venue-structure-overlay,
.public-venue-section.is-facing-down .public-venue-structure-overlay,
.public-venue-section.is-facing-up .public-venue-block-overlay,
.public-venue-section.is-facing-down .public-venue-block-overlay {
    column-gap: 0;
}

.public-venue-section.is-facing-left .public-venue-structure-overlay,
.public-venue-section.is-facing-right .public-venue-structure-overlay,
.public-venue-section.is-facing-left .public-venue-block-overlay,
.public-venue-section.is-facing-right .public-venue-block-overlay {
    row-gap: 0;
}

/* Tile base: a poured-concrete surface framed by a hairline curb. */
.venue-structure-tile {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 40%, #ffffff 60%) 0%,
        color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 68%, #ffffff 32%) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 45%, #1a1917 30%),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.venue-structure-tile .venue-structure-glyph {
    inset: 1px;
}

/* Stair flights: one repeating step (bright nosing → tread face → riser shadow), three treads per
   grid cell, floored at 8px so the flight degrades to a coarser-but-still-stepped ribbon when the
   whole bowl is fit to view. --venue-structure-run-cells is stamped per tile from the climb axis. */
.venue-structure-tile.venue-node-stairs-vertical .venue-structure-glyph {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0 8%,
        rgba(255, 255, 255, 0.3) 8% 16%,
        rgba(133, 129, 122, 0.12) 16% 66%,
        rgba(26, 25, 23, 0.16) 66% 86%,
        rgba(26, 25, 23, 0.36) 86% 100%);
    background-size: 100% max(calc(100% / (var(--venue-structure-run-cells, 2) * 3)), 8px);
    background-repeat: repeat;
}

.venue-structure-tile.venue-node-stairs-horizontal .venue-structure-glyph {
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, 0.9) 0 8%,
        rgba(255, 255, 255, 0.3) 8% 16%,
        rgba(133, 129, 122, 0.12) 16% 66%,
        rgba(26, 25, 23, 0.16) 66% 86%,
        rgba(26, 25, 23, 0.36) 86% 100%);
    background-size: max(calc(100% / (var(--venue-structure-run-cells, 2) * 3)), 8px) 100%;
    background-repeat: repeat;
}

/* The riser shadow falls toward the field, so flights read as descending to it: flip the step
   for stands that face up/left (their field edge is the top/left of the tile). */
.public-venue-section.is-facing-up .venue-structure-tile.venue-node-stairs-vertical .venue-structure-glyph {
    background-image: linear-gradient(0deg,
        rgba(255, 255, 255, 0.9) 0 8%,
        rgba(255, 255, 255, 0.3) 8% 16%,
        rgba(133, 129, 122, 0.12) 16% 66%,
        rgba(26, 25, 23, 0.16) 66% 86%,
        rgba(26, 25, 23, 0.36) 86% 100%);
}

.public-venue-section.is-facing-left .venue-structure-tile.venue-node-stairs-horizontal .venue-structure-glyph {
    background-image: linear-gradient(270deg,
        rgba(255, 255, 255, 0.9) 0 8%,
        rgba(255, 255, 255, 0.3) 8% 16%,
        rgba(133, 129, 122, 0.12) 16% 66%,
        rgba(26, 25, 23, 0.16) 66% 86%,
        rgba(26, 25, 23, 0.36) 86% 100%);
}

/* Zoomed-in flights gain a center handrail — the strongest "these are stairs" cue at tap size.
   Flights carrying a climb arrow drop the rail (see below): chevrons and rail share the center
   line, and overlapping them muddies both. */
.public-event-canvas.is-focus-mode .venue-structure-tile.venue-node-stairs::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: color-mix(in srgb, var(--venue-node-bg, #9aa5b1) 28%, #454239 72%);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.55), 0 1px 2px rgba(26, 25, 23, 0.35);
}

.public-event-canvas.is-focus-mode .venue-structure-tile.venue-node-stairs-vertical::after {
    top: 5%;
    bottom: 5%;
    left: 50%;
    width: 4px;
    margin-left: -2px;
}

.public-event-canvas.is-focus-mode .venue-structure-tile.venue-node-stairs-horizontal::after {
    left: 5%;
    right: 5%;
    top: 50%;
    height: 4px;
    margin-top: -2px;
}

.public-event-canvas.is-focus-mode .venue-structure-tile.is-climb-up::after,
.public-event-canvas.is-focus-mode .venue-structure-tile.is-climb-down::after,
.public-event-canvas.is-focus-mode .venue-structure-tile.is-climb-left::after,
.public-event-canvas.is-focus-mode .venue-structure-tile.is-climb-right::after {
    content: none;
}

/* Flat walkway tile: clean lane, no treads. */
.venue-structure-tile.venue-node-aisle {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 26%, #ffffff 74%) 0%,
        color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 52%, #ffffff 48%) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--venue-node-bg, #b6c0cc) 52%, #1a1917 28%),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Tunnel tile: a concrete portal whose dark mouth opens against the field-side edge (set per
   stand facing below), arched on the side that runs back under the seats. Faint cross-lines fade
   into the dark like steps dropping to the concourse. */
.venue-structure-tile.venue-node-tunnel {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-node-bg, #454239) 26%, #d6d4ce 74%) 0%,
        color-mix(in srgb, var(--venue-node-bg, #454239) 48%, #b0aca3 52%) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--venue-node-bg, #454239) 55%, #1a1917 45%),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.venue-structure-tile.venue-node-tunnel .venue-structure-glyph,
.public-venue-section.is-facing-down .venue-structure-tile.venue-node-tunnel .venue-structure-glyph {
    inset: 24% 12% 0;
    border-radius: 48% 48% 0 0 / 62% 62% 0 0;
    background:
        repeating-linear-gradient(180deg, rgba(176, 172, 163, 0.22) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #2c2e38 0%, #101116 42%, #0a0b0e 100%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--venue-node-bg, #454239) 30%, #fafaf9 70%),
        inset 0 3px 5px rgba(16, 15, 14, 0.75);
}

.public-venue-section.is-facing-up .venue-structure-tile.venue-node-tunnel .venue-structure-glyph {
    inset: 0 12% 24%;
    border-radius: 0 0 48% 48% / 0 0 62% 62%;
    background:
        repeating-linear-gradient(0deg, rgba(176, 172, 163, 0.22) 0 1px, transparent 1px 6px),
        linear-gradient(0deg, #2c2e38 0%, #101116 42%, #0a0b0e 100%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--venue-node-bg, #454239) 30%, #fafaf9 70%),
        inset 0 -3px 5px rgba(16, 15, 14, 0.75);
}

.public-venue-section.is-facing-left .venue-structure-tile.venue-node-tunnel .venue-structure-glyph {
    inset: 12% 24% 12% 0;
    border-radius: 0 48% 48% 0 / 0 62% 62% 0;
    background:
        repeating-linear-gradient(270deg, rgba(176, 172, 163, 0.22) 0 1px, transparent 1px 6px),
        linear-gradient(270deg, #2c2e38 0%, #101116 42%, #0a0b0e 100%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--venue-node-bg, #454239) 30%, #fafaf9 70%),
        inset -3px 0 5px rgba(16, 15, 14, 0.75);
}

.public-venue-section.is-facing-right .venue-structure-tile.venue-node-tunnel .venue-structure-glyph {
    inset: 12% 0 12% 24%;
    border-radius: 48% 0 0 48% / 62% 0 0 62%;
    background:
        repeating-linear-gradient(90deg, rgba(176, 172, 163, 0.22) 0 1px, transparent 1px 6px),
        linear-gradient(90deg, #2c2e38 0%, #101116 42%, #0a0b0e 100%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--venue-node-bg, #454239) 30%, #fafaf9 70%),
        inset 3px 0 5px rgba(16, 15, 14, 0.75);
}

/* Zoomed in, tiles round off a touch more and the curb reads slightly heavier. */
.public-event-canvas.is-focus-mode .venue-structure-tile {
    border-radius: 6px;
}

.public-event-canvas.is-focus-mode .venue-structure-tile .venue-structure-glyph {
    inset: 2px;
}

/* Climb-direction chevrons — an optional light wayfinding arrow on a stair flight showing which
   way it climbs (builder inspector "Climb arrow": vertical runs point up/down, sideways runs
   left/right; demo stands point theirs up-stand, away from the field). One letterboxed chevron
   per grid cell rides the glyph's ::after above the treads. The public map shows them only at
   focus zoom — at fit-to-view they'd be sub-10px noise — while the admin builder always shows
   them so the inspector setting gives immediate feedback (the public canvas also carries
   .venue-builder-canvas, hence the :not() guard). */
.venue-node-stairs.is-climb-up .venue-structure-glyph::after,
.venue-node-stairs.is-climb-down .venue-structure-glyph::after,
.venue-node-stairs.is-climb-left .venue-structure-glyph::after,
.venue-node-stairs.is-climb-right .venue-structure-glyph::after {
    content: "";
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0.8;
    background-position: center;
    pointer-events: none;
}

.venue-builder-canvas:not(.public-event-canvas) .venue-node-stairs .venue-structure-glyph::after,
.public-event-canvas.is-focus-mode .venue-structure-tile.venue-node-stairs .venue-structure-glyph::after {
    display: block;
}

/* Vertical runs stack one chevron per cell down the flight; sideways runs march them across it.
   Tiles derive a cell from their climb span; builder nodes fall back to the canvas cell size.
   The SVG letterboxes (preserveAspectRatio) so the chevron never stretches with the cell. */
.venue-structure-tile.venue-node-stairs {
    --venue-structure-cell-extent: calc(100% / var(--venue-structure-run-cells, 2));
}

.venue-node-stairs.is-climb-up .venue-structure-glyph::after,
.venue-node-stairs.is-climb-down .venue-structure-glyph::after {
    background-repeat: no-repeat repeat;
    background-size: min(58%, 26px) var(--venue-structure-cell-extent, var(--venue-cell-size, 30px));
}

.venue-node-stairs.is-climb-left .venue-structure-glyph::after,
.venue-node-stairs.is-climb-right .venue-structure-glyph::after {
    background-repeat: repeat no-repeat;
    background-size: var(--venue-structure-cell-extent, var(--venue-cell-size, 30px)) min(58%, 26px);
}

/* White chevron over a soft dark halo so it stays legible on light treads and custom colors. */
.venue-node-stairs.is-climb-up .venue-structure-glyph::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 15.5 12 8.5 19 15.5' fill='none' stroke='%230f172a' stroke-opacity='0.4' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 15.5 12 8.5 19 15.5' fill='none' stroke='%23ffffff' stroke-opacity='0.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.venue-node-stairs.is-climb-down .venue-structure-glyph::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5 12 15.5 19 8.5' fill='none' stroke='%230f172a' stroke-opacity='0.4' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 8.5 12 15.5 19 8.5' fill='none' stroke='%23ffffff' stroke-opacity='0.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.venue-node-stairs.is-climb-left .venue-structure-glyph::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 5 8.5 12 15.5 19' fill='none' stroke='%230f172a' stroke-opacity='0.4' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5 5 8.5 12 15.5 19' fill='none' stroke='%23ffffff' stroke-opacity='0.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.venue-node-stairs.is-climb-right .venue-structure-glyph::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5 15.5 12 8.5 19' fill='none' stroke='%230f172a' stroke-opacity='0.4' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 5 15.5 12 8.5 19' fill='none' stroke='%23ffffff' stroke-opacity='0.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A seat cell carved out by a stair/tunnel/door — keep its grid slot so neighbours stay aligned,
   but render it as an empty gap in the admin seat preview. */
.venue-node-seat-dot.is-carved {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 0;
}

.venue-node-support {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #d6d4ce) 65%, #ffffff 35%) 0%, var(--venue-node-bg, #d6d4ce) 100%);
    color: var(--venue-node-fg, #2c2a25);
}

.venue-node-table {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg, #b8ded3) 68%, #ffffff 32%) 0%, var(--venue-node-bg, #b8ded3) 100%);
    color: var(--venue-node-fg, #173b34);
    isolation: isolate;
    position: relative;
}

.venue-node-table.is-round-table {
    border-radius: 999rem;
}

.venue-table-top {
    position: absolute;
    inset: 28% 24%;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-table-top-color, #5e402d) 76%, #ffffff 24%), var(--venue-table-top-color, #5e402d));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 8px 16px rgba(26, 25, 23, 0.18);
    z-index: 1;
}

.venue-node-table.is-round-table .venue-table-top {
    border-radius: 999rem;
}

.venue-node-table-preview {
    position: absolute;
    inset: 0.45rem;
    z-index: 1;
    pointer-events: none;
}

.venue-node-table-seat-dot {
    position: absolute;
    width: clamp(0.44rem, 14%, 0.75rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 46%, #ffffff 54%) 0%, var(--venue-seat-color, #607aa0) 100%);
    border: 1px solid rgba(20, 83, 45, 0.18);
    box-shadow: 0 1px 3px rgba(26, 25, 23, 0.18);
}

.venue-node-title {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.05;
}

.venue-node-subtitle {
    font-size: 0.72rem;
    opacity: 0.86;
}

.venue-node-seat-preview {
    position: absolute;
    inset: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1;
    overflow: hidden;
    opacity: 0.88;
}

.venue-node-seat-preview-row {
    display: grid;
    gap: 0.24rem;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    transform: translateY(calc(var(--venue-row-lift, 0rem) * -1)) scaleY(var(--venue-row-scale, 1));
    transform-origin: center bottom;
    transition: box-shadow 120ms ease;
    grid-auto-flow: dense;
}

.venue-node-section-elevated .venue-node-seat-preview-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(26, 25, 23, 0.04) 100%);
    border-radius: 0.4rem;
    padding: 0.15rem 0.1rem;
    margin-bottom: 0.3rem;
    box-shadow:
        0 2px 4px rgba(26, 25, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.venue-node-seat-dot {
    border-radius: 0.66rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 48%, #ffffff 52%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 68%, #ffffff 32%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(77, 103, 138, 0.36);
    box-shadow:
        inset 0 -2px 3px rgba(26, 25, 23, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 3px 6px rgba(26, 25, 23, 0.18);
}

.venue-node-seat-dot.bleacher {
    border-radius: 0.2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 56%, #ffffff 44%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 70%, #ffffff 30%) 50%, var(--venue-seat-color, #607aa0) 100%);
}

.venue-node-seat-dot.vip {
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 48%, #ffffff 52%) 0%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 68%, #ffffff 32%) 50%, var(--venue-seat-color, #d6a42a) 100%);
    border-color: rgba(214, 164, 42, 0.42);
}

.venue-node-seat-dot.general-admission {
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.84) 0 18%, transparent 19% 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 48%, #ffffff 52%) 0%, var(--venue-seat-color, #607aa0) 100%);
}

.venue-node-seat-dot.standing {
    border-radius: 0.5rem 0.5rem 0.28rem 0.28rem;
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.76) 42% 58%, transparent 58% 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 50%, #ffffff 50%) 0%, var(--venue-seat-color, #607aa0) 100%);
}

.venue-node-seat-dot.wheelchair {
    background: #1976d2;
    border-color: rgba(255, 255, 255, 0.7);
    position: relative;
    box-shadow:
        inset 0 -2px 3px rgba(26, 25, 23, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.32),
        0 3px 6px rgba(25, 118, 210, 0.32);
}

.venue-node-seat-dot.wheelchair::after {
    content: "";
    position: absolute;
    inset: 10%;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12.5' cy='4' r='2'/%3E%3Cpath d='M10.5 7h2v3.5h4.5a1.5 1.5 0 0 1 1.45 1.86l-1 4-1.94-.48.7-2.88H13a1.5 1.5 0 0 1-1.5-1.5V11h-1zM9 13.2A4.5 4.5 0 1 0 13.2 19h-2.16A2.5 2.5 0 1 1 9 15.36z'/%3E%3C/svg%3E") center / 86% 86% no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12.5' cy='4' r='2'/%3E%3Cpath d='M10.5 7h2v3.5h4.5a1.5 1.5 0 0 1 1.45 1.86l-1 4-1.94-.48.7-2.88H13a1.5 1.5 0 0 1-1.5-1.5V11h-1zM9 13.2A4.5 4.5 0 1 0 13.2 19h-2.16A2.5 2.5 0 1 1 9 15.36z'/%3E%3C/svg%3E") center / 86% 86% no-repeat;
    border: 0;
    border-radius: 0;
}

.venue-node-seat-dot.companion {
    background: #4f9cec;
    border-color: rgba(255, 255, 255, 0.7);
    position: relative;
    box-shadow:
        inset 0 -2px 3px rgba(26, 25, 23, 0.16),
        inset 0 1px 2px rgba(255, 255, 255, 0.36),
        0 3px 6px rgba(79, 156, 236, 0.32);
}

.venue-node-seat-dot.companion::after {
    content: "";
    position: absolute;
    inset: 10%;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center / 86% 86% no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center / 86% 86% no-repeat;
}

/* ---- Designer canvas: reflect FacingDirection in the in-section preview ----
   The buyer view (.public-venue-section) already keys off is-facing-*; mirror
   the visual cues on .venue-node-section so an operator sees the change without
   having to save and reload the buyer page. */

/* Bleacher dots, horizontal benches (Up/Down): each row reads as one continuous
   horizontal bar by collapsing the inter-seat gap. */
.venue-node-section.is-facing-up .venue-node-seat-preview-row,
.venue-node-section.is-facing-down .venue-node-seat-preview-row {
    gap: 0;
}

.venue-node-section.is-facing-up .venue-node-seat-dot.bleacher,
.venue-node-section.is-facing-down .venue-node-seat-dot.bleacher {
    border-radius: 0;
    border-left-color: rgba(26, 25, 23, 0.5);
    border-right-color: rgba(26, 25, 23, 0.5);
}

.venue-node-section.is-facing-up .venue-node-seat-preview-row .venue-node-seat-dot.bleacher:first-child,
.venue-node-section.is-facing-down .venue-node-seat-preview-row .venue-node-seat-dot.bleacher:first-child {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.venue-node-section.is-facing-up .venue-node-seat-preview-row .venue-node-seat-dot.bleacher:last-child,
.venue-node-section.is-facing-down .venue-node-seat-preview-row .venue-node-seat-dot.bleacher:last-child {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

/* Bleacher dots, vertical benches (Left/Right): collapse the inter-row gap so
   each column reads as one continuous vertical bar. */
.venue-node-section.is-facing-left .venue-node-seat-preview,
.venue-node-section.is-facing-right .venue-node-seat-preview {
    gap: 0;
}

.venue-node-section.is-facing-left .venue-node-seat-dot.bleacher,
.venue-node-section.is-facing-right .venue-node-seat-dot.bleacher {
    border-radius: 0;
    border-top-color: rgba(26, 25, 23, 0.5);
    border-bottom-color: rgba(26, 25, 23, 0.5);
}

.venue-node-section.is-facing-left .venue-node-seat-preview-row:first-child .venue-node-seat-dot.bleacher,
.venue-node-section.is-facing-right .venue-node-seat-preview-row:first-child .venue-node-seat-dot.bleacher {
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}

.venue-node-section.is-facing-left .venue-node-seat-preview-row:last-child .venue-node-seat-dot.bleacher,
.venue-node-section.is-facing-right .venue-node-seat-preview-row:last-child .venue-node-seat-dot.bleacher {
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

/* Non-bleacher chair icons rotate to face the direction. Auto (is-facing-auto)
   keeps them upright; an explicit override rotates them so the operator can see
   the value took effect even on chair-icon sections. */
.venue-node-section.is-facing-right:not(.is-facing-auto) .venue-node-seat-dot:not(.bleacher) {
    transform: rotate(90deg);
}

.venue-node-section.is-facing-down:not(.is-facing-auto) .venue-node-seat-dot:not(.bleacher) {
    transform: rotate(180deg);
}

.venue-node-section.is-facing-left:not(.is-facing-auto) .venue-node-seat-dot:not(.bleacher) {
    transform: rotate(270deg);
}

.venue-builder-layer-list {
    display: grid;
    gap: 0.55rem;
}

.venue-layer-item {
    width: 100%;
    border: 1px solid #e7e6e2;
    border-radius: 14px;
    background: #fff;
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: 0.1rem;
    text-align: left;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.venue-layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.venue-layer-item:hover,
.venue-layer-item.selected {
    border-color: #6285ee;
    transform: translateY(-1px);
    box-shadow: 0 12px 18px #2a4bd114;
}

.venue-layer-kind {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #85817a;
    font-weight: 700;
}

.venue-layer-name {
    font-weight: 700;
    color: #1a1917;
}

.venue-layer-meta {
    font-size: 0.76rem;
    color: #5f5b54;
}

.venue-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0 !important;
    border-radius: 999px;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #5f5b54;
    cursor: grab;
    flex: 0 0 auto;
    touch-action: none;
    user-select: none;
}

.venue-drag-handle:hover,
.venue-drag-handle:active,
.venue-drag-handle:focus,
.venue-drag-handle:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.venue-drag-handle:active {
    cursor: grabbing;
}

.venue-node-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #454239;
    cursor: pointer;
    user-select: none;
}

.venue-node-stage .venue-node-menu-trigger {
    color: #e7e6e2;
}

.venue-node-menu-trigger:hover,
.venue-node-menu-trigger:focus-visible {
    background: rgba(26, 25, 23, 0.1);
    outline: 0;
}

.venue-node-stage .venue-node-menu-trigger:hover,
.venue-node-stage .venue-node-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

/* Wraps the ⋮ trigger + its popup so the menu anchors to the BUTTON, not the node box. Without this
   the menu hung off the node's far edge and ballooned sideways across neighbours on a narrow stair
   (node ~28px, menu ~224px). Anchored to the trigger it always drops straight from the button. */
.venue-node-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.venue-node-action-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 100001;
    min-width: 13rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem;
    border: 1px solid rgba(176, 172, 163, 0.42);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(26, 25, 23, 0.2);
    color: #1a1917;
}

/* anchor-left: little room to the left, so open down-and-RIGHT from the button's left edge.
   anchor-right (default): open down-and-LEFT so the menu's right edge sits under the ⋮ button. */
.venue-node-action-menu-anchor-left {
    left: 0;
    right: auto;
}

.venue-node-action-menu-anchor-right {
    right: 0;
    left: auto;
}

.venue-node-action-menu > span {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.venue-node-action-menu > span:hover,
.venue-node-action-menu > span:focus-visible {
    background: #eef2fe;
    outline: 0;
}

.venue-node-action-menu > span.is-danger {
    color: #a81d25;
}

.venue-node-action-menu > span.is-disabled {
    color: #b0aca3;
    cursor: not-allowed;
    pointer-events: none;
}

.venue-node-action-divider {
    min-height: 0 !important;
    height: 1px;
    padding: 0 !important;
    margin: 0.2rem 0;
    background: #e7e6e2;
    cursor: default !important;
}

.venue-node-action-field {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    color: #454239;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: default;
}

.venue-node-action-field:hover {
    background: #fafaf9;
}

.venue-node-action-color {
    grid-template-columns: 4.2rem 2.4rem;
    justify-content: space-between;
}

.venue-color-favorite-button {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #d6d4ce;
    border-radius: 8px;
    background: #fff;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

.venue-color-favorite-button:hover,
.venue-color-favorite-button:focus-visible {
    background: #fff7e1;
    outline: 0;
}

.venue-builder-palette-panel {
    display: grid;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem 0.2rem;
    border: 1px solid #e7e6e2;
    border-radius: 12px;
    background: #fafaf9;
}

.venue-builder-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #454239;
}

.venue-builder-palette-swatches,
.venue-node-action-palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.venue-builder-palette-swatch,
.venue-node-action-palette-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgba(26, 25, 23, 0.18);
    border-radius: 999px;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    cursor: pointer;
}

.venue-builder-palette-swatch:hover,
.venue-builder-palette-swatch:focus-visible,
.venue-node-action-palette-swatch:hover,
.venue-node-action-palette-swatch:focus-visible {
    outline: 0;
    transform: translateY(-1px);
}

.venue-builder-palette-empty,
.venue-node-action-palette-empty {
    font-size: 0.72rem;
    color: #85817a;
    font-style: italic;
}

.venue-node-action-palette-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem 0;
}

.venue-node-action-palette-toggle {
    border: 1px solid #d6d4ce;
    border-radius: 999px;
    background: #fff;
    color: #1a1917;
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
}

.venue-node-action-palette-toggle:hover,
.venue-node-action-palette-toggle:focus-visible {
    background: #eef2fe;
    outline: 0;
}

.venue-node-action-palette-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #85817a;
}

.venue-menu-select {
    min-width: 0;
    width: 100%;
    height: 1.8rem;
    border: 1px solid #d6d4ce;
    border-radius: 8px;
    background: #fff;
    color: #1a1917;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0 0.45rem;
}

.venue-drag-source {
    opacity: 0.24;
}

.venue-drop-footprint {
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(var(--venue-drop-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--venue-drop-rows), minmax(0, 1fr));
    pointer-events: none;
}

.venue-drop-footprint-cell {
    border: 1px solid #2a4bd1;
    border-radius: 8px;
    background: rgba(42, 75, 209, 0.2);
    box-shadow: inset 0 0 0 2px rgba(42, 75, 209, 0.18);
}

.venue-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.38;
    transform-origin: top left;
    box-shadow: 0 24px 48px rgba(26, 25, 23, 0.18);
    filter: saturate(1.04);
}

.venue-builder-category-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.venue-builder-inspector-panel {
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(26, 25, 23, 0.20);
}

.venue-builder-quick-size {
    display: grid;
    gap: 0.5rem;
}

.venue-builder-quick-tiers {
    flex-wrap: wrap;
}

.venue-builder-quick-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e7e6e2;
    border-radius: 14px;
    background: #fafaf9;
}

.venue-builder-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.venue-builder-toggle-card {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    color: #1a1917;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    text-align: left;
}

.venue-builder-toggle-card strong,
.venue-builder-toggle-card small {
    display: block;
}

.venue-builder-toggle-card small {
    margin-top: 0.08rem;
    color: #85817a;
    font-size: 0.72rem;
    line-height: 1.25;
}

.venue-builder-toggle-card.selected {
    border-color: #1976d2;
    background: #eef2fe;
    box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.22);
}

.venue-builder-toggle-card:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.venue-builder-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #e7e6e2;
    color: #1a1917;
}

.venue-builder-toggle-card.selected .venue-builder-toggle-icon,
.venue-builder-accessible-card.selected .venue-builder-toggle-icon {
    background: #1976d2;
    color: #fff;
}

.venue-category-chip {
    border: 1px solid #d6d4ce;
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #1a1917;
}

.venue-category-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.45rem;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 42%, #ffffff 58%), var(--venue-seat-color, #607aa0));
    color: #1a1917;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mud-table-root .mud-table-head .mud-table-cell {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mud-input-control {
    margin-top: 0;
}

.mud-input-outlined {
    border-radius: 8px !important;
}

.public-event-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 0.6rem 2.5rem;
}

.public-event-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.public-event-eyebrow,
.public-event-eyebrow a {
    margin: 0 0 0.3rem;
    color: #2a4bd1;
    font-weight: 700;
    text-decoration: none;
}

.public-event-title {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 0.98;
}

.public-event-description,
.public-event-meta {
    margin: 0.3rem 0 0;
    color: #5f5b54;
}

.public-event-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.public-event-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid #d6d4ce;
    background: rgba(255, 255, 255, 0.9);
    color: #2c2a25;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.public-event-action:hover {
    background: #eef2fe;
    border-color: #6285ee;
}

.public-event-action:focus-visible {
    outline: 2px solid var(--tr-primary, #2a4bd1);
    outline-offset: 2px;
}

/* SuperAdmin-only "edit venue layout" shortcut — amber accent marks it as a staff control,
   visually separate from the buyer's calendar/share actions. Rendered as an anchor. */
.public-event-action--admin {
    text-decoration: none;
    border-color: #f0c27a;
    background: #fff7ec;
    color: #7a4a08;
}

.public-event-action--admin:hover {
    background: #fdecd2;
    border-color: #d99a3a;
}

.public-event-badges {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-event-badge {
    border-radius: 999px;
    border: 1px solid #d6d4ce;
    background: rgba(255, 255, 255, 0.86);
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1917;
}

.public-event-badge-demo {
    border-color: #fcd34d;
    background: #fef6e7;
    color: #7a4a08;
}

.public-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.58fr);
    gap: 1.2rem;
    align-items: start;
}

.public-event-canvas-panel,
.public-event-summary-panel,
.sales-closed-message {
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid #e7e6e2;
    border-radius: 18px;
    box-shadow: 0 18px 40px #1a191712;
}

.public-event-canvas-panel {
    padding: 1.1rem;
    /* As a grid item its default min-width:auto would let the wide seat canvas expand the
       layout column past the viewport. Pin to 0 so overflow is absorbed by the scroll wrapper. */
    min-width: 0;
}

.public-event-summary-panel,
.sales-closed-message {
    padding: 1rem 1.1rem;
}

.public-event-stagebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.public-event-stagebar-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* When zoomed into a section, keep the "All sections" back button + zoom controls pinned just under
   the fixed app bar so they stay reachable while the buyer scrolls a tall section of seats. */
.public-event-stagebar.is-sticky-focus {
    position: sticky;
    top: 47px;
    z-index: 20;
    align-items: center;
    margin: -1.1rem -1.1rem 0.85rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border-bottom: 1px solid #e7e6e2;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 10px 18px rgba(26, 25, 23, 0.08);
}

/* When a seat is held the hold-timer banner also pins (top: calc(64px + 0.75rem), z-index 50);
   drop the focus bar below it so the two stack instead of the timer covering the back button. */
.public-event-stagebar.is-sticky-focus.has-active-hold {
    top: calc(64px + 0.75rem + 3.4rem);
}

.public-event-stagebar.is-sticky-focus .public-event-stagebar-heading {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.public-event-section-title--inline {
    font-size: 1.02rem;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The seat map region is a programmatic focus landing spot on zoom-out (tabindex=-1); it isn't a
   keyboard-tabbable control, so suppress the focus ring that would box the whole map. */
.public-event-canvas-wrap:focus {
    outline: none;
}

/* Match the hold-timer's taller offset under 900px so the stacked focus bar still clears it. */
@media (max-width: 900px) {
    .public-event-stagebar.is-sticky-focus.has-active-hold {
        top: calc(96px + 0.75rem + 3.4rem);
    }
}

.public-event-stagebar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-seat-guidance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e7e6e2;
    border-radius: 14px;
    background: #fafaf9;
    color: #5f5b54;
    font-size: 0.9rem;
}

.public-seat-guidance p {
    margin: 0;
}

.public-seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.8rem;
    color: #1a1917;
    font-weight: 700;
}

.public-seat-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    white-space: nowrap;
}

.legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    display: inline-block;
    background: #607aa0;
}

.legend-dot.is-selected {
    background: #0e9c8a;
}

.legend-dot.is-sold {
    background: repeating-linear-gradient(135deg, #85817a 0 3px, #d6d4ce 3px 6px);
}

/* BUY-01 price-tier legend */
.public-price-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-top: 0.5rem;
}

.public-price-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid #e7e6e2;
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.86rem;
    white-space: nowrap;
}

.public-price-legend-name {
    color: #454239;
    font-weight: 700;
}

.public-price-legend-price {
    color: #1a1917;
    font-weight: 800;
}

/* BUY-05 clear-selection */
.public-clear-selection {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    background: #ffffff;
    color: #a81d25;
    font-weight: 700;
    cursor: pointer;
}

.public-clear-selection:hover:not(:disabled) {
    background: #fdf0f1;
    border-color: #ec9aa0;
}

.public-clear-selection:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* BUY-03 hold-expiry recovery */
.public-hold-expired {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.public-reselect-button {
    margin-left: auto;
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: #1a1917;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.public-reselect-button:hover:not(:disabled) {
    background: #2c2a25;
}

.public-reselect-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* BUY-04 sold-out state */
.public-soldout-banner {
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #fdf0f1, #fff3ee);
    border: 1px solid #f6c9cd;
    text-align: center;
}

.public-soldout-title {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #a81d25;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.public-soldout-cta {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: #1a1917;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.public-soldout-cta:hover {
    background: #2c2a25;
}

/* Waitlist inside the sold-out banner — a sold-out show still captures demand. */
.public-waitlist {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(26, 25, 23, 0.12);
    display: grid;
    gap: 0.45rem;
    max-width: 30rem;
}

.public-waitlist-label {
    font-weight: 800;
    font-size: 0.9rem;
    color: #1a1917;
}

.public-waitlist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.public-waitlist-input {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: #1a1917;
    background: #ffffff;
}

.public-waitlist-input:focus {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.2rem rgba(42, 75, 209, 0.14);
}

.public-waitlist-join {
    border: 0;
    border-radius: 10px;
    padding: 0 1rem;
    min-height: 44px;
    background: #2a4bd1;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.public-waitlist-join:hover:not(:disabled) {
    background: #223cab;
}

.public-waitlist-join:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.public-waitlist-joined {
    margin: 0;
    font-size: 0.95rem;
    color: #1a1917;
}

.public-waitlist-leave {
    justify-self: start;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    background: #fff;
    color: #5f5b54;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.public-waitlist-error {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a81d25;
}

.seatview-toggle {
    border: 1px solid #d6d4ce;
    background: #ffffff;
    color: #223cab;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.seatview-toggle:hover {
    border-color: #223cab;
    background: #eef2fe;
}

.seatview-toggle.is-active {
    background: #223cab;
    border-color: #223cab;
    color: #ffffff;
}

.seatview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(26, 25, 23, 0.55);
    backdrop-filter: blur(2px);
}

.seatview-overlay-card {
    width: min(820px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(26, 25, 23, 0.4);
    padding: 1.25rem 1.4rem 1.5rem;
}

.seatview-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.seatview-overlay-title {
    margin: 0;
    font-size: 1.15rem;
}

.seatview-overlay-close {
    border: none;
    background: transparent;
    color: #85817a;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
}

.seatview-overlay-close:hover {
    background: #f4f4f2;
    color: #1a1917;
}

.public-event-section-title {
    margin: 0;
    font-size: 1.2rem;
}

.public-event-section-subtitle {
    margin: 0.35rem 0 0;
    color: #85817a;
}

.public-event-canvas-wrap {
    overflow: auto;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid #e7e6e2;
    background:
        radial-gradient(circle at top, #fafaf9 0%, #f4f4f2 50%, #e7e6e2 100%);
    padding: 1.4rem;
    min-height: clamp(28rem, 68vh, 48rem);
}

.public-event-canvas {
    --venue-base-cell-size: clamp(28px, 2vw, 34px);
    min-width: calc(var(--venue-builder-columns) * var(--venue-cell-size));
    min-height: calc(var(--venue-builder-rows) * var(--venue-cell-size));
    margin: auto;
}

/* The overview must ALWAYS open zoomed out to the whole venue and must NEVER grow the page — no
   matter how large the venue, and without depending on the JS auto-fit landing (which races the
   layout and, on a slow client, would otherwise leave the seed-zoom canvas at full size, ballooning
   the wrapper and the whole page). Two guarantees, both pure CSS; the JS auto-fit only refines the
   margin on top of them:
     1. The overview box is a fixed-height viewport. container-type: size makes its container-query
        units resolve against the box, and overflow:auto (from the base rule) then scrolls the canvas
        INSIDE the box — the wrapper can't stretch to the canvas's height and drag the page down.
        An explicit `height` is required, not just min-height: under size containment an auto height
        makes cqh collapse to 0 (the box isn't a definite query size), which zeroes the fit below.
     2. In overview the seat cell size is computed to fit every column and row inside that box — the
        smaller of the width- and height-bound cell size, capped at the natural base size so a small
        venue isn't blown up to fill the box. So the entire venue fits on the very first paint with
        no JS at all. The zoom control still multiplies this (1.0 = whole venue in view).
   Focus mode is deliberately excluded: a tall focused section keeps growing so its seats stay large
   and the page scrolls down to reach them. */
.public-event-canvas-wrap.is-overview-mode {
    container-type: size;
    height: clamp(28rem, 68vh, 48rem);
}

.public-event-canvas-wrap.is-overview-mode .public-event-canvas {
    /* -4px per cell absorbs the 4px grid gap so all cells plus their gaps fit inside the box. */
    --venue-fit-cell: min(
        calc(100cqw / var(--venue-builder-columns) - 4px),
        calc(100cqh / var(--venue-builder-rows) - 4px),
        var(--venue-base-cell-size));
    --venue-cell-size: calc(var(--venue-fit-cell) * var(--venue-builder-zoom, 1));
}

.public-venue-node {
    cursor: default;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.14);
}

/* Diamond fields draw no box (the park is a masked fan on a transparent element), so the
   generic node card-shadow would paint a floating rectangle under nothing — the fan casts
   its own drop-shadow from its ::before instead. */
.public-venue-node.venue-node-diamond-field {
    box-shadow: none;
}

.public-venue-section {
    padding: 0;
    overflow: hidden;
}

/* Two-step seat selection: in the venue overview the seats are display-only and a transparent
   overlay turns each whole section/table into one big "zoom in" target, so the first tap can't
   miss a tiny seat. Once a section is focused (canvas .is-focus-mode) the seats take over again. */
.public-event-canvas.is-overview-mode .public-venue-section .public-venue-seat,
.public-event-canvas.is-overview-mode .public-venue-table .public-venue-seat {
    pointer-events: none;
}

.public-venue-zoom-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.public-venue-zoom-overlay:hover,
.public-venue-zoom-overlay:focus-visible {
    background: rgba(42, 75, 209, 0.16);
    box-shadow: inset 0 0 0 2px var(--tr-primary, #2a4bd1);
    outline: none;
}

.public-venue-zoom-overlay:active {
    background: rgba(42, 75, 209, 0.24);
}

.public-venue-zoom-overlay-chip {
    pointer-events: none;
    max-width: 96%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(26, 25, 23, 0.82);
    color: #fff;
    font-weight: 800;
    font-size: 0.66rem;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(26, 25, 23, 0.28);
}

/* ---- Per-block zoom targets on a continuous stand ----
   A stand whose carved aisles divide it into separate seating blocks gets one tap target per
   block instead of one whole-strip target, so hovering/tapping highlights just that block. The
   overlay is a grid whose tracks mirror the seat rows exactly (same recipe as the structure
   overlay), so each button sits precisely on its block's cells at any zoom. */
.public-venue-block-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--venue-overlay-columns, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--venue-overlay-rows, 1), minmax(0, 1fr));
    column-gap: 0.24rem;
    row-gap: 0.28rem;
    z-index: 6;
}

.public-venue-zoom-block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    cursor: zoom-in;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.public-venue-zoom-block:hover,
.public-venue-zoom-block:focus-visible {
    background: rgba(42, 75, 209, 0.16);
    box-shadow: inset 0 0 0 2px var(--tr-primary, #2a4bd1);
    outline: none;
}

.public-venue-zoom-block:active {
    background: rgba(42, 75, 209, 0.24);
}

/* A block's own count · price chip appears only while that block is hovered/focused… */
.public-venue-zoom-block .public-venue-zoom-overlay-chip {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.public-venue-zoom-block:hover .public-venue-zoom-overlay-chip,
.public-venue-zoom-block:focus-visible .public-venue-zoom-overlay-chip {
    opacity: 1;
    transform: none;
}

/* …while the passive section-level summary chip holds the center and yields to it. */
.public-venue-section-summary-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    transition: opacity 0.12s ease;
}

.public-venue-section:has(.public-venue-zoom-block:hover) .public-venue-section-summary-chip,
.public-venue-section:has(.public-venue-zoom-block:focus-visible) .public-venue-section-summary-chip {
    opacity: 0;
}

/* Focus-mode framing: the single focused section/table sits front-and-center with a soft ring. */
.public-event-canvas.is-focus-mode .public-venue-section,
.public-event-canvas.is-focus-mode .public-venue-table {
    box-shadow: 0 18px 40px rgba(26, 25, 23, 0.18);
}

.public-section-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.95rem;
    min-height: 40px;
    background: var(--tr-primary, #2a4bd1);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(42, 75, 209, 0.32);
    white-space: nowrap;
    flex: none;
}

.public-section-back:hover {
    filter: brightness(1.08);
}

.public-section-back-arrow {
    font-size: 1.15rem;
    line-height: 1;
    margin-top: -1px;
}

/* Positioning context so the back button can float over the seat map's top-left corner. */
.public-seat-stage {
    position: relative;
}

/* The back button lives directly on the seat map (top-left), where the eye lands when zoomed in. */
.public-section-back--floating {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 8;
}

/* Focus-mode minimap (top-right, mirroring the floating back button): the whole venue in
   miniature with the zoomed-in section lit in the accent color, so a buyer deep inside one
   stand keeps their bearings. Display-only — pointer events pass through so it can never
   steal a seat tap. Aspect ratio comes from the venue's own proportions (set inline). */
.public-venue-minimap {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 8;
    width: 118px;
    aspect-ratio: var(--public-minimap-aspect, 1.5);
    /* Washed-out version of the venue's floor tint (passed on the frame's inline style — the
       minimap is a sibling of the canvas, so the canvas var doesn't inherit) so a grass ballpark
       thumbnail reads green like the real map, while the blocks keep their contrast. */
    background: color-mix(in srgb, var(--venue-floor-color, #fafaf9) 42%, rgba(248, 250, 252, 0.94) 58%);
    border: 1px solid rgba(133, 129, 122, 0.4);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(26, 25, 23, 0.22);
    pointer-events: none;
    overflow: hidden;
}

.public-venue-minimap-item {
    position: absolute;
    border-radius: 2px;
    opacity: 0.9;
}

.public-venue-minimap-item.is-focused {
    opacity: 1;
    z-index: 2;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 10px rgba(42, 75, 209, 0.55);
}

@media (max-width: 640px) {
    .public-venue-minimap {
        width: 92px;
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* Drop the focused section's seats below the floating back button so it never covers a tappable seat
   (matters on narrow screens where the section fills the width). */
.public-event-canvas.is-focus-mode .public-venue-section-seat-surface {
    top: 3.4rem;
}

.public-focus-orientation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    color: #5f5b54;
    font-weight: 700;
    font-size: 0.82rem;
}

.public-focus-orientation-arrow {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--tr-primary, #2a4bd1);
}

.public-venue-section-seat-surface {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.28rem;
    position: absolute;
    inset: 1rem 0.72rem 0.72rem;
    width: auto;
    box-sizing: border-box;
}

.public-venue-section-seat-row {
    display: grid;
    grid-template-columns: repeat(var(--venue-seat-columns, auto-fit), minmax(0, 1fr));
    gap: 0.24rem;
    align-items: center;
    justify-items: center;
    flex: 1 1 0;
    min-height: 0;
    transform: translateY(calc(var(--venue-row-lift, 0rem) * -1)) scaleY(var(--venue-row-scale, 1));
    transform-origin: center bottom;
}

.public-venue-section-seat-surface .public-venue-seat {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    justify-self: center;
    align-self: center;
}

.public-venue-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(133, 129, 122, 0.34);
    border-radius: inherit;
    pointer-events: none;
}

.public-venue-section-label {
    position: absolute;
    top: 0rem;
    left: 0.55rem;
    z-index: 3;
    max-width: calc(100% - 1.1rem);
    pointer-events: none;
}

.public-venue-section-label-text {
    display: inline-flex;
    align-items: center;
    min-height: 1rem;
    max-width: 100%;
    padding: 0.05rem 0.35rem;
    border: 1px solid rgba(133, 129, 122, 0.32);
    border-radius: 999px;
    background: rgba(244, 244, 242, 0.92);
    color: rgba(26, 25, 23, 0.8);
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.public-venue-area {
    box-shadow: 0 10px 24px rgba(99, 63, 0, 0.14);
}

.public-venue-table {
    padding: 0;
    overflow: visible;
}

.public-venue-table .venue-node-title,
.public-venue-table .venue-node-subtitle {
    pointer-events: none;
}

.public-venue-table-seat-surface {
    inset: 0.35rem;
    z-index: 3;
    pointer-events: none;
    display: block;
}

.public-venue-table-seat-surface .public-venue-seat {
    position: absolute;
    width: clamp(0.95rem, 18%, 1.35rem);
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    min-width: 0.7rem;
    min-height: 0.7rem;
}

.public-venue-table-seat-surface .public-venue-seat:hover:not(:disabled) {
    transform: translate(-50%, calc(-50% - 1px)) scale(1.03);
}

.public-venue-seat-surface {
    position: absolute;
    inset: 1.3rem 0.72rem 0.72rem;
    display: grid;
    gap: 0.24rem;
    z-index: 1;
    align-items: stretch;
}

.public-venue-seat {
    position: relative;
    z-index: 2;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 120ms ease, scale 120ms ease, opacity 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

@media (pointer: coarse) {
    .public-venue-seat::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 5;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        border-radius: 999px;
    }
}

.public-venue-seat:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    filter: saturate(1.05);
}

.public-venue-seat:disabled {
    cursor: not-allowed;
}

/* BUY-07: pulsing amber ring marks the stranded single-seat gap the buyer should fill. */
.public-venue-seat.gap-warning {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.28);
    animation: seat-gap-pulse 1.6s ease-in-out infinite;
}

@keyframes seat-gap-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
    .public-venue-seat.gap-warning {
        animation: none;
    }
}

.public-venue-seat-glyph,
.public-venue-seat-glyph::before,
.public-venue-seat-glyph::after {
    display: block;
}

.public-venue-seat-glyph {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.public-venue-seat-marker {
    display: none;
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 4;
    pointer-events: none;
}

.public-venue-seat-marker.is-selected {
    display: block;
    width: 14%;
    height: 22%;
    border-right: 0.13rem solid #ffffff;
    border-bottom: 0.13rem solid #ffffff;
    filter: drop-shadow(0 1px 2px rgba(26, 25, 23, 0.5));
    transform: translate(-50%, -60%) rotate(45deg);
}

.public-venue-seat-marker.is-unavailable {
    display: block;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
}

.public-venue-seat-marker.is-unavailable::before,
.public-venue-seat-marker.is-unavailable::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 0.16rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(26, 25, 23, 0.28);
}

.public-venue-seat-marker.is-unavailable::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.public-venue-seat-marker.is-unavailable::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.public-venue-seat-glyph::before,
.public-venue-seat-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.public-venue-seat.is-theater .public-venue-seat-glyph::before {
    top: 6%;
    width: 52%;
    height: 50%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 54%, #ffffff 46%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 76%, #ffffff 24%) 45%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.26);
    box-shadow:
        -0.52rem 0.2rem 0 -0.2rem color-mix(in srgb, var(--venue-seat-color, #607aa0) 98%, transparent),
        0.52rem 0.2rem 0 -0.2rem color-mix(in srgb, var(--venue-seat-color, #607aa0) 98%, transparent),
        inset 0 -4px 6px rgba(26, 25, 23, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.32),
        0 8px 16px rgba(26, 25, 23, 0.22);
}

.public-venue-seat.is-theater .public-venue-seat-glyph::after {
    bottom: 8%;
    width: 72%;
    height: 32%;
    border-radius: 0.08rem 0.08rem 0.64rem 0.64rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #607aa0) 0%, var(--venue-seat-color, #607aa0) 40%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #1a1917 12%) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.28);
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.28),
        inset 0 -2px 4px rgba(26, 25, 23, 0.16),
        0 6px 12px rgba(26, 25, 23, 0.18);
}

/* Bleacher sections render as continuous bench bars: one bar per seat line, with the
   individual clickable seats as stacked segments (thin dividers) inside it and rounded
   end caps. The bar runs along the section's facing axis - facing Left/Right merges a
   column into a vertical bar, facing Up/Down merges a row into a horizontal bar. The
   facing class is emitted by PublicEvent.GetSectionFacingCssClass. */
.public-venue-seat.is-bleacher {
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: auto;
}

.public-venue-seat.is-bleacher .public-venue-seat-glyph {
    margin: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.public-venue-seat.is-bleacher .public-venue-seat-glyph::after {
    display: none;
}

/* divider between adjacent seats; orientation sets its size/position below */
.public-venue-seat.is-bleacher .public-venue-seat-glyph::before {
    content: "";
    top: 0;
    left: 0;
    transform: none;
    background: rgba(26, 25, 23, 0.55);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}

/* ---- Vertical benches (facing Left/Right): a column merges top-to-bottom ---- */
.public-venue-section.is-facing-left .public-venue-section-seat-surface,
.public-venue-section.is-facing-right .public-venue-section-seat-surface {
    gap: 0;
}

.public-venue-section.is-facing-left .public-venue-seat.is-bleacher .public-venue-seat-glyph,
.public-venue-section.is-facing-right .public-venue-seat.is-bleacher .public-venue-seat-glyph {
    width: 76%;
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--venue-seat-color, #607aa0) 72%, #ffffff 28%) 0%,
        color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #ffffff 12%) 45%,
        var(--venue-seat-color, #607aa0) 100%);
    border-left: 1px solid rgba(26, 25, 23, 0.22);
    border-right: 1px solid rgba(26, 25, 23, 0.22);
}

.public-venue-section.is-facing-left .public-venue-seat.is-bleacher .public-venue-seat-glyph::before,
.public-venue-section.is-facing-right .public-venue-seat.is-bleacher .public-venue-seat-glyph::before {
    width: 100%;
    height: 2px;
}

.public-venue-section.is-facing-left .public-venue-section-seat-row:first-child .public-venue-seat.is-bleacher .public-venue-seat-glyph,
.public-venue-section.is-facing-right .public-venue-section-seat-row:first-child .public-venue-seat.is-bleacher .public-venue-seat-glyph {
    border-top: 1px solid rgba(26, 25, 23, 0.22);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.public-venue-section.is-facing-left .public-venue-section-seat-row:first-child .public-venue-seat.is-bleacher .public-venue-seat-glyph::before,
.public-venue-section.is-facing-right .public-venue-section-seat-row:first-child .public-venue-seat.is-bleacher .public-venue-seat-glyph::before {
    display: none;
}

.public-venue-section.is-facing-left .public-venue-section-seat-row:last-child .public-venue-seat.is-bleacher .public-venue-seat-glyph,
.public-venue-section.is-facing-right .public-venue-section-seat-row:last-child .public-venue-seat.is-bleacher .public-venue-seat-glyph {
    border-bottom: 1px solid rgba(26, 25, 23, 0.22);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

/* ---- Horizontal benches (facing Up/Down): a row merges left-to-right ---- */
.public-venue-section.is-facing-up .public-venue-section-seat-row,
.public-venue-section.is-facing-down .public-venue-section-seat-row {
    gap: 0;
}

.public-venue-section.is-facing-up .public-venue-seat.is-bleacher .public-venue-seat-glyph,
.public-venue-section.is-facing-down .public-venue-seat.is-bleacher .public-venue-seat-glyph {
    width: 100%;
    height: 76%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--venue-seat-color, #607aa0) 72%, #ffffff 28%) 0%,
        color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #ffffff 12%) 45%,
        var(--venue-seat-color, #607aa0) 100%);
    border-top: 1px solid rgba(26, 25, 23, 0.22);
    border-bottom: 1px solid rgba(26, 25, 23, 0.22);
}

.public-venue-section.is-facing-up .public-venue-seat.is-bleacher .public-venue-seat-glyph::before,
.public-venue-section.is-facing-down .public-venue-seat.is-bleacher .public-venue-seat-glyph::before {
    width: 2px;
    height: 100%;
}

.public-venue-section.is-facing-up .public-venue-section-seat-row .public-venue-seat.is-bleacher:first-child .public-venue-seat-glyph,
.public-venue-section.is-facing-down .public-venue-section-seat-row .public-venue-seat.is-bleacher:first-child .public-venue-seat-glyph {
    border-left: 1px solid rgba(26, 25, 23, 0.22);
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.public-venue-section.is-facing-up .public-venue-section-seat-row .public-venue-seat.is-bleacher:first-child .public-venue-seat-glyph::before,
.public-venue-section.is-facing-down .public-venue-section-seat-row .public-venue-seat.is-bleacher:first-child .public-venue-seat-glyph::before {
    display: none;
}

.public-venue-section.is-facing-up .public-venue-section-seat-row .public-venue-seat.is-bleacher:last-child .public-venue-seat-glyph,
.public-venue-section.is-facing-down .public-venue-section-seat-row .public-venue-seat.is-bleacher:last-child .public-venue-seat-glyph {
    border-right: 1px solid rgba(26, 25, 23, 0.22);
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

/* ---- Non-bleacher seat icons rotate to face an explicit direction ----
   Auto (is-facing-auto) keeps them upright; only an explicit choice rotates them. */
.public-venue-section.is-facing-right:not(.is-facing-auto) .public-venue-seat:not(.is-bleacher) .public-venue-seat-glyph {
    transform: rotate(90deg);
}

.public-venue-section.is-facing-down:not(.is-facing-auto) .public-venue-seat:not(.is-bleacher) .public-venue-seat-glyph {
    transform: rotate(180deg);
}

.public-venue-section.is-facing-left:not(.is-facing-auto) .public-venue-seat:not(.is-bleacher) .public-venue-seat-glyph {
    transform: rotate(270deg);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::before,
.public-venue-seat.is-general-admission .public-venue-seat-glyph::after {
    width: 76%;
    height: 36%;
    border-radius: 0.32rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 62%, #ffffff 38%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 74%, #ffffff 26%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.2);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::before {
    top: 10%;
    box-shadow:
        inset 0 -3px 5px rgba(26, 25, 23, 0.12),
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        0 6px 12px rgba(26, 25, 23, 0.16);
}

.public-venue-seat.is-general-admission .public-venue-seat-glyph::after {
    bottom: 10%;
    box-shadow:
        inset 0 3px 4px rgba(255, 255, 255, 0.26),
        inset 0 -2px 3px rgba(26, 25, 23, 0.12),
        0 5px 10px rgba(26, 25, 23, 0.14);
}

.public-venue-seat.is-standing .public-venue-seat-glyph::before {
    top: 8%;
    width: 38%;
    height: 72%;
    border-radius: 0.66rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 58%, #ffffff 42%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 72%, #ffffff 28%) 50%, var(--venue-seat-color, #607aa0) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.22);
    box-shadow:
        inset 0 -4px 6px rgba(26, 25, 23, 0.12),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 8px 16px rgba(26, 25, 23, 0.2);
}

.public-venue-seat.is-vip .public-venue-seat-glyph::before {
    top: 6%;
    width: 52%;
    height: 50%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 52%, #ffffff 48%) 0%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 74%, #ffffff 26%) 45%, var(--venue-seat-color, #d6a42a) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.28);
    box-shadow:
        -0.52rem 0.2rem 0 -0.2rem color-mix(in srgb, var(--venue-seat-color, #d6a42a) 98%, transparent),
        0.52rem 0.2rem 0 -0.2rem color-mix(in srgb, var(--venue-seat-color, #d6a42a) 98%, transparent),
        inset 0 -4px 6px rgba(26, 25, 23, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        0 10px 18px color-mix(in srgb, var(--venue-seat-color, #d6a42a) 26%, transparent);
}

.public-venue-seat.is-vip .public-venue-seat-glyph::after {
    bottom: 8%;
    width: 72%;
    height: 32%;
    border-radius: 0.08rem 0.08rem 0.64rem 0.64rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #d6a42a) 0%, var(--venue-seat-color, #d6a42a) 40%, color-mix(in srgb, var(--venue-seat-color, #d6a42a) 86%, #1a1917 14%) 100%);
    border: 1.5px solid rgba(26, 25, 23, 0.28);
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.36),
        inset 0 -2px 4px rgba(26, 25, 23, 0.18),
        0 8px 14px color-mix(in srgb, var(--venue-seat-color, #d6a42a) 22%, transparent);
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph,
.public-venue-seat.is-companion .public-venue-seat-glyph {
    position: relative;
    background: var(--venue-seat-color, #1976d2);
    border-radius: 22%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 -2px 3px rgba(26, 25, 23, 0.18),
        inset 0 2px 3px rgba(255, 255, 255, 0.32),
        0 6px 14px rgba(25, 118, 210, 0.28);
}

.public-venue-seat.is-companion .public-venue-seat-glyph {
    background: var(--venue-seat-color, #4f9cec);
    box-shadow:
        inset 0 -2px 3px rgba(26, 25, 23, 0.16),
        inset 0 2px 3px rgba(255, 255, 255, 0.36),
        0 6px 14px rgba(79, 156, 236, 0.28);
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph::before,
.public-venue-seat.is-companion .public-venue-seat-glyph::before {
    content: "";
    position: absolute;
    inset: 12%;
    top: 12%;
    left: 12%;
    right: 12%;
    bottom: 12%;
    width: auto;
    height: auto;
    transform: none;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph::after,
.public-venue-seat.is-companion .public-venue-seat-glyph::after {
    content: none;
    display: none;
}

.public-venue-seat.is-wheelchair .public-venue-seat-glyph::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12.5' cy='4' r='2'/%3E%3Cpath d='M10.5 7h2v3.5h4.5a1.5 1.5 0 0 1 1.45 1.86l-1 4-1.94-.48.7-2.88H13a1.5 1.5 0 0 1-1.5-1.5V11h-1zM9 13.2A4.5 4.5 0 1 0 13.2 19h-2.16A2.5 2.5 0 1 1 9 15.36z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12.5' cy='4' r='2'/%3E%3Cpath d='M10.5 7h2v3.5h4.5a1.5 1.5 0 0 1 1.45 1.86l-1 4-1.94-.48.7-2.88H13a1.5 1.5 0 0 1-1.5-1.5V11h-1zM9 13.2A4.5 4.5 0 1 0 13.2 19h-2.16A2.5 2.5 0 1 1 9 15.36z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.public-venue-seat.is-companion .public-venue-seat-glyph::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.public-venue-seat.selected {
    --venue-seat-color: #15803d;
    filter: drop-shadow(0 0 10px rgba(21, 128, 61, 0.6));
    z-index: 3;
}

.public-venue-seat.selected .public-venue-seat-glyph::before,
.public-venue-seat.selected .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, #5ee0a0 0%, #15803d 55%, #12652f 100%);
    border-color: rgba(6, 78, 59, 0.55);
}

.public-venue-seat.is-theater.selected .public-venue-seat-glyph::before {
    box-shadow:
        -0.52rem 0.2rem 0 -0.2rem #15803d,
        0.52rem 0.2rem 0 -0.2rem #15803d,
        inset 0 -4px 6px rgba(6, 78, 59, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.42),
        0 8px 18px rgba(21, 128, 61, 0.45);
}

.public-venue-seat.is-wheelchair.selected .public-venue-seat-glyph,
.public-venue-seat.is-companion.selected .public-venue-seat-glyph {
    background: #15803d;
    box-shadow:
        inset 0 -2px 3px rgba(6, 78, 59, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        0 6px 14px rgba(21, 128, 61, 0.45);
}

/* Bleacher seat backgrounds are set on .public-venue-seat-glyph by the facing
   selectors, which have higher specificity than the base .selected rule.
   Re-assert the green for each orientation. */
.public-venue-section.is-facing-left .public-venue-seat.is-bleacher.selected .public-venue-seat-glyph,
.public-venue-section.is-facing-right .public-venue-seat.is-bleacher.selected .public-venue-seat-glyph {
    background: linear-gradient(90deg, #5ee0a0 0%, #15803d 55%, #12652f 100%);
    border-left-color: rgba(6, 78, 59, 0.45);
    border-right-color: rgba(6, 78, 59, 0.45);
}

.public-venue-section.is-facing-up .public-venue-seat.is-bleacher.selected .public-venue-seat-glyph,
.public-venue-section.is-facing-down .public-venue-seat.is-bleacher.selected .public-venue-seat-glyph {
    background: linear-gradient(180deg, #5ee0a0 0%, #15803d 55%, #12652f 100%);
    border-top-color: rgba(6, 78, 59, 0.45);
    border-bottom-color: rgba(6, 78, 59, 0.45);
}

/* Horizontal bleachers (facing up/down) have a 0.28rem gap between rows where
   the green drop-shadow would otherwise cast a puffy halo. Drop the lift so
   selected segments read as flat green bench segments. */
.public-venue-section.is-facing-up .public-venue-seat.is-bleacher.selected,
.public-venue-section.is-facing-down .public-venue-seat.is-bleacher.selected {
    filter: none;
    z-index: 1;
}

.public-venue-seat.held {
    opacity: 1;
}

.public-venue-seat.held .public-venue-seat-glyph::before,
.public-venue-seat.held .public-venue-seat-glyph::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(231, 230, 226, 0.94) 100%);
    box-shadow:
        0 0 0 1px rgba(61, 98, 227, 0.22),
        0 8px 14px rgba(26, 25, 23, 0.08);
}

.public-venue-seat.sold {
    opacity: 0.62;
}

.public-venue-seat.sold .public-venue-seat-glyph::before,
.public-venue-seat.sold .public-venue-seat-glyph::after {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, rgba(176, 172, 163, 0.92) 0%, rgba(133, 129, 122, 0.84) 100%);
}

.public-venue-seat.unavailable {
    opacity: 0.3;
}

.public-venue-seat.unavailable .public-venue-seat-glyph::before,
.public-venue-seat.unavailable .public-venue-seat-glyph::after {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, rgba(176, 172, 163, 0.52) 0%, rgba(133, 129, 122, 0.4) 100%);
}

/* ---- Seat-tap lifecycle: pending ping → confirm pop / bounce shake ----
   A tapped seat answers instantly: it pulses an azure ping while its hold round-trip runs
   (the rest of the map stays live — no disabled buttons, no not-allowed cursor), pops green
   the moment the server confirms, and shakes if another buyer got there first. All three
   animate the standalone scale/translate properties, which COMPOSE with the transform that
   centers table seats (translate(-50%, -50%)) — animating `transform` here would stomp it. */
.public-venue-seat.pending {
    cursor: progress;
    z-index: 4;
    border-radius: 999px;
    scale: 1.07;
    filter: saturate(1.1) brightness(1.05);
    animation: seat-pending-ping 0.85s ease-out infinite;
}

@keyframes seat-pending-ping {
    0% { box-shadow: 0 0 0 0 rgba(42, 75, 209, 0.45); }
    75% { box-shadow: 0 0 0 10px rgba(42, 75, 209, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 75, 209, 0); }
}

.public-venue-seat.just-selected {
    animation: seat-confirm-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes seat-confirm-pop {
    0% { scale: 0.9; }
    55% { scale: 1.16; }
    100% { scale: 1; }
}

.public-venue-seat.reserve-failed {
    animation: seat-reserve-shake 0.36s ease;
}

@keyframes seat-reserve-shake {
    0%, 100% { translate: 0; }
    20% { translate: -3px 0; }
    45% { translate: 3px 0; }
    70% { translate: -2px 0; }
    90% { translate: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .public-venue-seat.pending,
    .public-venue-seat.just-selected,
    .public-venue-seat.reserve-failed {
        animation: none;
    }

    /* Still signal "working" without motion: a steady soft ring on the tapped seat. */
    .public-venue-seat.pending {
        box-shadow: 0 0 0 4px rgba(42, 75, 209, 0.35);
    }
}

.summary-panel h2 {
    margin-top: 0;
}

.public-hold-timer {
    position: sticky;
    /* Clear the fixed 64px MudAppBar (96px under 900px) so the banner
       sticks just below the nav instead of hiding behind it on scroll. */
    top: calc(64px + 0.75rem);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    background: rgba(42, 75, 209, 0.12);
    border: 1px solid rgba(42, 75, 209, 0.22);
    color: #1e2f6d;
    font-weight: 700;
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.public-hold-timer span {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.public-hold-timer strong {
    font-size: 1.4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.public-hold-timer.is-urgent {
    background: rgba(210, 39, 48, 0.12);
    border-color: rgba(210, 39, 48, 0.28);
    color: #8f1a21;
}

@media (max-width: 900px) {
    .public-hold-timer {
        top: calc(96px + 0.75rem);
    }
}

.public-selected-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: grid;
    gap: 0.45rem;
}

.public-selected-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e7e6e2;
}

.summary-total {
    font-weight: 800;
    color: #1a1917;
}

.public-zoom-button,
.public-zoom-reset {
    border: 1px solid #e7e6e2;
    background: #fff;
    color: #1a1917;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font: inherit;
    font-weight: 700;
    /* Audit fix: zoom controls measured 35–37px — target size is ≥44px at every viewport,
       not just under the touch media query. */
    min-width: 44px;
    min-height: 44px;
}

.public-zoom-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #d6d4ce;
    background: #fff;
    font-weight: 800;
    color: #2a4bd1;
}

.checkout-button {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    /* Coral is the fan's commit moment (Front Row): this button starts the buy. */
    background: linear-gradient(180deg, #e04a22 0%, #bb3a18 100%);
    color: #fff;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow: 0 16px 28px #e04a2226;
}

.checkout-button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    box-shadow: none;
}

.field {
    display: grid;
    gap: 0.35rem;
    max-width: 220px;
}

.text-input {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    font: inherit;
    color: #1a1917;
    background: #fff;
}

.text-input:focus {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem #2a4bd122;
}

.error-message {
    color: #d22730;
}

.public-event-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.public-event-alert.is-error {
    color: #8f1a21;
    background: #fdf0f1;
    border: 1px solid #f6c9cd;
}

.public-event-alert.is-warning {
    color: #92580a;
    background: #fef6e7;
    border: 1px solid #f6e0b0;
}

.mobile-menu-button {
    display: none;
}

.nav-links {
    display: flex;
}

.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1300;
}

.mobile-nav-items {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 150ms ease;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    background: transparent;
}

.mobile-nav-link:hover {
    background-color: rgba(42, 75, 209, 0.08);
}

.mobile-nav-link:active {
    background-color: rgba(42, 75, 209, 0.12);
}

/* "Unseen release" dot on the mobile What's New link */
.wn-nav-dot {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d22730;
    flex: none;
}

.mobile-nav-divider {
    height: 1px;
    background-color: var(--mud-palette-divider);
    margin: 0.25rem 0;
}

@media (max-width: 920px) {
    .account-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-panel {
        max-width: 100%;
        padding: 1rem;
    }

    .venue-builder-shell,
    .venue-builder-shell.has-inspector {
        grid-template-columns: 1fr;
    }

    /* Undo the desktop overlay placement so toolbox / inspector / canvas stack in DOM order. */
    .venue-builder-sidebar,
    .venue-builder-main,
    .venue-builder-inspector-rail {
        grid-column: auto;
        grid-row: auto;
    }

    .venue-builder-inspector-rail {
        position: static;
        max-height: none;
        overflow-y: visible;
        z-index: auto;
    }

    .venue-builder-stagebar {
        flex-direction: column;
        align-items: flex-start;
    }

    .venue-builder-canvas {
        width: max-content;
    }

    .venue-builder-canvas-wrap {
        width: 100%;
    }

    .public-event-hero,
    .public-event-layout {
        /* minmax(0, 1fr) — NOT 1fr — so the wide seat canvas can't blow this single column
           past the viewport. With a bare 1fr the track's implicit min-content minimum grows to
           the canvas width and the whole page scrolls horizontally; the overflow must stay inside
           .public-event-canvas-wrap (overflow-x:auto) instead. */
        grid-template-columns: minmax(0, 1fr);
        display: grid;
    }

    .public-event-badges {
        justify-content: flex-start;
    }

    .public-event-canvas-wrap {
        min-height: clamp(22rem, 54vh, 32rem);
        padding: 0.8rem;
    }

    .public-event-canvas {
        --venue-base-cell-size: clamp(20px, 4vw, 28px);
    }

    .public-seat-guidance {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-venue-section-seat-surface {
        gap: 0.16rem;
        inset: 0.8rem 0.5rem 0.5rem;
    }

    .public-venue-section-seat-row {
        gap: 0.16rem;
    }

    .nav-links {
        display: none !important;
    }

    .auth-button {
        display: none !important;
    }

    .mobile-menu-button {
        display: inline-flex !important;
    }

    .mobile-nav-menu {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .public-event-page {
        padding: 1rem 0.4rem 1.5rem;
    }

    .public-event-hero {
        flex-direction: column;
        gap: 0.75rem;
    }

    .public-event-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .public-event-canvas-wrap {
        min-height: clamp(18rem, 50vh, 24rem);
        padding: 0.6rem;
    }

    .public-event-canvas {
        --venue-base-cell-size: clamp(16px, 3vw, 22px);
    }

    .public-event-summary-panel {
        padding: 0.8rem;
    }
}

/* ── Subscribe widget ──────────────────────────────────── */
.subscribe-widget {
    background: var(--tr-card);
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    max-width: 560px;
}

.subscribe-widget__heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.875rem;
    font-size: 1rem;
    color: var(--tr-ink);
}

.subscribe-widget__sub {
    font-size: 0.875rem;
    color: var(--tr-muted);
    font-weight: 400;
}

.subscribe-widget__form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscribe-widget__input {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--tr-line);
    border-radius: 6px;
    font-size: 0.9375rem;
    outline: none;
    background: #fafaf9;
}

.subscribe-widget__input:focus {
    border-color: var(--tr-primary);
    background: #fff;
}

.subscribe-widget__btn {
    padding: 0.5rem 1.25rem;
    background: var(--tr-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.subscribe-widget__btn:hover:not(:disabled) {
    background: var(--tr-primary-dark);
}

.subscribe-widget__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.subscribe-widget__error {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #d22730;
}

.subscribe-widget--success {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #15803d;
}

.subscribe-widget__check {
    font-size: 1.25rem;
}

/* ===== Accessibility utilities ===== */

/* Skip-link: hidden until focused, then jumps a keyboard user past the header.
   The target main element uses tabindex=-1 so focus actually lands there. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--tr-primary, #2a4bd1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Visually hidden but available to screen readers. Use for off-screen labels. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard-only focus ring for elements that don't already have one. Mouse clicks
   keep their existing (or no) outline; tab navigation always shows a ring. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--tr-primary, #2a4bd1);
    outline-offset: 2px;
}

/* Respect the operating-system "reduce motion" preference. Disables our own
   animations and shortens MudBlazor transitions. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Account: show/hide password toggle ── */
.account-page .form-floating.has-password-toggle {
    position: relative;
}

.account-page .form-floating.has-password-toggle > .form-control {
    padding-right: 3rem;
}

.account-page .password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tr-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.account-page .password-toggle:hover,
.account-page .password-toggle:focus-visible {
    background: #eef2fe;
    color: var(--tr-accent-2);
}

.account-page .password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem #2a4bd133;
}

/* ── Account: live password strength checklist ── */
.account-pw-strength {
    margin: 0.45rem 0 1rem;
    padding: 0.7rem 0.9rem;
    background: #fafaf9;
    border: 1px solid #e7e6e2;
    border-radius: 10px;
    list-style: none;
}

.account-pw-strength__title {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tr-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-pw-strength ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.8rem;
}

.account-pw-strength li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--tr-muted);
}

.account-pw-strength li::before {
    content: "○";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.8rem;
    color: #b0aca3;
}

.account-pw-strength li.is-met {
    color: #0e9c8a;
    font-weight: 600;
}

.account-pw-strength li.is-met::before {
    content: "✓";
    color: #0e9c8a;
}

@media (max-width: 480px) {
    .account-pw-strength ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Account: manage layout eyebrow ── */
.account-manage-eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-muted);
}

/* ── Account: email verification pill ── */
.account-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-email-pill--verified {
    background: #ecfbf1;
    color: #0e9c8a;
    border: 1px solid #99f6e4;
}

.account-email-pill--unverified {
    background: #fff3ee;
    color: #92580a;
    border: 1px solid #ffe3d7;
}


/* ── A11Y-02: ≥44px touch targets on small screens ──────────────── */
@media (max-width: 640px) {
    /* Public seat-map zoom controls */
    .public-zoom-button,
    .public-zoom-reset {
        min-width: 44px;
        min-height: 44px;
    }

    /* Scanner door-ops controls */
    .scanner-button,
    .scanner-checkin-button,
    .scanner-undo-button {
        min-height: 44px;
    }

    /* Admin icon buttons (row actions, headers, toolbars) and pagination */
    .admin-panel .mud-icon-button,
    .admin-page-header .mud-icon-button,
    .admin-table-toolbar .mud-icon-button,
    .venue-builder-zoom-controls .mud-icon-button,
    .mud-table-pagination .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ================================================================
   DS-04 — dark-mode parity. MudBlazor components re-theme through
   PaletteDark automatically; everything below covers the custom CSS.
   Pages with local variables get var remaps; the rest get targeted
   surface overrides. Convention: body.eventrika-dark prefix (also
   out-ranks scoped-CSS ties). Deliberately kept light: QR/barcode
   blocks and the door view (scanners need a white field), and the
   venue-builder canvas (a design surface, like a paper artboard).
   ================================================================ */

/* ── Checkout (variable-driven) ── */
body.eventrika-dark .checkout-page {
    --checkout-line: rgba(201, 198, 190, 0.25);
    --checkout-ink: #e9e8e3;
    --checkout-muted: #c9c6be;
    --checkout-primary: #6285ee;
    --checkout-primary-deep: #93adf6;
    --checkout-surface: #24262e;
    background: #14161c;
}

body.eventrika-dark .checkout-policy-check {
    background: rgba(36, 38, 46, 0.6);
}

body.eventrika-dark .checkout-policy-check a {
    color: #93adf6;
}

/* ── Ticket view (variable-driven; QR/barcode/door stay white for scanners) ── */
body.eventrika-dark .ticket-page {
    --ticket-accent: #93adf6;
    --ticket-line: rgba(201, 198, 190, 0.25);
    --ticket-ink: #e9e8e3;
    --ticket-muted: #c9c6be;
    background: #14161c;
}

body.eventrika-dark .ticket-card {
    background: #24262e;
}

body.eventrika-dark .ticket-code-block,
body.eventrika-dark .ticket-barcode-block,
body.eventrika-dark .ticket-door-overlay,
body.eventrika-dark .ticket-door-qr {
    background: #ffffff;
}

/* ── Scanner (variable-driven) ── */
body.eventrika-dark .scanner-page,
body.eventrika-dark .scanner-shell {
    --scanner-line: rgba(201, 198, 190, 0.25);
    --scanner-ink: #e9e8e3;
    --scanner-muted: #c9c6be;
}

body.eventrika-dark .scanner-card {
    background: #24262e;
    border-color: rgba(201, 198, 190, 0.25);
}

body.eventrika-dark .scanner-event-lock {
    background: #1c1d23;
    border-color: rgba(201, 198, 190, 0.22);
    color: #c9c6be;
}

/* ── Public event page ── */
body.eventrika-dark .public-event-meta,
body.eventrika-dark .public-event-description {
    color: #c9c6be;
}

body.eventrika-dark .public-event-eyebrow a {
    color: #93adf6;
}

body.eventrika-dark .public-event-title {
    color: #fafaf9;
}

body.eventrika-dark .public-event-badge {
    background: rgba(36, 38, 46, 0.88);
    border-color: rgba(201, 198, 190, 0.3);
    color: #e9e8e3;
}

body.eventrika-dark .public-event-badge-demo {
    background: #7a4a08;
    border-color: #92580a;
    color: #f6e0b0;
}

body.eventrika-dark .public-event-action {
    background: rgba(36, 38, 46, 0.9);
    border-color: rgba(201, 198, 190, 0.3);
    color: #e9e8e3;
}

body.eventrika-dark .public-event-action:hover {
    background: #2c2e38;
    border-color: rgba(201, 198, 190, 0.5);
}

body.eventrika-dark .public-event-action--admin {
    background: rgba(120, 53, 15, 0.35);
    border-color: rgba(240, 194, 122, 0.45);
    color: #fcd9a4;
}

body.eventrika-dark .public-event-action--admin:hover {
    background: rgba(146, 64, 14, 0.5);
    border-color: rgba(240, 194, 122, 0.7);
}

body.eventrika-dark .public-event-canvas-panel,
body.eventrika-dark .public-event-summary-panel,
body.eventrika-dark .sales-closed-message {
    background: linear-gradient(180deg, #24262e 0%, #1c1d23 100%);
    border-color: rgba(201, 198, 190, 0.22);
    box-shadow: 0 18px 40px rgba(16, 15, 14, 0.45);
    color: #e9e8e3;
}

body.eventrika-dark .public-event-section-title {
    color: #fafaf9;
}

body.eventrika-dark .public-event-section-subtitle {
    color: #c9c6be;
}

body.eventrika-dark .public-seat-guidance {
    background: #1c1d23;
    border-color: rgba(201, 198, 190, 0.22);
    color: #c9c6be;
}

/* Available / Selected / Sold legend — was near-black (#1a1917) on the dark guidance panel. */
body.eventrika-dark .public-seat-legend {
    color: #e9e8e3;
}

/* Price-tier pills: keep them dark with light text instead of light text on a white pill. */
body.eventrika-dark .public-price-legend-item {
    background: #24262e;
    border-color: rgba(201, 198, 190, 0.28);
}

body.eventrika-dark .public-price-legend-name {
    color: #e9e8e3;
}

body.eventrika-dark .public-price-legend-price {
    color: #ffffff;
}

body.eventrika-dark .public-focus-orientation {
    color: #c9c6be;
}

body.eventrika-dark .public-event-stagebar.is-sticky-focus {
    background: linear-gradient(180deg, #24262e 0%, #1c1d23 100%);
    border-bottom-color: rgba(201, 198, 190, 0.22);
    box-shadow: 0 10px 18px rgba(16, 15, 14, 0.5);
}

body.eventrika-dark .summary-total {
    color: #fafaf9;
}

body.eventrika-dark .public-soldout-banner {
    background: #24262e;
    border-color: rgba(201, 198, 190, 0.25);
    color: #e9e8e3;
}

/* Seat-hold timer: the light-mode navy/red text (#1e2f6d / #8f1a21) is invisible on the dark
   banner. The translucent tint backgrounds read fine over the dark page, so only flip the text
   (and the urgent variant) to light blues/reds. Covers the inherited span + strong. */
body.eventrika-dark .public-hold-timer {
    color: #becefb;
    border-color: rgba(98, 133, 238, 0.35);
}

body.eventrika-dark .public-hold-timer.is-urgent {
    color: #f6c9cd;
    border-color: rgba(248, 113, 113, 0.4);
}

body.eventrika-dark .seatview-overlay-card {
    background: #24262e;
    color: #e9e8e3;
}

/* The seat canvas keeps the venue's authored floor color — the room is content,
   not chrome — but its surrounding frame darkens. */
body.eventrika-dark .public-event-canvas-wrap {
    background: radial-gradient(circle at top, #24262e 0%, #1c1d23 55%, #14161c 100%);
    border-color: rgba(201, 198, 190, 0.22);
}

/* ── Find my tickets ── */
body.eventrika-dark .findtickets-page {
    background: #14161c;
}

body.eventrika-dark .findtickets-card {
    background: #24262e;
    border-color: rgba(201, 198, 190, 0.25);
}

body.eventrika-dark .findtickets-card h1 {
    color: #fafaf9;
}

body.eventrika-dark .findtickets-intro {
    color: #c9c6be;
}

body.eventrika-dark .findtickets-note {
    color: #a6a39a;
}

body.eventrika-dark .findtickets-again {
    background: #1c1d23;
    border-color: rgba(201, 198, 190, 0.3);
    color: #e9e8e3;
}

/* ── Support ── */
body.eventrika-dark .support-page {
    background: #14161c;
}

body.eventrika-dark .support-form-panel,
body.eventrika-dark .support-side-panel {
    background: #24262e;
    border-color: rgba(201, 198, 190, 0.25);
    color: #e9e8e3;
}

/* ── Header mobile menu + footer ── */
body.eventrika-dark .mobile-nav-menu {
    background: #1a1917;
    border-color: rgba(201, 198, 190, 0.22);
}

body.eventrika-dark .mobile-nav-link {
    color: #e9e8e3;
}

body.eventrika-dark .mobile-nav-link:hover {
    background: #24262e;
}

body.eventrika-dark .mobile-nav-divider {
    background: rgba(201, 198, 190, 0.22);
}

body.eventrika-dark .site-footer a {
    color: #c9c6be;
}

/* ── Cookie consent banner (scoped class, out-specified by this prefixed rule) ── */
body.eventrika-dark .cookie-consent {
    background: rgba(26, 25, 23, 0.98);
    border-color: rgba(201, 198, 190, 0.25);
    color: #e9e8e3;
}

body.eventrika-dark .cookie-consent p {
    color: #c9c6be;
}

/* ── Admin custom hotspots (Mud components re-theme themselves) ── */
body.eventrika-dark .admin-sticky-actions {
    background: rgba(26, 25, 23, 0.94);
    border-top-color: rgba(201, 198, 190, 0.25);
}

/* ── Marketing home (Front Row comp): flip the page-local tokens.
   Light values live in Home.razor.css on .fr-home; this is the full
   dark set from the comp's .tr-dark variant, with --fr-bg anchored to
   the app's dark canvas so the hero band blends seamlessly. ── */
body.eventrika-dark .fr-home {
    --fr-bg: #14161c;
    --fr-bg2: #181a22;
    --fr-surface: #1c1e27;
    --fr-tint: #171a26;
    --fr-tile: #212843;
    --fr-ink: #f4f4f1;
    --fr-body: #d6d3cc;
    --fr-muted: #a6a39a;
    --fr-subtle: #83817a;
    --fr-border: #2a2d39;
    --fr-border-soft: #23252e;
    --fr-border-strong: #343845;
    --fr-accent-text: #93adf6;
    --fr-success: #5ee0a0;
    --fr-hover: #242731;
    --fr-stage-bg: #0f1116;
    --fr-sel-ring: rgba(19, 21, 27, .55);
    --fr-check-bg: rgba(94, 224, 160, .14);
    --fr-check-ink: #5ee0a0;
    --fr-card-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    --fr-chip-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    --fr-lift-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

/* ============================================================================
   Design-critique 2026-06-13: dark/light theme-parity fixes.
   Additive, end-of-file so the cascade favors these over earlier rules.
   ============================================================================ */

/* Admin Mud panels kept a near-white bg (#fafaf9) in dark mode while MudBlazor's
   dark theme makes their text white -> ~1:1. Give them a dark surface. */
body.eventrika-dark .admin-panel,
body.eventrika-dark .admin-form-panel {
    background: #1c1d23 !important;
    border-color: rgba(176, 172, 163, 0.20) !important;
}

/* The subscribe widget uses --tr-card (white, intentionally NOT flipped) as its
   background with --tr-ink text (now light in dark). Without this it would be
   light-on-white. Give it a dark surface in dark mode. */
body.eventrika-dark .subscribe-widget {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.20);
}
body.eventrika-dark .subscribe-widget__input {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
    color: #e9e8e3;
}

/* The sort dropdown had no explicit text color, so it inherited the dark-first
   white body text and rendered white-on-white in light mode. Bind it to the
   landing heading var (dark ink in light, light ink in dark). */
.landing-select,
.landing-select select,
.landing-select option,
.landing-select .mud-select-input,
.landing-select .mud-input-slot {
    color: var(--landing-heading, #1a1917);
}

/* MudBlazor success (#15803d) is 2.24:1 as outlined-chip text and under white.
   Theme-aware: a dark green with white text in light mode; a light green with
   dark text in dark mode -> both outlined chips and filled badges pass AA. */
body:not(.eventrika-dark) {
    --mud-palette-success: #15803d;
    --mud-palette-success-text: #ffffff;
}
body.eventrika-dark {
    --mud-palette-success: #5ee0a0;
    --mud-palette-success-text: #06281a;
}

/* Breadcrumb inactive segments were opacity .26 (1.88:1 light / 2.34:1 dark).
   Restore full opacity and use the secondary text color (tuned per theme). */
.mud-breadcrumbs .mud-breadcrumb-item,
.mud-breadcrumbs .mud-breadcrumb-item a,
.mud-breadcrumbs .mud-breadcrumb-item .mud-typography,
.mud-breadcrumbs li {
    opacity: 1;
}
.mud-breadcrumbs .mud-breadcrumb-item a {
    color: #5f5b54;
}
body.eventrika-dark .mud-breadcrumbs .mud-breadcrumb-item a {
    color: #c9c6be;
}

/* Footer text/links were #85817a on the (theme-aware) footer bg: 4.44:1 light /
   3.27:1 dark — both under AA. The scoped rule .site-footer a{color:inherit}
   means links follow the container color, so retint the container via the now
   theme-aware --tr-muted token (#5f5b54 light -> 7:1, #a6a39a dark -> ~5.4:1).
   !important overrides the CSS-isolation-scoped .site-footer rule. */
.site-footer {
    color: var(--tr-muted) !important;
}

/* Checkout: --checkout-ink is remapped light in dark, but several sub-surfaces
   hardcode a light bg (#fafaf9 / #fff / #f4f4f2) -> light-on-light (form inputs,
   step badges, opt-in box, policy box, order-summary rows, confirmation ticket
   numbers). Darken them in dark.
   NOTE: the real (non-demo) payment step has more such surfaces — see follow-up. */
body.eventrika-dark .checkout-subscribe,
body.eventrika-dark .checkout-line-items li,
body.eventrika-dark .ticket-list li,
body.eventrika-dark .checkout-step-index,
body.eventrika-dark .checkout-back-button {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.20);
    color: #e9e8e3;
}
body.eventrika-dark .checkout-input {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
    color: #e9e8e3;
}
body.eventrika-dark .checkout-input::placeholder {
    color: #a6a39a;
}
body.eventrika-dark .checkout-subscribe .checkout-policy-check {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.20);
}
body.eventrika-dark .checkout-policy-check {
    color: #d6d4ce; /* opt-in label text was #454239 (dark-on-dark) */
}
body.eventrika-dark .checkout-policy-check a {
    color: #93adf6; /* policy link was #223cab (2.3:1 on dark) */
}
/* Hero banners hardcode light gradients (blue for real, cream for demo) while
   --checkout-ink flips light in dark -> white-on-cream. Keep each identity, dark. */
body.eventrika-dark .checkout-hero {
    background:
        radial-gradient(120% 100% at 100% 0%, #24262e 0%, #1c1d23 42%, #14161c 76%),
        linear-gradient(180deg, #14161c 0%, #101116 100%);
}
body.eventrika-dark .checkout-hero.is-demo {
    border-color: rgba(245, 158, 11, 0.55);
    background:
        radial-gradient(120% 100% at 100% 0%, #3a2c10 0%, #2a2010 42%, #1a1610 76%),
        linear-gradient(180deg, #1a1610 0%, #171208 100%);
}
body.eventrika-dark .checkout-hero.is-demo .checkout-eyebrow {
    color: #f59e0b; /* was #7a4a08 (dark amber on dark bg) */
}
/* Sticky mobile summary bar was rgba(255,255,255,.96) with light ink -> white-on-white. */
body.eventrika-dark .checkout-mobile-action {
    background: rgba(20, 22, 28, 0.96);
    border-top-color: rgba(176, 172, 163, 0.24);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
}

/* === Venue builder / chart designer: the chrome (panels, inspector controls,
   layer list, floor-color palette, chips) was light-only -> white boxes with
   inherited white Mud text = invisible in dark mode. Darken the chrome. The
   canvas floor (--venue-floor-color) and node colors are content and stay. === */
body.eventrika-dark .venue-builder-panel {
    background: linear-gradient(180deg, #1c1d23 0%, #14161c 100%);
    border-color: rgba(176, 172, 163, 0.18);
    color: #e9e8e3;
}
body.eventrika-dark .venue-builder-palette-panel,
body.eventrika-dark .venue-builder-quick-size-row,
body.eventrika-dark .venue-layer-item {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    color: #e9e8e3;
}
body.eventrika-dark .venue-layer-item:hover,
body.eventrika-dark .venue-layer-item.selected {
    background: #24262e;
    border-color: #6285ee;
}
body.eventrika-dark .venue-builder-toggle-card {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    color: #e9e8e3;
}
body.eventrika-dark .venue-builder-toggle-card.selected {
    background: #2c2e38;
    border-color: #6285ee;
}
body.eventrika-dark .venue-builder-toggle-card small,
body.eventrika-dark .venue-builder-tool-group-label,
body.eventrika-dark .venue-layer-kind,
body.eventrika-dark .venue-builder-palette-label {
    color: #a6a39a;
}
body.eventrika-dark .venue-color-input,
body.eventrika-dark .venue-color-favorite-button {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.30);
}
body.eventrika-dark .venue-category-chip,
body.eventrika-dark .seatview-chip {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    color: #e9e8e3;
}
/* The layer-list section name + seat-count meta and the color-row / palette
   labels ("Floor color", "Seat color", "Text color", "Table top", "Palette")
   were hardcoded near-black / dark slate, so they vanished on the dark builder
   panel (the section name measured 1.19:1). Lift them to the light foreground
   the rest of the builder chrome already uses. NB: .venue-builder-palette-label
   above is a stale class name — the live markup nests the label as
   .venue-builder-palette-header span, which is why it never took effect. */
body.eventrika-dark .venue-layer-name {
    color: #f4f4f2;
}
body.eventrika-dark .venue-layer-meta,
body.eventrika-dark .venue-builder-palette-empty {
    color: #a6a39a;
}
body.eventrika-dark .venue-builder-color-row,
body.eventrika-dark .venue-builder-palette-header {
    color: #d6d4ce;
}

/* The mobile-menu theme toggle is a <button>, and browsers default button flex
   containers to justify-content:center — so it rendered centered while the <a>
   nav links sit left. Force left alignment to match the rest of the menu. */
.mobile-nav-link {
    justify-content: flex-start;
}

/* Editor seat dots: theater (chairback) seats used to render as a plain rounded
   block that reads like a bleacher bench. Draw the same backrest + cushion the
   public buyer view uses (.public-venue-seat.is-theater) so the editor matches
   what buyers will see. Colour follows the section's --venue-seat-color. */
.venue-node-seat-dot.theater {
    position: relative;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.venue-node-seat-dot.theater::before,
.venue-node-seat-dot.theater::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.venue-node-seat-dot.theater::before { /* backrest */
    top: 6%;
    width: 52%;
    height: 50%;
    border-radius: 0.42rem 0.42rem 0.08rem 0.08rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 54%, #ffffff 46%) 0%, var(--venue-seat-color, #607aa0) 100%);
    border: 1px solid rgba(26, 25, 23, 0.26);
}
.venue-node-seat-dot.theater::after { /* seat cushion */
    bottom: 8%;
    width: 72%;
    height: 32%;
    border-radius: 0.08rem 0.08rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #607aa0) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #1a1917 12%) 100%);
    border: 1px solid rgba(26, 25, 23, 0.28);
}

/* Venues list -> chart-library template cards hardcoded background:#fafaf9 inline,
   so they were white boxes with white text in dark mode. Theme the card surface. */
.venue-chart-template-card {
    background: #fafaf9;
}
body.eventrika-dark .venue-chart-template-card {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
}

/* === Design-critique 2026-06-13 round 3: remaining dark-mode surfaces === */

/* ---- Scanner (Scanner.razor.css surfaces) ---- */
body.eventrika-dark .scanner-hero {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}
body.eventrika-dark .scanner-eyebrow { color: #93adf6; }
body.eventrika-dark .scanner-link-button { color: #93adf6; }
body.eventrika-dark .scanner-input {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.28);
    color: var(--scanner-ink);
}
body.eventrika-dark .scanner-input::placeholder { color: #a6a39a; }
body.eventrika-dark .scanner-input:focus {
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem rgba(98, 133, 238, 0.22);
}
body.eventrika-dark .scanner-button-secondary {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.28);
    color: #93adf6;
}
body.eventrika-dark .scanner-message {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.22);
}
body.eventrika-dark .scanner-placeholder {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.28);
}
body.eventrika-dark .scanner-ticket-meta div {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.22);
}
body.eventrika-dark .scanner-session {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.22);
}
body.eventrika-dark .scanner-event-lock.is-locked {
    background: #24262e;
    border-color: rgba(98, 133, 238, 0.4);
    color: #becefb;
}
body.eventrika-dark .scanner-camera-error {
    background: rgba(127, 29, 29, 0.22);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f6c9cd;
}
body.eventrika-dark .scanner-camera-error-fallback { color: #fba184; }
body.eventrika-dark .scanner-wrong-event {
    background: rgba(127, 29, 29, 0.22);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f6c9cd;
}
body.eventrika-dark .scanner-undo-button {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.28);
    color: #f59e0b;
}
body.eventrika-dark .scanner-undo-button:hover:not(:disabled) {
    background: rgba(180, 83, 9, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
}

/* ---- Email marketing (editor chrome; preview body stays white) ---- */
.email-block-head { background: #fafaf9; border-bottom: 1px solid #e7e6e2; }
body.eventrika-dark .email-block-head {
    background: #14161c;
    border-bottom-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .email-block-head-label { color: #e9e8e3; }
.email-block-styling { background: #fafaf9; border: 1px solid #e7e6e2; }
body.eventrika-dark .email-block-styling {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.18);
}
.email-style-label { color: #85817a; }
.email-style-hex   { color: #5f5b54; }
body.eventrika-dark .email-style-label,
body.eventrika-dark .email-style-hex { color: #a6a39a; }
.email-add-palette { background: #fafaf9; }
body.eventrika-dark .email-add-palette {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
}
.email-palette-btn { border: 1px solid #e7e6e2; background: #fff; color: #454239; }
.email-palette-btn:hover { border-color: #b0aca3; background: #fafaf9; }
body.eventrika-dark .email-palette-btn {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    color: #e9e8e3;
}
body.eventrika-dark .email-palette-btn:hover {
    border-color: #6285ee;
    background: #24262e;
}
.campaign-inbox-chip { background: #fafaf9; border: 1px solid #e7e6e2; }
body.eventrika-dark .campaign-inbox-chip {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .campaign-inbox-subject { color: #e9e8e3; }

/* ---- Super Admin: bulk-approve banner ---- */
.sa-bulk-approve-banner {
    background: #fef6e7;
    border: 1px solid #f6e0b0;
    border-radius: 8px;
}
body.eventrika-dark .sa-bulk-approve-banner {
    background: rgba(180, 83, 9, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
}
body.eventrika-dark .sa-bulk-approve-banner,
body.eventrika-dark .sa-bulk-approve-banner .mud-typography { color: #fde9c8; }

/* ---- Account / Manage (tokens flip text only; surfaces need overrides) ---- */
body.eventrika-dark .account-card {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32), 0 6px 12px rgba(0, 0, 0, 0.24);
}
body.eventrika-dark .account-card hr { border-top-color: rgba(176, 172, 163, 0.18); }
body.eventrika-dark .account-page .form-floating > .form-control,
body.eventrika-dark .account-page .form-control {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
    color: #e9e8e3;
}
body.eventrika-dark .account-page .form-floating > .form-control:disabled {
    background: #14161c;
    color: #a6a39a;
}
body.eventrika-dark .account-page .form-floating > label { color: #a6a39a; }
body.eventrika-dark .account-page .form-floating > .form-control:focus ~ label,
body.eventrika-dark .account-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #c9c6be;
}
body.eventrika-dark .account-page .nav-pills .nav-link:hover {
    background: rgba(42, 75, 209, 0.18);
    color: #93adf6;
}
body.eventrika-dark .recovery-code-grid {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .recovery-code {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.24);
}
body.eventrika-dark .account-pw-strength {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .account-pw-strength li.is-met,
body.eventrika-dark .account-pw-strength li.is-met::before { color: #5ee0a0; }
body.eventrika-dark .account-email-pill--verified {
    background: rgba(21, 128, 61, 0.16);
    color: #5ee0a0;
    border-color: rgba(21, 128, 61, 0.35);
}
body.eventrika-dark .account-email-pill--unverified {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.35);
}
body.eventrika-dark .account-page .input-group-text {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.24);
    color: #a6a39a;
}
body.eventrika-dark .account-card .table > :not(caption) > * > * {
    border-bottom-color: rgba(176, 172, 163, 0.16);
}

/* ---- Account / auth surfaces that hardcode a light background (no token covers
   them) need an explicit dark twin, same as .account-card above. Without these the
   passkey button, dividers, eyebrow chip, alerts and notes stay light-on-dark. ---- */
body.eventrika-dark .account-hero-eyebrow {
    background: rgba(42, 75, 209, 0.16);
    border-color: rgba(42, 75, 209, 0.38);
    color: #93adf6;
}
body.eventrika-dark .account-page .account-divider::before,
body.eventrika-dark .account-page .account-divider::after {
    background: rgba(176, 172, 163, 0.22);
}
body.eventrika-dark .account-page .account-footer-sep { color: rgba(176, 172, 163, 0.5); }

/* Passkey / outline buttons: white card → dark inset that reads as a secondary action */
body.eventrika-dark .account-page .account-passkey-btn,
body.eventrika-dark .account-page .btn-outline-secondary {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.28);
    color: #d6d4ce;
}
body.eventrika-dark .account-page .account-passkey-btn:hover,
body.eventrika-dark .account-page .btn-outline-secondary:hover {
    background: #1c1d23;
    color: #e9e8e3;
}
body.eventrika-dark .account-page .account-passkey-btn svg { color: #93adf6; }
body.eventrika-dark .account-page .btn-outline-primary {
    background: #14161c;
    border-color: rgba(42, 75, 209, 0.55);
    color: #93adf6;
}
body.eventrika-dark .account-page .btn-outline-primary:hover {
    background: rgba(42, 75, 209, 0.16);
}
body.eventrika-dark .account-page .btn-outline-danger {
    background: #14161c;
    border-color: rgba(248, 113, 113, 0.45);
    color: #ec9aa0;
}
body.eventrika-dark .account-page .btn-outline-danger:hover {
    background: rgba(210, 39, 48, 0.16);
    border-color: rgba(248, 113, 113, 0.6);
}
body.eventrika-dark .account-page .form-check-input,
body.eventrika-dark .account-page .checkbox input[type="checkbox"] {
    border-color: rgba(176, 172, 163, 0.4);
}
body.eventrika-dark .account-page .password-toggle:hover,
body.eventrika-dark .account-page .password-toggle:focus-visible {
    background: rgba(42, 75, 209, 0.18);
    color: #93adf6;
}

/* Alerts (StatusMessage + validation summary) and inline callouts */
body.eventrika-dark .account-page .alert-info {
    background: rgba(42, 75, 209, 0.14);
    border-color: rgba(42, 75, 209, 0.34);
    color: #dce4fd;
}
body.eventrika-dark .account-page .alert-warning {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.40);
    color: #fcd9a3;
}
body.eventrika-dark .account-page .alert-danger {
    background: rgba(210, 39, 48, 0.16);
    border-color: rgba(248, 113, 113, 0.40);
    color: #f6c9cd;
}
body.eventrika-dark .account-page .alert-success {
    background: rgba(21, 128, 61, 0.16);
    border-color: rgba(21, 128, 61, 0.36);
    color: #a7f3d0;
}
body.eventrika-dark .account-approval-note {
    background: rgba(42, 75, 209, 0.16);
    border-color: rgba(61, 98, 227, 0.40);
    color: #becefb;
}
body.eventrika-dark .account-policy-check {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.22);
}

/* Inline status text (utility classes hardcode light-mode hues) */
body.eventrika-dark .account-page .text-info { color: #93adf6; }
body.eventrika-dark .account-page .text-success,
body.eventrika-dark .account-page .input-group .text-success { color: #5ee0a0; }
body.eventrika-dark .account-page .text-danger,
body.eventrika-dark .account-page .validation-message { color: #ec9aa0 !important; }

/* Links use --tr-accent-2 (#223cab) which is only ~2.2:1 on the dark page/card. Lift to the
   a11y-safe light purple in dark (matches the dark accent used above). Exclude .btn so the
   outline-button color overrides keep their own tuned hues. */
body.eventrika-dark .account-page a:not(.btn),
body.eventrika-dark .account-page .btn-link {
    color: #93adf6;
}

/* ---- Ticket Designer (chrome only; paper-ticket preview stays white) ---- */
.td-field-label { color: #85817a; }
body.eventrika-dark .td-field-label { color: #a6a39a; }
.td-color-input { border: 1px solid #d6d4ce; }
body.eventrika-dark .td-color-input { border-color: rgba(176, 172, 163, 0.30); }
.td-hex { color: #454239; }
body.eventrika-dark .td-hex { color: #d6d4ce; }
.td-hint { color: #b0aca3; }
body.eventrika-dark .td-hint { color: #a6a39a; }
.td-qr-style-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px; border: 2px solid #e7e6e2; border-radius: 10px;
    background: #fff; cursor: pointer; transition: all .15s; font-family: inherit;
}
.td-qr-style-btn.is-selected { border-color: #2a4bd1; background: #eef2fe; }
.td-qr-style-label { font-size: 12px; color: #454239; }
.td-qr-style-btn.is-selected .td-qr-style-label { color: #223cab; }
body.eventrika-dark .td-qr-style-btn {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
}
body.eventrika-dark .td-qr-style-btn.is-selected {
    border-color: #6285ee;
    background: rgba(42, 75, 209, 0.18);
}
body.eventrika-dark .td-qr-style-label { color: #d6d4ce; }
body.eventrika-dark .td-qr-style-btn.is-selected .td-qr-style-label { color: #93adf6; }

/* ---- Checkout (real, non-demo payment step) ---- */
body.eventrika-dark .payment-stack {
    background: linear-gradient(180deg, #1c1d23 0%, #14161c 100%);
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .payment-stack.is-selected {
    border-color: #6285ee;
    box-shadow: inset 0 0 0 1px rgba(98, 133, 238, 0.25);
}
body.eventrika-dark .card-brand-row span {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
    color: #d6d4ce;
}
body.eventrika-dark .checkout-dev-note {
    background: linear-gradient(180deg, #1c1d23 0%, #14161c 100%);
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .checkout-dev-title { color: #93adf6; }
body.eventrika-dark .dev-scenario-button {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .dev-scenario-button.is-selected {
    background: #1c1d23;
    border-color: #6285ee;
    box-shadow: 0 0 0 0.2rem rgba(98, 133, 238, 0.18);
}
body.eventrika-dark .checkout-summary-total { border-top-color: rgba(176, 172, 163, 0.18); }
body.eventrika-dark .checkout-state-card { background: var(--checkout-surface); }
body.eventrika-dark .checkout-state-card.is-success {
    background:
        radial-gradient(140% 110% at 100% 0%, rgba(34, 197, 94, 0.18) 0%, rgba(28, 29, 35, 0.6) 52%, #1c1d23 82%),
        #1c1d23;
}
body.eventrika-dark .checkout-state-card.is-expired {
    background:
        radial-gradient(140% 110% at 100% 0%, rgba(248, 113, 113, 0.18) 0%, rgba(28, 29, 35, 0.6) 52%, #1c1d23 82%),
        #1c1d23;
}
body.eventrika-dark .ticket-card { border-color: rgba(176, 172, 163, 0.18); }

/* ---- Legal pages: Privacy / Terms / Cookies (shared .legal-*) ---- */
body.eventrika-dark .legal-hero,
body.eventrika-dark .legal-content,
body.eventrika-dark .legal-side {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 18px 40px rgba(16, 15, 14, 0.45);
}
body.eventrika-dark .legal-hero {
    background:
        radial-gradient(100% 120% at 100% 0%, #2c2e38 0%, #1c1d23 46%, #14161c 82%),
        #1c1d23;
}
body.eventrika-dark .legal-hero h1,
body.eventrika-dark .legal-content h2,
body.eventrika-dark .legal-side h2 { color: #e9e8e3; }
body.eventrika-dark .legal-hero p,
body.eventrika-dark .legal-content p,
body.eventrika-dark .legal-side p { color: #a6a39a; }
body.eventrika-dark .legal-kicker { color: #93adf6; }

/* ---- What's New / changelog (.wn-*) ---- */
body.eventrika-dark .wn-hero {
    background:
        radial-gradient(120% 130% at 100% 0%, #151f44 0%, #1c1d23 46%, #1c1d23 82%),
        #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 18px 40px rgba(16, 15, 14, 0.45);
}
body.eventrika-dark .wn-kicker { color: #93adf6; }
body.eventrika-dark .wn-meta { border-top-color: rgba(94, 125, 238, 0.22); }
body.eventrika-dark .wn-meta-dot { color: #5e7dee; }
body.eventrika-dark .wn-card {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 14px 32px rgba(16, 15, 14, 0.4);
}
body.eventrika-dark .wn-card:hover { box-shadow: 0 20px 44px rgba(16, 15, 14, 0.55); }
body.eventrika-dark .wn-card.is-latest {
    border-color: rgba(94, 125, 238, 0.5);
    box-shadow: 0 16px 36px rgba(42, 75, 209, 0.3);
}
body.eventrika-dark .wn-node {
    background: #1c1d23;
    border-color: #5e7dee;
    box-shadow: 0 0 0 4px rgba(94, 125, 238, 0.16);
}
body.eventrika-dark .wn-rail::before {
    background: linear-gradient(to bottom, #3d62e3, rgba(176, 172, 163, 0.25));
}
body.eventrika-dark .wn-latest-badge { background: #5e7dee; color: #151f44; }
body.eventrika-dark .wn-tag-new {
    background: rgba(94, 125, 238, 0.18);
    color: #93adf6;
    border-color: rgba(94, 125, 238, 0.32);
}
body.eventrika-dark .wn-tag-improved {
    background: rgba(98, 133, 238, 0.18);
    color: #93adf6;
    border-color: rgba(98, 133, 238, 0.32);
}
body.eventrika-dark .wn-tag-fixed {
    background: rgba(52, 211, 153, 0.16);
    color: #5ee0a0;
    border-color: rgba(52, 211, 153, 0.3);
}
body.eventrika-dark .wn-footer-cta {
    border-color: rgba(176, 172, 163, 0.32);
    background: rgba(94, 125, 238, 0.06);
}
/* Audience toggle + master (internal) changelog. Keep after the .wn-hero rule above so the
   master hero wins on equal specificity in dark mode. */
body.eventrika-dark .wn-audience-toggle {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
    box-shadow: 0 8px 22px rgba(16, 15, 14, 0.4);
}
body.eventrika-dark .wn-audience-link.is-active {
    background: #5e7dee;
    color: #fff;
}
body.eventrika-dark .wn-hero-master {
    background:
        radial-gradient(120% 130% at 100% 0%, #23242b 0%, #1c1d23 46%, #14161c 82%),
        #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .wn-hero-master .wn-kicker { color: #a6a39a; }
body.eventrika-dark .wn-master-flag { background: #f5f4f1; color: #14161c; }

/* ---- Support page ---- */
body.eventrika-dark .support-hero {
    background:
        radial-gradient(100% 120% at 100% 0%, #2c2e38 0%, #1c1d23 46%, #14161c 82%),
        #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .support-faq {
    background: #1c1d23;
    border-color: rgba(176, 172, 163, 0.18);
}
body.eventrika-dark .support-hero h1,
body.eventrika-dark .support-faq h2,
body.eventrika-dark .support-field label { color: #e9e8e3; }
body.eventrika-dark .support-faq summary { color: #e9e8e3; }
body.eventrika-dark .support-hero p,
body.eventrika-dark .support-faq details p,
body.eventrika-dark .support-side-panel p,
body.eventrika-dark .support-side-list span { color: #a6a39a; }
body.eventrika-dark .support-faq details { border-bottom-color: rgba(176, 172, 163, 0.18); }
body.eventrika-dark .support-input {
    background: #14161c;
    border-color: rgba(176, 172, 163, 0.24);
    color: #e9e8e3;
}
body.eventrika-dark .support-reference {
    background: #0f2e26;
    border-color: rgba(45, 212, 191, 0.30);
    color: #5eead4;
}

/* ---- Find my tickets (success/error states) ---- */
body.eventrika-dark .findtickets-result {
    background: #0f2e26;
    border-color: rgba(45, 212, 191, 0.30);
    color: #a7f3d0;
}
body.eventrika-dark .findtickets-error { color: #ec9aa0; }

/* ---- DevicePreviewFrame toolbar + frame (iframe content stays white) ---- */
.device-preview-frame { border: 1px solid #e7e6e2; background: #fafaf9; }
body.eventrika-dark .device-preview-frame {
    border-color: rgba(176, 172, 163, 0.18);
    background: #14161c;
}
.device-preview-btn {
    background: #fff; color: #454239; border: 1px solid #e7e6e2;
}
.device-preview-btn.is-active { background: #eef2fe; color: #223cab; border-color: #2a4bd1; }
body.eventrika-dark .device-preview-btn {
    background: #1c1d23;
    color: #d6d4ce;
    border-color: rgba(176, 172, 163, 0.24);
}
body.eventrika-dark .device-preview-btn.is-active {
    background: #2c2e38;
    border-color: #6285ee;
    color: #93adf6;
}

/* ---- SeatViewPreview chrome (scene + map nodes stay dark content) ---- */
body.eventrika-dark .seatview { color: #e9e8e3; }
body.eventrika-dark .seatview-summary { color: #d6d4ce; }
body.eventrika-dark .seatview-chip-value { color: #e9e8e3; }
body.eventrika-dark .seatview-chip-label,
body.eventrika-dark .seatview-head-caption,
body.eventrika-dark .seatview-map-caption,
body.eventrika-dark .seatview-map-wrap-primary .seatview-map-caption { color: #a6a39a; }

/* ============================================================
   Sport-specific field/court surfaces + line markings.
   Each .venue-node-field-<sport> overrides the generic
   .venue-node-sports-field base defined above. Placed after
   the base so equal-specificity pseudo rules win by order.
   ============================================================ */

/* === BASKETBALL (indoor hardwood) === */
.venue-node-sports-field.venue-node-field-basketball {
  background:
    /* three-point arc near LEFT baseline (ring via closest-side circle, transparent core) */
    radial-gradient(circle closest-side at 6% 50%, transparent 0 calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat 6% 50% / 64% 78%,
    /* three-point arc near RIGHT baseline (ring) */
    radial-gradient(circle closest-side at 94% 50%, transparent 0 calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat 94% 50% / 64% 78%,
    /* LEFT free-throw KEY/paint box: top line, bottom line, and inner (free-throw) vertical line */
    linear-gradient(0deg, transparent 0 32%, rgba(28,20,12,.72) 32% calc(32% + 2px), transparent calc(32% + 2px) 68%, rgba(28,20,12,.72) 68% calc(68% + 2px), transparent calc(68% + 2px) 100%) no-repeat left 3% top 50% / 22% 36%,
    linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat left 3% top 50% / 22% 36%,
    /* RIGHT free-throw KEY/paint box */
    linear-gradient(0deg, transparent 0 32%, rgba(28,20,12,.72) 32% calc(32% + 2px), transparent calc(32% + 2px) 68%, rgba(28,20,12,.72) 68% calc(68% + 2px), transparent calc(68% + 2px) 100%) no-repeat right 3% top 50% / 22% 36%,
    linear-gradient(90deg, rgba(28,20,12,.72) 0 2px, transparent 2px 100%) no-repeat right 3% top 50% / 22% 36%,
    /* vertical center line */
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(28,20,12,.72) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
    /* court boundary rectangle (vertical side lines) */
    linear-gradient(90deg, rgba(28,20,12,.72) 0 2px, transparent 2px calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat center center / 95% 82%,
    /* court boundary rectangle (horizontal end/base lines) */
    linear-gradient(0deg, rgba(28,20,12,.72) 0 2px, transparent 2px calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat center center / 95% 82%,
    /* top-light sheen */
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(120,72,30,.10) 100%),
    /* maple plank seams (horizontal planks running left-to-right) */
    repeating-linear-gradient(0deg, rgba(120,72,30,.22) 0 1px, transparent 1px 8%),
    /* maple base color, warmer/lighter at top (SURFACE = LAST/bottom layer).
       Surface follows the element color picker via --venue-node-bg (default = maple). */
    linear-gradient(180deg, color-mix(in srgb, var(--venue-node-bg,#d8a866) 84%, #fff 16%) 0%, var(--venue-node-bg,#d8a866) 100%);
  color: var(--venue-node-fg,#3a2410);
  border: 2px solid color-mix(in srgb, var(--venue-node-bg,#d8a866) 60%, #5a3514 40%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.20), 0 12px 24px rgba(90,53,20,.22);
}
/* center circle - guaranteed-circular via aspect-ratio + border-radius */
.venue-node-sports-field.venue-node-field-basketball::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(28,20,12,.72);
  border-radius: 999px;
  background: none;
}
/* free-throw circles at both keys (two rings via radial-gradient on a centered full-width strip) */
.venue-node-sports-field.venue-node-field-basketball::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  height: 20%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle closest-side at 25% 50%, transparent 0 calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat 25% 50% / 14% 100%,
    radial-gradient(circle closest-side at 75% 50%, transparent 0 calc(100% - 2px), rgba(28,20,12,.72) calc(100% - 2px) 100%) no-repeat 75% 50% / 14% 100%;
}

.venue-node-sports-field.venue-node-field-football {
  background:
    /* GOAL LINES: thicker white verticals at inner edge of each end zone (~12% / ~88%) */
    linear-gradient(90deg,
      transparent 0 calc(12% - 1.5px),
      rgba(255,255,255,.92) calc(12% - 1.5px) calc(12% + 1.5px),
      transparent calc(12% + 1.5px) calc(88% - 1.5px),
      rgba(255,255,255,.92) calc(88% - 1.5px) calc(88% + 1.5px),
      transparent calc(88% + 1.5px) 100%),
    /* END ZONES: translucent dark-green bands at far-left and far-right (~12% each) */
    linear-gradient(90deg,
      rgba(28,90,55,.6) 0 12%,
      transparent 12% 88%,
      rgba(28,90,55,.6) 88% 100%),
    /* YARD LINES: evenly spaced thin white verticals (~2px every 8%) */
    repeating-linear-gradient(90deg,
      transparent 0 calc(8% - 1px),
      rgba(255,255,255,.8) calc(8% - 1px) calc(8% + 1px),
      transparent calc(8% + 1px) 16%),
    /* MOWING STRIPES (surface texture, last/bottom layer): alternating green bands.
       Surface follows the element color picker via --venue-node-bg (default = turf green). */
    repeating-linear-gradient(90deg,
      var(--venue-node-bg,#3f9d57) 0 6.5%, color-mix(in srgb, var(--venue-node-bg,#3f9d57) 88%, #000 12%) 6.5% 13%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  color: var(--venue-node-fg,#0f3d25);
  border: 2px solid color-mix(in srgb, var(--venue-node-bg,#3f9d57) 56%, #14532d 44%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.30),
    0 12px 24px rgba(20,83,45,.18);
}
.venue-node-sports-field.venue-node-field-football::before {
  /* SIDELINES (top + bottom) + faint HASH-MARK rows. Fully neutralizes base center-circle geometry. */
  content: "";
  position: absolute;
  left: 0.4rem; right: 0.4rem; top: 0.4rem; bottom: 0.4rem;
  width: auto; height: auto; aspect-ratio: auto; transform: none;
  border: 0; border-radius: 0;
  z-index: 0; pointer-events: none;
  border-top: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 5px, transparent 5px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 5px, transparent 5px 14px);
  background-repeat: repeat-x, repeat-x;
  background-size: auto 2px, auto 2px;
  background-position: 0 33%, 0 67%;
}
.venue-node-sports-field.venue-node-field-football::after {
  /* 50-yard CENTER LINE. Fully neutralizes base boundary-box geometry (inset/border/radius). */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: calc(50% - 1.5px); right: auto;
  width: 3px; height: auto; aspect-ratio: auto; transform: none;
  border: 0; border-radius: 0;
  z-index: 0; pointer-events: none;
  background: rgba(255,255,255,.92);
}

/* ===== Soccer pitch ===== */
.venue-node-sports-field.venue-node-field-soccer {
  background:
    /* vertical halfway line at center (drawn over turf) */
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.78) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
    /* faint vertical sheen for depth (TRANSLUCENT, sits above the opaque stripes) */
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%, rgba(20,83,45,.10) 100%),
    /* mowing stripes: alternating bands of grass green, every ~9%.
       Surface follows the element color picker via --venue-node-bg (default = pitch green). */
    repeating-linear-gradient(180deg, var(--venue-node-bg,#4cae66) 0 9%, color-mix(in srgb, var(--venue-node-bg,#4cae66) 88%, #000 12%) 9% 18%),
    /* base turf fill (bottom-most opaque layer) */
    linear-gradient(180deg, var(--venue-node-bg,#4cae66) 0%, color-mix(in srgb, var(--venue-node-bg,#4cae66) 88%, #000 12%) 100%);
  color: var(--venue-node-fg, #0f3d25);
  border: 2px solid color-mix(in srgb, var(--venue-node-bg,#4cae66) 56%, #14532d 44%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.30),
    0 12px 24px rgba(20,83,45,.18);
}

/* ::before  ->  center circle (guaranteed-circular) + center spot */
.venue-node-sports-field.venue-node-field-soccer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(30%, 4.4rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  /* center spot in the middle of the circle (true disc, transparent outside) */
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 12%, transparent 12.5% 100%);
  pointer-events: none;
}

/* ::after  ->  boundary box + penalty boxes + goal boxes + penalty arcs + corner arcs */
.venue-node-sports-field.venue-node-field-soccer::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 0;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 0.2rem;
  background:
    /* LEFT penalty arc: ring centered on the (left) penalty spot ~12% in; only its right bulge clears the box */
    radial-gradient(circle at 12% 50%, transparent 0 17%, rgba(255,255,255,.78) 17% calc(17% + 2px), transparent calc(17% + 2px) 100%),
    /* RIGHT penalty arc */
    radial-gradient(circle at 88% 50%, transparent 0 17%, rgba(255,255,255,.78) 17% calc(17% + 2px), transparent calc(17% + 2px) 100%),
    /* LEFT penalty box: right edge vertical line at 18% */
    linear-gradient(90deg, transparent 0 calc(18% - 1px), rgba(255,255,255,.82) calc(18% - 1px) calc(18% + 1px), transparent calc(18% + 1px) 100%) no-repeat 0 18% / 100% 64%,
    /* LEFT penalty box: top + bottom horizontal lines spanning 0..18% */
    linear-gradient(180deg, rgba(255,255,255,.82) 0 2px, transparent 2px 100%) no-repeat 0 18% / 18% 2px,
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(255,255,255,.82) calc(100% - 2px) 100%) no-repeat 0 82% / 18% 2px,
    /* RIGHT penalty box: left edge vertical line at 82% */
    linear-gradient(90deg, transparent 0 calc(82% - 1px), rgba(255,255,255,.82) calc(82% - 1px) calc(82% + 1px), transparent calc(82% + 1px) 100%) no-repeat 100% 18% / 100% 64%,
    /* RIGHT penalty box: top + bottom horizontal lines spanning 82..100% */
    linear-gradient(180deg, rgba(255,255,255,.82) 0 2px, transparent 2px 100%) no-repeat 100% 18% / 18% 2px,
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(255,255,255,.82) calc(100% - 2px) 100%) no-repeat 100% 82% / 18% 2px,
    /* LEFT goal box: right edge vertical line at 8% */
    linear-gradient(90deg, transparent 0 calc(8% - 1px), rgba(255,255,255,.82) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px) 100%) no-repeat 0 34% / 100% 32%,
    /* LEFT goal box: top + bottom lines spanning 0..8% */
    linear-gradient(180deg, rgba(255,255,255,.82) 0 2px, transparent 2px 100%) no-repeat 0 34% / 8% 2px,
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(255,255,255,.82) calc(100% - 2px) 100%) no-repeat 0 66% / 8% 2px,
    /* RIGHT goal box: left edge vertical line at 92% */
    linear-gradient(90deg, transparent 0 calc(92% - 1px), rgba(255,255,255,.82) calc(92% - 1px) calc(92% + 1px), transparent calc(92% + 1px) 100%) no-repeat 100% 34% / 100% 32%,
    /* RIGHT goal box: top + bottom lines spanning 92..100% */
    linear-gradient(180deg, rgba(255,255,255,.82) 0 2px, transparent 2px 100%) no-repeat 100% 34% / 8% 2px,
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(255,255,255,.82) calc(100% - 2px) 100%) no-repeat 100% 66% / 8% 2px,
    /* four corner arcs (quarter-circle rings tucked into each corner) */
    radial-gradient(circle at 0% 0%,     transparent 0 9%, rgba(255,255,255,.78) 9% calc(9% + 2px), transparent calc(9% + 2px) 100%) no-repeat 0 0 / 16% 22%,
    radial-gradient(circle at 100% 0%,   transparent 0 9%, rgba(255,255,255,.78) 9% calc(9% + 2px), transparent calc(9% + 2px) 100%) no-repeat 100% 0 / 16% 22%,
    radial-gradient(circle at 0% 100%,   transparent 0 9%, rgba(255,255,255,.78) 9% calc(9% + 2px), transparent calc(9% + 2px) 100%) no-repeat 0 100% / 16% 22%,
    radial-gradient(circle at 100% 100%, transparent 0 9%, rgba(255,255,255,.78) 9% calc(9% + 2px), transparent calc(9% + 2px) 100%) no-repeat 100% 100% / 16% 22%;
  pointer-events: none;
}

/* ===== ICE HOCKEY (suffix: hockey) ===== */
.venue-node-sports-field.venue-node-field-hockey {
  background:
    /* RED goal lines near each end */
    linear-gradient(90deg,
      transparent 0 calc(9% - 1px), rgba(200,40,40,.82) calc(9% - 1px) calc(9% + 1px),
      transparent calc(9% + 1px) calc(91% - 1px), rgba(200,40,40,.82) calc(91% - 1px) calc(91% + 1px),
      transparent calc(91% + 1px) 100%),
    /* two BLUE lines flanking center */
    linear-gradient(90deg,
      transparent 0 calc(33% - 2px), rgba(40,80,200,.78) calc(33% - 2px) calc(33% + 2px),
      transparent calc(33% + 2px) calc(67% - 2px), rgba(40,80,200,.78) calc(67% - 2px) calc(67% + 2px),
      transparent calc(67% + 2px) 100%),
    /* thick RED center line */
    linear-gradient(90deg,
      transparent 0 calc(50% - 2px), rgba(200,40,40,.82) calc(50% - 2px) calc(50% + 2px),
      transparent calc(50% + 2px) 100%),
    /* subtle horizontal blue ice grooves */
    repeating-linear-gradient(0deg,
      rgba(120,150,200,.05) 0 3px, rgba(255,255,255,0) 3px 8px),
    /* near-white ice with cool blue tint + soft radial sheen (BOTTOM = opaque surface).
       Surface follows the element color picker via --venue-node-bg (default = icy blue-white). */
    radial-gradient(120% 90% at 50% 42%,
      color-mix(in srgb, var(--venue-node-bg,#dde7f3) 22%, #fff 78%) 0%,
      color-mix(in srgb, var(--venue-node-bg,#dde7f3) 55%, #fff 45%) 45%,
      var(--venue-node-bg,#dde7f3) 100%);
  color: var(--venue-node-fg,#0f3d25);
  border: 2px solid color-mix(in srgb, var(--venue-node-bg,#c7d4e6) 55%, #5a6b85 45%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 12px 24px rgba(60,90,140,.2);
}
/* center BLUE faceoff circle (guaranteed circular ring) + red center dot */
.venue-node-sports-field.venue-node-field-hockey::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(40,80,200,.78);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200,40,40,.85) 0 3px, transparent 3px);
}
/* RED zone faceoff rings + center red dots + blue GOAL CREASE arcs at each end */
.venue-node-sports-field.venue-node-field-hockey::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  background:
    /* left-zone red faceoff rings (transparent center => real RING) */
    radial-gradient(circle at 20% 33%, transparent 0 calc(8% - 1px), rgba(200,40,40,.82) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px)),
    radial-gradient(circle at 20% 67%, transparent 0 calc(8% - 1px), rgba(200,40,40,.82) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px)),
    /* right-zone red faceoff rings */
    radial-gradient(circle at 80% 33%, transparent 0 calc(8% - 1px), rgba(200,40,40,.82) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px)),
    radial-gradient(circle at 80% 67%, transparent 0 calc(8% - 1px), rgba(200,40,40,.82) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px)),
    /* neutral-zone red faceoff dots flanking the blue lines */
    radial-gradient(circle at 33% 50%, rgba(200,40,40,.82) 0 2px, transparent 2px),
    radial-gradient(circle at 67% 50%, rgba(200,40,40,.82) 0 2px, transparent 2px),
    /* left blue goal crease arc (centered on edge => half-circle opening inward) */
    radial-gradient(circle at 9% 50%, transparent 0 calc(11% - 2px), rgba(40,80,200,.5) calc(11% - 2px) 11%, transparent 11%),
    /* right blue goal crease arc */
    radial-gradient(circle at 91% 50%, transparent 0 calc(11% - 2px), rgba(40,80,200,.5) calc(11% - 2px) 11%, transparent 11%);
}

/* ===== TENNIS (hard court) ===== */
.venue-node-sports-field.venue-node-field-tennis {
  background:
    /* CENTER NET: thick vertical line at exact horizontal center + faint shadow */
    linear-gradient(90deg,
      transparent 0 calc(50% - 4px),
      rgba(20,30,45,.20) calc(50% - 4px) calc(50% - 2px),
      rgba(255,255,255,.92) calc(50% - 2px) calc(50% + 2px),
      rgba(20,30,45,.20) calc(50% + 2px) calc(50% + 4px),
      transparent calc(50% + 4px) 100%),
    /* GREEN/TEAL APRON: top & bottom bands framing the blue court */
    linear-gradient(180deg,
      #2f8a6b 0 8%,
      transparent 8% 92%,
      #2f8a6b 92% 100%),
    /* GREEN/TEAL APRON: left & right bands framing the blue court */
    linear-gradient(90deg,
      #2f8a6b 0 6%,
      transparent 6% 94%,
      #2f8a6b 94% 100%),
    /* BLUE COURT SURFACE (bottom layer). The main court follows the element color picker via
       --venue-node-bg (default = hard-court blue); the green apron stays fixed. */
    linear-gradient(180deg,
      color-mix(in srgb, var(--venue-node-bg,#2f6cab) 88%, #fff 12%) 0%,
      var(--venue-node-bg,#2f6cab) 55%,
      color-mix(in srgb, var(--venue-node-bg,#2f6cab) 92%, #000 8%) 100%);
  color: var(--venue-node-fg, #fff);
  border: 2px solid #1f5e4a;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.30),
    0 12px 24px rgba(20,60,90,.22);
}

/* DOUBLES boundary box + SINGLES sidelines + CENTER SERVICE line */
.venue-node-sports-field.venue-node-field-tennis::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 14%;
  /* outer DOUBLES box */
  border: 2px solid rgba(255,255,255,.85);
  background:
    /* CENTER SERVICE line: horizontal line, confined between the two service lines */
    linear-gradient(0deg,
      transparent 0 calc(50% - 1px),
      rgba(255,255,255,.85) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px) 100%) no-repeat,
    /* SINGLES sideline - top */
    linear-gradient(0deg,
      transparent 0 12%,
      rgba(255,255,255,.82) 12% calc(12% + 2px),
      transparent calc(12% + 2px) 100%),
    /* SINGLES sideline - bottom */
    linear-gradient(0deg,
      transparent 0 calc(88% - 2px),
      rgba(255,255,255,.82) calc(88% - 2px) 88%,
      transparent 88% 100%);
  /* center service line spans only the inner service area, not the full court length */
  background-size: 56% 100%, 100% 100%, 100% 100%;
  background-position: center center, 0 0, 0 0;
}

/* SERVICE lines (vertical, inset each side of net) + baseline CENTER MARKS */
.venue-node-sports-field.venue-node-field-tennis::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 14%;
  background:
    /* SERVICE line - left (vertical) */
    linear-gradient(90deg,
      transparent 0 22%,
      rgba(255,255,255,.82) 22% calc(22% + 2px),
      transparent calc(22% + 2px) 100%),
    /* SERVICE line - right (vertical) */
    linear-gradient(90deg,
      transparent 0 calc(78% - 2px),
      rgba(255,255,255,.82) calc(78% - 2px) 78%,
      transparent 78% 100%),
    /* baseline CENTER MARK - left (short horizontal tick at left baseline, centered) */
    linear-gradient(0deg,
      transparent 0 calc(50% - 1px),
      rgba(255,255,255,.82) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px) 100%) no-repeat,
    /* baseline CENTER MARK - right (short horizontal tick at right baseline, centered) */
    linear-gradient(0deg,
      transparent 0 calc(50% - 1px),
      rgba(255,255,255,.82) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px) 100%) no-repeat;
  background-size: 100% 100%, 100% 100%, 5% 100%, 5% 100%;
  background-position: 0 0, 0 0, left center, right center;
}

/* === VOLLEYBALL (indoor taraflex): orange play court inset in a blue free-zone === */
.venue-node-sports-field.venue-node-field-volleyball {
  background:
    /* --- net tape line at center (white, emphasized ~3px) --- */
    linear-gradient(90deg,
      transparent 0 calc(50% - 1.5px),
      rgba(255,255,255,.92) calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px) 100%),
    /* --- left attack line (vertical, ~1/4 in from center) --- */
    linear-gradient(90deg,
      transparent 0 calc(37.5% - 1px),
      rgba(255,255,255,.8) calc(37.5% - 1px) calc(37.5% + 1px),
      transparent calc(37.5% + 1px) 100%),
    /* --- right attack line (vertical, ~1/4 in from center) --- */
    linear-gradient(90deg,
      transparent 0 calc(62.5% - 1px),
      rgba(255,255,255,.8) calc(62.5% - 1px) calc(62.5% + 1px),
      transparent calc(62.5% + 1px) 100%),
    /* --- court boundary: left edge of orange play court (vertical) --- */
    linear-gradient(90deg,
      transparent 0 calc(11% - 1px),
      rgba(255,255,255,.85) calc(11% - 1px) calc(11% + 1px),
      transparent calc(11% + 1px) 100%),
    /* --- court boundary: right edge of orange play court (vertical) --- */
    linear-gradient(90deg,
      transparent 0 calc(89% - 1px),
      rgba(255,255,255,.85) calc(89% - 1px) calc(89% + 1px),
      transparent calc(89% + 1px) 100%),
    /* --- court boundary: top edge of orange play court (horizontal) --- */
    linear-gradient(0deg,
      transparent 0 calc(89% - 1px),
      rgba(255,255,255,.85) calc(89% - 1px) calc(89% + 1px),
      transparent calc(89% + 1px) 100%),
    /* --- court boundary: bottom edge of orange play court (horizontal) --- */
    linear-gradient(0deg,
      transparent 0 calc(11% - 1px),
      rgba(255,255,255,.85) calc(11% - 1px) calc(11% + 1px),
      transparent calc(11% + 1px) 100%),
    /* --- ORANGE play court block, inset on ALL FOUR sides (vertical clip).
       The play court follows the element color picker via --venue-node-bg (default = orange);
       the blue free-zone stays fixed. --- */
    linear-gradient(0deg,
      transparent 0 11%,
      var(--venue-node-bg,#d9712e) 11% 89%,
      transparent 89% 100%),
    /* --- ORANGE play court block (horizontal clip) over the blue base --- */
    linear-gradient(90deg,
      transparent 0 11%,
      var(--venue-node-bg,#d9712e) 11% 89%,
      transparent 89% 100%),
    /* --- BLUE free-zone base surface (bottom layer) --- */
    linear-gradient(180deg,
      color-mix(in srgb, #2f5fa6 86%, #fff 14%) 0%,
      #2f5fa6 100%);
  color: var(--venue-node-fg,#fff);
  border: 2px solid color-mix(in srgb, #2f5fa6 64%, #0b2347 36%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 12px 24px rgba(11,35,71,.22);
}
/* net: a crisp center column with solid post caps at top & bottom */
.venue-node-sports-field.venue-node-field-volleyball::before {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:calc(50% - 2px);
  top:8%;
  width:4px;
  height:84%;
  border-radius:2px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.95) 0 7px,
      rgba(255,255,255,.5) 7px calc(100% - 7px),
      rgba(255,255,255,.95) calc(100% - 7px) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
/* unused: prevent base boundary box from leaking */
.venue-node-sports-field.venue-node-field-volleyball::after { content: none; }

/* ===== FIELD LACROSSE ===== */
.venue-node-sports-field.venue-node-field-lacrosse {
  background:
    /* center dot at midfield (top layer) */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 4px, transparent 4px) 0 0 / 100% 100% no-repeat,
    /* short WING lines (horizontal) flanking the center line: TOP wing */
    linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.82) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 50% 22% / 26% 2px no-repeat,
    /* short WING lines (horizontal): BOTTOM wing */
    linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.82) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 50% 78% / 26% 2px no-repeat,
    /* two vertical RESTRAINING lines flanking center (at 30% and 70%) */
    linear-gradient(90deg, transparent 0 calc(30% - 1px), rgba(255,255,255,.8) calc(30% - 1px) calc(30% + 1px), transparent calc(30% + 1px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 0 calc(70% - 1px), rgba(255,255,255,.8) calc(70% - 1px) calc(70% + 1px), transparent calc(70% + 1px)) 0 0 / 100% 100% no-repeat,
    /* vertical CENTER line */
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 100% no-repeat,
    /* outer boundary box (white) drawn via inset edge gradients on each side */
    linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.85) 7px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    linear-gradient(-90deg, transparent 0 7px, rgba(255,255,255,.85) 7px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.78) 7px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, transparent 0 7px, rgba(255,255,255,.78) 7px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    /* SURFACE: horizontal mowing stripes (alternating greens) -- bottom layer.
       Surface follows the element color picker via --venue-node-bg (default = turf green). */
    repeating-linear-gradient(0deg, var(--venue-node-bg,#46a85f) 0 11px, color-mix(in srgb, var(--venue-node-bg,#46a85f) 88%, #000 12%) 11px 22px);
  color: var(--venue-node-fg,#0f3d25);
  border: 2px solid color-mix(in srgb, var(--venue-node-bg,#46a85f) 56%, #14532d 44%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30), 0 12px 24px rgba(20,83,45,.18);
}

/* LEFT goal crease: circular white RING with a vertical goal line through it */
.venue-node-sports-field.venue-node-field-lacrosse::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  left: 16%;
  transform: translate(-50%, -50%);
  width: 22%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    /* vertical goal line across the crease (top layer) */
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    /* crease ring: closest-side keeps it a true ring at the box edge */
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(100% - 4px), rgba(255,255,255,.88) calc(100% - 4px) calc(100% - 2px), transparent calc(100% - 2px));
}

/* RIGHT goal crease: mirror of the left */
.venue-node-sports-field.venue-node-field-lacrosse::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 50%;
  left: 84%;
  transform: translate(-50%, -50%);
  width: 22%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(100% - 4px), rgba(255,255,255,.88) calc(100% - 4px) calc(100% - 2px), transparent calc(100% - 2px));
}

/* ===== Softball (diamond override — baseball is the .venue-node-diamond-field base art) =====
   Same fan-silhouette composition as baseball (transparent element, wedge-masked ::before,
   disc-masked ::after), tuned to a softball complex: a fully skinned (all-dirt) infield
   with no grass interior, bases pulled tighter to home (60 ft = 0.18 box), a flat pitching
   circle instead of a mound, and a closer fence (0.60 box → 57.3% of the farthest-corner)
   whose foul poles sit at (50±42.4% 49.6%) — a smaller park, so more of the site lawn
   shows around the fan. Only the backgrounds and the ::after disc radius change; the
   wedge mask is inherited from the base rule. */
.venue-node-diamond-field.venue-node-field-softball::before {
  background:
    /* bases (white dots): tighter diamond than baseball */
    radial-gradient(circle at 50% 66.5%, rgba(255,255,255,0.96) 0 1.6%, transparent 2.0% 100%),
    radial-gradient(circle at 62.7% 79.3%, rgba(255,255,255,0.96) 0 1.5%, transparent 1.9% 100%),
    radial-gradient(circle at 37.3% 79.3%, rgba(255,255,255,0.96) 0 1.5%, transparent 1.9% 100%),
    /* flat pitching circle: white ring on the dirt, no mound */
    radial-gradient(circle at 50% 79%, transparent 0 4.3%, rgba(255,255,255,0.85) 4.3% 5.3%, transparent 5.7% 100%),
    /* fully skinned dirt infield (no grass interior) */
    radial-gradient(circle at 50% 74%, #d9a463 0 22.4%, color-mix(in srgb, #d9a463 78%, #14532d 22%) 22.4% 23.9%, transparent 24.4% 100%),
    /* fair territory: arc-mowed grass to the track, fence line, then the site lawn */
    radial-gradient(circle at 50% 92%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 82%, #ffffff 18%) 0 22%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 92%, #ffffff 8%) 22% 30%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 82%, #ffffff 18%) 30% 38%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 92%, #ffffff 8%) 38% 46%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 82%, #ffffff 18%) 46% 53%,
        color-mix(in srgb, #d9a463 86%, #14532d 14%) 53% 57.3%,
        color-mix(in srgb, var(--venue-node-bg, #86d39f) 30%, #14532d 70%) 57.3% calc(57.3% + 2.5px),
        transparent calc(57.3% + 2.5px) 100%);
}

.venue-node-diamond-field.venue-node-field-softball::after {
  -webkit-mask-image: radial-gradient(circle at 50% 92%, #000 0 58.4%, transparent 59% 100%);
  mask-image: radial-gradient(circle at 50% 92%, #000 0 58.4%, transparent 59% 100%);
  background:
    /* home plate on the batter's dirt */
    radial-gradient(circle at 50% 92%, rgba(255,255,255,0.98) 0 1.8%, transparent 2.2% 100%),
    /* foul poles: on the ±45° lines where they meet the closer softball fence */
    radial-gradient(circle at 7.6% 49.6%, rgba(250,204,21,0.95) 0 1.0%, transparent 1.4% 100%),
    radial-gradient(circle at 92.4% 49.6%, rgba(250,204,21,0.95) 0 1.0%, transparent 1.4% 100%),
    /* foul lines: thin rays along the fan edges, ending at the fence via the disc mask */
    conic-gradient(from 315deg at 50% 92%,
        transparent 0deg 0.7deg,
        rgba(255,255,255,0.9) 0.7deg 1.6deg,
        transparent 1.6deg 88.4deg,
        rgba(255,255,255,0.9) 88.4deg 89.3deg,
        transparent 89.3deg 360deg),
    /* batter's dirt circle around home, straddling foul ground */
    radial-gradient(circle at 50% 92%, #d9a463 0 5.9%, color-mix(in srgb, #d9a463 78%, #14532d 22%) 5.9% 6.7%, transparent 7.1% 100%);
}

/* ===== Minimap field tiles (public focus-mode minimap + builder mini-map) =====
   Sports-field thumbnails reuse the real surface art above so the minimap resembles the venue
   instead of showing an anonymous color block. Placed after every per-sport rule on purpose:
   these are same-specificity overrides that must win the cascade — they strip the full-size
   chrome (2px border, lift shadows) down to thumbnail scale and clip the art to the tile. */
.public-venue-minimap-item.venue-node-sports-field,
.venue-builder-minimap-item.venue-node-sports-field {
    border-width: 1px;
    border-radius: 2px;
    box-shadow: none;
    overflow: hidden;
}

/* The diamond element draws no box (the park is a masked fan on a transparent element), so
   its minimap tile stays transparent too — the tiny fan silhouette IS the thumbnail. The
   pseudo-element art is all %-based and scales down untouched; drop the full-size fan
   shadow at thumbnail scale so it doesn't smear the minimap. */
.public-venue-minimap-item.venue-node-diamond-field,
.venue-builder-minimap-item.venue-node-diamond-field {
    background: transparent;
    border: none;
}

.public-venue-minimap-item.venue-node-diamond-field::before,
.venue-builder-minimap-item.venue-node-diamond-field::before {
    filter: none;
}

/* ===== Brand loader — infinite spinning Eventrika "E" (BrandLoader.razor) =====
   The mark spins with a slight ease-in-out so it settles upright each turn while
   breathing in scale; the wrapper emits a pulsing brand-purple glow. Brand color
   stays constant across light/dark, so only the caption uses a themed token. */
.brand-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.brand-loader--centered {
    width: 100%;
    min-height: 38vh;
}

.brand-loader__glow {
    width: var(--brand-loader-size, 64px);
    height: var(--brand-loader-size, 64px);
    display: grid;
    place-items: center;
    animation: brand-loader-glow 1.5s ease-in-out infinite;
    will-change: filter;
}

.brand-loader__mark {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: brand-loader-spin 1.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
    will-change: transform;
}

.brand-loader__label {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--tr-muted, #5f5b54);
}

@keyframes brand-loader-spin {
    0% { transform: rotate(0deg) scale(0.9); }
    50% { transform: rotate(180deg) scale(1); }
    100% { transform: rotate(360deg) scale(0.9); }
}

@keyframes brand-loader-glow {
    0%, 100% { filter: drop-shadow(0 4px 8px rgba(42, 75, 209, 0.18)); }
    50% { filter: drop-shadow(0 8px 20px rgba(42, 75, 209, 0.45)); }
}

@keyframes brand-loader-fade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Honor reduced-motion: drop the spin/glow, keep a gentle opacity pulse. */
@media (prefers-reduced-motion: reduce) {
    .brand-loader__glow {
        animation: none;
    }

    .brand-loader__mark {
        animation: brand-loader-fade 1.6s ease-in-out infinite;
    }
}

/* Public error-boundary recovery card (buyer-facing). Uses design tokens so it
   inherits dark mode automatically. */
.app-error-card {
    max-width: 560px;
    margin: 64px auto;
    padding: 32px;
    background: var(--tr-card);
    border: 1px solid var(--tr-line);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.app-error-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tr-accent-2);
    margin: 0 0 8px;
}

.app-error-card h1 {
    font-size: 1.5rem;
    color: var(--tr-ink);
    margin: 0 0 12px;
}

.app-error-card p {
    color: var(--tr-muted);
    margin: 0 auto 20px;
    max-width: 44ch;
}

.app-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.app-error-button {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 12px 22px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--tr-accent) 0%, var(--tr-accent-2) 100%);
}

.app-error-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 600;
    color: var(--tr-accent-2);
    border: 1px solid var(--tr-line);
    text-decoration: none;
}

/* Order-complete follow-up actions (demo funnel should not dead-end) */
.checkout-complete-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.checkout-complete-actions a {
    text-decoration: none;
}

/* Button that renders as a text link (used for antiforgery-protected sign-out links) */
.account-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--tr-accent-2);
    text-decoration: underline;
    cursor: pointer;
}

/* Sign-out button inside the account dropdown (styled to match MudMenuItem) */
.header-logout-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    color: var(--tr-ink);
    text-align: left;
}

.header-logout-button:hover {
    background: rgba(42, 75, 209, 0.08);
}

/* Ticket not-found recovery actions */
.ticket-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ticket-secondary-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 600;
    color: var(--tr-accent-2);
    border: 1px solid var(--tr-line);
    text-decoration: none;
}

/* ============================================================================
   Dark-mode contrast pass 2026-07-02: scoped-CSS surfaces that hardcoded light
   values (dark text / white cards) with no body.eventrika-dark twin. Appended at
   end so the cascade favors these. See dark-mode-theme-architecture memory.
   (Support hero/FAQ/side-panel body copy is fixed near the other .support-* twins.)
   ============================================================================ */

/* TicketView — the "door mode" chip kept a near-white pill (#fafaf9) + dark text on
   the flipped ticket card. The door OVERLAY stays intentionally white, so only this
   button needs a dark twin. */
body.eventrika-dark .ticket-door-button {
    background: #1c1d23;
    border-color: rgba(201, 198, 190, 0.28);
    color: #e9e8e3;
}
body.eventrika-dark .ticket-door-button:hover {
    background: #2c2e38;
}

/* Checkout — eyebrow (#1f3488) and completed-step label (#1e2f6d) rendered
   dark-on-dark on the flipped hero / steps bar (only the .is-demo eyebrow had a
   twin). Keep the blue hue, lift into the light range. */
body.eventrika-dark .checkout-eyebrow { color: #93adf6; }
body.eventrika-dark .checkout-step.is-complete { color: #93adf6; }

/* Checkout — hold-timer chip: translucent tint over the dark hero + dark-blue/red
   text was ~1.4:1. Lift both tint and text. */
body.eventrika-dark .checkout-timer {
    background: rgba(98, 133, 238, 0.12);
    border-color: rgba(98, 133, 238, 0.30);
    color: #becefb;
}
body.eventrika-dark .checkout-timer.is-urgent {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.32);
    color: #f6c9cd;
}

/* Checkout — error alert was a light-red card (#fdf0f1) floating on the dark page. */
body.eventrika-dark .checkout-alert {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.30);
    color: #f6c9cd;
}

/* Footer — link :hover reverted to #223cab (~2.3:1) on the dark footer. */
body.eventrika-dark .site-footer a:hover { color: #93adf6; }

/* Reconnect modal (Blazor built-in) — hardcoded white bg, but its <p> text inherits
   the light body color in dark mode -> white-on-white. Pin the text dark; the modal
   stays a light card like #blazor-error-ui. */
body.eventrika-dark #components-reconnect-modal,
body.eventrika-dark #components-reconnect-modal p,
body.eventrika-dark #components-reconnect-modal span {
    color: #1a1917;
}

/* CreateEvent — the selected distribution card got a near-white gradient behind
   light MudText (light-on-white). Give the selected state a dark surface + accent. */
body.eventrika-dark .fulfillment-card.is-selected {
    background: #24262e;
    border-color: #6285ee;
    box-shadow: 0 8px 24px rgba(42, 75, 209, 0.30);
}

/* ── Global navigation progress bar ──────────────────────────────────────────
   Toggled from nav-progress.js on Blazor enhanced-navigation start/end. A thin
   fixed bar at the very top gives immediate "your click registered" feedback
   while the destination page is fetched and server-rendered (the address bar
   changes instantly, but heavy pages take a beat to swap in). Sits above the
   MudBlazor app bar and overlays. The azure→coral gradient reads on both themes,
   so no dark override is needed. */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    z-index: 20000;
    background: linear-gradient(90deg, var(--tr-primary), var(--tr-accent));
    box-shadow: 0 0 8px rgba(42, 75, 209, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: width 0.2s ease-out, opacity 0.25s ease-out;
    will-change: width;
}

.nav-progress--active {
    opacity: 1;
}

.nav-progress--done {
    transition: width 0.15s ease-out, opacity 0.3s ease-in 0.12s;
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress {
        transition: opacity 0.12s linear;
    }
}