:root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-strong: #eef3f1;
    --surface: #ffffff;
    --surface-muted: #f8faf8;
    --surface-strong: #edf7f5;
    --text: #17211f;
    --text-strong: #0c1412;
    --muted: #5f6d69;
    --muted-strong: #394541;
    --primary: #0f766e;
    --primary-strong: #0a5d56;
    --primary-soft: #dff3f0;
    --accent: #8f1d3f;
    --accent-strong: #70152f;
    --accent-soft: #f8e8ee;
    --success: #2f855a;
    --warning: #b7791f;
    --danger: #b42318;
    --danger-soft: #fff1f0;
    --border: #dbe3df;
    --border-strong: #c6d2cd;
    --focus: #14b8a6;
    --shadow: 0 8px 24px rgba(15, 34, 31, 0.1);
    --shadow-soft: none;
    --radius: 8px;
    --radius-sm: 6px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    font-family: "Object Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

a,
button,
summary {
    -webkit-tap-highlight-color: rgba(15, 118, 110, 0.16);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(20, 184, 166, 0.35);
    outline-offset: 3px;
}

img,
svg {
    max-width: 100%;
}

.site-shell {
    margin: 0 auto;
    width: min(1120px, calc(100% - 2rem));
}

.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header .site-shell {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    min-height: 64px;
}

.site-brand {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.site-brand-logo {
    display: block;
    height: auto;
    max-height: 2.8rem;
    width: min(11rem, 45vw);
}

.site-nav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    justify-content: flex-end;
    /* Allow the nav to shrink below its content width so the collapse
       script can detect when the links no longer fit. */
    min-width: 0;
}

/* The dropdown variant of the nav links, shown by site.js only when the
   inline links do not fit the available width. */
.site-nav-dropdown {
    display: none;
}

.site-nav-collapsed .site-nav-link {
    display: none;
}

.site-nav-collapsed .site-nav-dropdown {
    display: block;
}

.site-nav a {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    background: var(--surface-strong);
    color: var(--primary-strong);
}

.site-nav-form {
    margin: 0;
}

.site-user-menu {
    position: relative;
}

.site-user-menu summary {
    cursor: pointer;
    list-style: none;
}

.site-user-menu summary::-webkit-details-marker {
    display: none;
}

.site-user-chip {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: inline-flex;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
}

.site-user-link {
    text-decoration: none;
}

.site-user-chip:hover,
.site-user-menu[open] .site-user-chip,
.site-user-link:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.site-user-icon {
    align-items: center;
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    color: var(--primary-strong);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.8rem;
    justify-content: center;
    overflow: hidden;
    width: 1.8rem;
}

.site-user-icon svg {
    fill: currentColor;
    height: 1rem;
    width: 1rem;
}

.site-user-avatar {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.site-user-name {
    color: var(--muted-strong);
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-user-menu-popover {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 0.15rem;
    min-width: 12.5rem;
    padding: 0.45rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 30;
}

.site-user-menu-popover .site-nav-form {
    width: 100%;
}

.site-user-menu-link {
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.7rem 0.85rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.site-user-menu-link:hover,
.site-user-menu-link:focus-visible {
    background: var(--surface-strong);
    color: var(--primary-strong);
}

.site-user-menu-button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.site-main {
    flex: 1 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 6rem);
}

.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    padding: 2rem 0 2.5rem;
}

.site-footer-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.site-footer-link {
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.6rem;
    text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
    background: var(--surface-strong);
    color: var(--primary-strong);
}

.events-hero,
.event-detail-hero,
.listing-create-hero,
.seller-profile-hero,
.contact-hero,
.checkout-header {
    margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3rem);
    max-width: 820px;
}

.events-kicker,
.auth-kicker,
.contact-kicker,
.contact-panel-label {
    color: var(--primary-strong);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 0.9rem;
    text-transform: uppercase;
}

.events-hero h1,
.event-detail-hero h1,
.listing-create-hero h1,
.seller-profile-hero h1,
.contact-hero h1,
.checkout-header h1,
.auth-panel h1 {
    color: var(--text-strong);
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}

/* The events page headline introduces a list rather than carrying a landing
   page, so it sits a step below the other hero titles. */
.events-hero h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.events-lead,
.listing-create-lead,
.contact-lead,
.auth-copy,
.contact-copy,
.contact-list,
.event-listings-copy,
.event-detail-description p,
.event-listings-empty p,
.purchase-listing-note p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.events-lead,
.listing-create-lead,
.contact-lead,
.auth-copy {
    margin: 1.1rem 0 0;
    max-width: 68ch;
}

.button {
    align-items: center;
    background: var(--primary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.72rem 1.15rem;
    text-decoration: none;
}

.button-icon,
.meta-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

.button-icon svg,
.meta-icon svg {
    fill: currentColor;
    height: 1rem;
    width: 1rem;
}

.button:hover,
.button:focus-visible {
    background: var(--primary-strong);
}

.button:disabled {
    background: #87918d;
    cursor: default;
}

.button-danger {
    background: #b42318;
}

.button-danger:hover,
.button-danger:focus-visible {
    background: #8f1d14;
}

.auth-facebook-button {
    background: #1877f2;
}

.auth-facebook-button:hover,
.auth-facebook-button:focus-visible {
    background: #0e63cf;
}

.auth-consent-form {
    margin-top: 1.3rem;
}

.auth-consent {
    align-items: flex-start;
    color: var(--muted-strong);
    display: flex;
    font-size: 0.95rem;
    gap: 0.65rem;
    line-height: 1.6;
}

.auth-consent input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.auth-consent a {
    color: var(--primary-strong);
    font-weight: 600;
}

.event-detail-actions,
.listing-form-actions,
.auth-actions,
.contact-actions,
.contact-shortcuts {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.event-subscription-form,
.listing-form-actions form {
    margin: 0;
}

.stripe-connect-form {
    display: grid;
    gap: 0.85rem;
}

.stripe-tos-consent {
    align-items: flex-start;
    color: var(--muted-strong);
    display: flex;
    font-size: 0.92rem;
    gap: 0.55rem;
    line-height: 1.5;
    max-width: 560px;
}

.stripe-tos-consent input {
    margin-top: 0.22rem;
}

.stripe-verification-dialog,
.required-email-dialog,
.login-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(15, 34, 31, 0.22);
    color: var(--text);
    max-width: min(520px, calc(100% - 2rem));
    padding: 0;
    width: 100%;
}

.required-email-dialog,
.login-dialog {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.stripe-verification-dialog::backdrop,
.required-email-dialog::backdrop,
.login-dialog::backdrop {
    background: rgba(12, 20, 18, 0.42);
}

.required-email-dialog::backdrop,
.login-dialog::backdrop {
    background: rgba(12, 20, 18, 0.24);
}

.stripe-verification-dialog-body,
.required-email-dialog-body,
.login-dialog-body {
    padding: clamp(1.25rem, 4vw, 1.8rem);
    position: relative;
}

.stripe-verification-dialog h2,
.required-email-dialog h2,
.login-dialog h2 {
    color: var(--text-strong);
    font-size: 1.45rem;
    line-height: 1.18;
    margin: 0.8rem 0 0;
}

.stripe-verification-dialog p:not(.event-badge),
.required-email-dialog p:not(.auth-kicker),
.login-dialog p:not(.auth-kicker) {
    color: var(--muted);
    line-height: 1.7;
    margin: 0.85rem 0 0;
}

.login-dialog .auth-consent span {
    color: var(--muted-strong);
    line-height: 1.6;
    margin: 0;
}

.login-dialog .auth-actions .button {
    width: 100%;
}

.required-email-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.required-email-dialog .form-errors {
    margin: 1rem 0 0;
}

.required-email-dialog .form-errors p {
    color: var(--danger);
    margin: 0;
}

.stripe-verification-close-form,
.login-dialog-close-form {
    margin: 0;
    position: absolute;
    right: 0.85rem;
    top: 0.85rem;
}

.login-dialog-close,
.stripe-verification-close {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-strong);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 2rem;
}

.stripe-verification-close:hover,
.stripe-verification-close:focus-visible,
.login-dialog-close:hover,
.login-dialog-close:focus-visible {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-strong);
}

.contact-layout {
    display: grid;
    gap: 1.25rem;
}

.auth-panel,
.event-card,
.event-detail-panel,
.listing-create-panel,
.seller-profile-panel,
.seller-profile-photo-panel,
.contact-panel,
.ticket-listing-card,
.event-listings-empty,
.events-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.auth-panel,
.event-detail-panel,
.listing-create-panel,
.seller-profile-panel,
.contact-panel,
.events-empty,
.event-listings-empty {
    padding: clamp(1.5rem, 3vw, 2rem);
}

.contact-panel h2,
.listing-create-panel h2,
.event-detail-panel h2,
.seller-profile-panel h2,
.event-listings-empty h3,
.events-empty h2,
.purchase-listing-note h2 {
    color: var(--text-strong);
    font-size: 1.45rem;
    line-height: 1.18;
    margin: 0.8rem 0 0;
}

.events-empty p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0.8rem 0 0;
}

.auth-panel {
    margin: 3.5rem auto 4.5rem;
    max-width: 880px;
    padding: clamp(1.4rem, 4vw, 2.5rem);
}

.auth-actions {
    align-items: center;
}

.listing-secondary-link,
.event-detail-secondary-link,
.ticket-listing-seller-link {
    color: var(--primary-strong);
    font-weight: 600;
    text-decoration-color: rgba(15, 118, 110, 0.35);
    text-underline-offset: 0.22em;
}

.listing-secondary-link:hover,
.listing-secondary-link:focus-visible,
.event-detail-secondary-link:hover,
.event-detail-secondary-link:focus-visible,
.ticket-listing-seller-link:hover,
.ticket-listing-seller-link:focus-visible {
    color: var(--accent);
    text-decoration-color: currentColor;
}

button.listing-secondary-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.account-details {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
}

.event-detail-facts,
.seller-profile-facts {
    display: grid;
    gap: 0;
    margin: 1.1rem 0 0;
}

.account-detail,
.event-detail-facts div,
.seller-profile-facts div {
    align-items: baseline;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    justify-content: space-between;
    padding: 0.6rem 0;
}

.account-detail:first-child,
.event-detail-facts div:first-child,
.seller-profile-facts div:first-child {
    border-top: 0;
    padding-top: 0;
}

.account-detail dt,
.event-detail-facts dt,
.seller-profile-facts dt {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.account-detail dd,
.event-detail-facts dd,
.seller-profile-facts dd {
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0 auto;
    text-align: right;
}

.events-list {
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
}

.events-pagination {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin: 0 0 4.5rem;
}

.events-pagination-pages {
    align-items: center;
    display: flex;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.events-pagination-link,
.events-pagination-arrow {
    align-items: center;
    border-radius: 999px;
    color: var(--text-strong);
    display: inline-flex;
    font-size: 0.94rem;
    font-weight: 600;
    height: 2.25rem;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 0.35rem;
    text-decoration: none;
}

.events-pagination-arrow {
    color: var(--muted-strong);
    font-size: 1.35rem;
    line-height: 1;
}

a.events-pagination-link:hover,
a.events-pagination-link:focus-visible,
a.events-pagination-arrow:hover,
a.events-pagination-arrow:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.events-pagination-link.is-current {
    background: var(--primary);
    color: #ffffff;
}

.events-pagination-arrow.is-disabled {
    color: var(--muted);
    opacity: 0.45;
}

.events-pagination-ellipsis {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    min-width: 1.75rem;
}

.events-pagination-status {
    color: var(--muted);
    display: none;
    font-size: 0.94rem;
    font-weight: 600;
    padding: 0 0.5rem;
}

.events-filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
    padding: 1.25rem;
}

.events-filter-form {
    align-items: end;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.8fr) minmax(160px, 0.7fr) auto;
}

.events-filter-field {
    display: grid;
    gap: 0.42rem;
}

.events-filter-field label {
    color: var(--muted-strong);
    font-size: 0.88rem;
    font-weight: 600;
}

.events-filter-field input,
.events-filter-field select,
.events-select-button,
.events-date-button {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    min-height: 2.75rem;
    padding: 0.72rem 0.85rem;
    width: 100%;
}

.events-filter-field select,
.events-select-button,
.events-date-button {
    background:
        linear-gradient(45deg, transparent 50%, var(--muted-strong) 50%),
        linear-gradient(135deg, var(--muted-strong) 50%, transparent 50%),
        var(--surface);
    background-position:
        calc(100% - 18px) 1.2rem,
        calc(100% - 12px) 1.2rem,
        100% 0;
    background-repeat: no-repeat;
    background-size:
        6px 6px,
        6px 6px,
        2.5rem 100%;
    padding-right: 2.7rem;
}

.events-select {
    position: relative;
}

.events-select-button,
.events-date-button {
    cursor: pointer;
    text-align: left;
}

.events-select[data-open="true"] .events-select-button,
.events-date-picker[data-open="true"] .events-date-button {
    border-color: var(--primary);
}

.events-select-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    left: 0;
    margin-top: 0.35rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    z-index: 25;
}

.events-select[data-open="true"] .events-select-menu {
    display: grid;
    gap: 0.15rem;
}

.events-select-option {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    min-height: 2.25rem;
    padding: 0.45rem 0.6rem;
    text-align: left;
}

.events-select-option:hover,
.events-select-option:focus-visible,
.events-select-option.is-selected {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.events-select-option.is-selected {
    font-weight: 600;
}

.events-filter-field input:focus,
.events-filter-field select:focus,
.events-select-button:focus-visible,
.events-date-button:focus-visible {
    border-color: var(--primary);
}

.events-date-picker {
    position: relative;
}

.events-date-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    margin-top: 0.35rem;
    min-width: 19rem;
    padding: 0.75rem;
    position: absolute;
    right: 0;
    z-index: 25;
}

.events-date-picker[data-open="true"] .events-date-menu {
    display: block;
}

.events-date-menu-header {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    margin-bottom: 0.6rem;
}

.events-date-month {
    color: var(--text-strong);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.events-date-nav,
.events-date-day,
.events-date-clear {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.events-date-nav {
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    min-height: 2.25rem;
}

.events-date-weekdays,
.events-date-grid {
    display: grid;
    gap: 0.2rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.events-date-weekdays {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-align: center;
}

.events-date-day {
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    min-height: 2.2rem;
    padding: 0;
}

.events-date-day:hover,
.events-date-day:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.events-date-day.is-selected {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
}

.events-date-day.is-offset {
    color: var(--muted);
}

.events-date-actions {
    border-top: 1px solid var(--border);
    margin-top: 0.7rem;
    padding-top: 0.7rem;
}

.events-date-clear {
    background: transparent;
    color: var(--primary-strong);
    font-weight: 600;
    padding: 0.25rem 0;
}

.events-filter-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.events-filter-submit {
    border: 0;
    white-space: nowrap;
}

.events-filter-clear {
    color: var(--primary-strong);
    font-weight: 600;
    text-decoration-color: rgba(15, 118, 110, 0.35);
    text-underline-offset: 0.22em;
    white-space: nowrap;
}

.events-filter-clear:hover,
.events-filter-clear:focus-visible {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.events-filter-summary,
.events-filter-error {
    font-size: 0.94rem;
    margin: 0.85rem 0 0;
}

.events-filter-summary {
    color: var(--muted);
}

.events-filter-error {
    color: var(--danger);
    font-weight: 600;
}

.event-card {
    overflow: hidden;
}

.event-card:hover {
    border-color: var(--primary);
}

.event-card-link {
    align-items: center;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(90px, 110px) 1fr auto;
    min-height: 118px;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    width: 100%;
}

.event-date-block {
    background: var(--accent-soft);
    border: 1px solid rgba(143, 29, 63, 0.16);
    border-radius: var(--radius);
    min-height: 88px;
    padding: 0.8rem;
}

.event-date-weekday {
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0;
}

.event-date-day {
    color: var(--accent);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0.2rem 0 0;
}

.event-date-time {
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0.45rem 0 0;
}

.event-main-block h2 {
    color: var(--text-strong);
    font-size: clamp(1.2rem, 2vw, 1.15rem);
    line-height: 1.18;
    margin: 0;
}

.event-location-line,
.event-nation-line,
.ticket-listing-meta,
.ticket-listing-notes,
.ticket-listing-price {
    color: var(--muted);
}

.event-location-line,
.event-nation-line {
    margin: 0.45rem 0 0;
}

.event-location-line {
    align-items: center;
    color: var(--muted-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-weight: 500;
}

.meta-icon {
    color: var(--accent);
}

.event-cta {
    align-items: center;
    background: var(--surface-strong);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius);
    color: var(--primary-strong);
    display: inline-flex;
    font-weight: 600;
    min-height: 2.6rem;
    min-width: 104px;
    justify-content: center;
    padding: 0.6rem 0.9rem;
    text-align: center;
}

.event-badge {
    background: var(--accent-soft);
    border: 1px solid rgba(143, 29, 63, 0.12);
    border-radius: 999px;
    color: var(--accent-strong);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    margin: 0;
    padding: 0.38rem 0.62rem;
    text-transform: uppercase;
}

.event-detail-grid {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    margin-bottom: 4.5rem;
}

.event-listings-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.event-listings-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.event-listings-header h2 {
    color: var(--text-strong);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin: 0.7rem 0 0;
}

.event-detail-description,
.purchase-listing-note {
    border-top: 1px solid var(--border);
    margin-top: 1.35rem;
    padding-top: 1.35rem;
}

/* The description shown at the top of the details panel separates itself
   from the facts below it instead of from content above it. */
.event-detail-about {
    border-top: 0;
    border-bottom: 1px solid var(--border);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 1.35rem;
}

.event-listings-empty {
    border-style: dashed;
    box-shadow: none;
    margin-top: 1rem;
}

.ticket-listing-card {
    box-shadow: none;
    margin-top: 1rem;
    padding: 1rem;
}

.ticket-listing-card-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.ticket-listing-card h3 {
    color: var(--text-strong);
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
}

.ticket-listing-price {
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    color: var(--primary-strong);
    display: inline-flex;
    font-weight: 600;
    justify-self: start;
    margin: 0;
    padding: 0.35rem 0.55rem;
    width: fit-content;
}

.ticket-listing-meta {
    margin: 0.65rem 0 0;
}

.ticket-listing-notes {
    align-items: flex-start;
    background: var(--surface-muted);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.5rem;
    line-height: 1.7;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.85rem;
}

.ticket-listing-notes-icon {
    color: var(--danger);
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.ticket-listing-notes-icon svg {
    fill: currentColor;
    height: 1.05rem;
    width: 1.05rem;
}

.ticket-listing-purchase-form {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1rem;
}

.ticket-listing-purchase-field,
.listing-form-field {
    display: grid;
    gap: 0.42rem;
}

.ticket-listing-purchase-field {
    min-width: 160px;
}

.ticket-listing-purchase-field label,
.listing-form-field label {
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 600;
}

.ticket-listing-quantity-input,
.listing-form-field input,
.listing-form-field textarea {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    min-height: 2.75rem;
    padding: 0.72rem 0.85rem;
    width: 100%;
}

.listing-form-field input[type="file"] {
    padding: 0.6rem;
}

.listing-form-field textarea {
    min-height: 140px;
    resize: vertical;
}

.ticket-listing-quantity-input:focus,
.listing-form-field input:focus,
.listing-form-field textarea:focus {
    border-color: var(--primary);
}

.listing-form-field + .listing-form-field {
    margin-top: 1rem;
}

.listing-create-form {
    margin-top: 1.35rem;
}

.ticket-listing-purchase-button,
.account-listing-price-button {
    border: 0;
}

.ticket-listing-unavailable {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted-strong);
    font-weight: 500;
    margin: 1rem 0 0;
    padding: 0.8rem 0.9rem;
}

.listing-create-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    margin-bottom: 4.5rem;
}

.listing-create-summary,
.listing-create-layout aside,
.event-detail-grid > .event-detail-panel:first-child {
    position: sticky;
    top: 96px;
}

.purchase-summary-total dd {
    color: var(--primary-strong);
    font-size: 1.3rem;
    font-weight: 600;
}

.stripe-checkout-frame {
    min-height: 480px;
}

.field-help,
.field-errors,
.form-errors {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0.35rem 0 0;
}

.field-errors,
.form-errors {
    color: var(--danger);
}

.field-errors ul,
.form-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.form-errors {
    background: var(--danger-soft);
    border: 1px solid rgba(180, 35, 24, 0.22);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
}

.seller-profile-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    margin-bottom: 4.5rem;
}

.seller-profile-photo-panel {
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
}

.seller-profile-avatar {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.seller-profile-avatar-placeholder {
    align-items: center;
    background: var(--surface-strong);
    color: var(--primary-strong);
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.seller-profile-avatar-placeholder svg {
    fill: currentColor;
    height: 5rem;
    width: 5rem;
}

.contact-layout {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 4.5rem;
}

.legal-layout {
    margin-bottom: 4.5rem;
    max-width: 920px;
}

.legal-document .contact-copy {
    color: var(--muted-strong);
    max-width: 75ch;
}

.legal-updated {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.legal-section {
    border-top: 1px solid var(--border);
    margin-top: 1.6rem;
    padding-top: 1.45rem;
}

.legal-section h2 {
    color: var(--text-strong);
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 0.8rem;
}

.legal-section h3 {
    color: var(--text-strong);
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 1.2rem 0 0.6rem;
}

.legal-list {
    color: var(--muted-strong);
    line-height: 1.7;
    max-width: 75ch;
}

.legal-list + .contact-copy {
    margin-top: 1rem;
}

.legal-table-wrap {
    overflow-x: auto;
}

.legal-table {
    border-collapse: collapse;
    color: var(--muted-strong);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 1rem;
    min-width: 680px;
    width: 100%;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--border);
    padding: 0.75rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--surface-muted);
    color: var(--text-strong);
    font-weight: 650;
}

.contact-list {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.contact-list li + li {
    margin-top: 0.6rem;
}

.contact-shortcut {
    align-items: center;
    background: var(--surface-strong);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius);
    color: var(--primary-strong);
    display: inline-flex;
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.72rem 0.9rem;
    text-decoration: none;
}

.contact-shortcut:hover,
.contact-shortcut:focus-visible {
    background: var(--primary-soft);
}

.account-listing-qr-section {
    margin-top: 1.15rem;
}

.account-listing-qr-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(104px, 128px));
    justify-content: start;
    margin-top: 0.75rem;
}

.account-listing-qr-link {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: grid;
    gap: 0.55rem;
    justify-items: center;
    max-width: 128px;
    min-height: 120px;
    padding: 0.7rem;
    text-decoration: none;
}

.account-listing-qr-link:hover,
.account-listing-qr-link:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.account-listing-qr-image {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: block;
    height: 88px;
    max-width: 88px;
    object-fit: contain;
    width: 88px;
}

.account-listing-pdf-badge {
    align-items: center;
    background: var(--text-strong);
    border-radius: var(--radius);
    color: #ffffff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 600;
    justify-content: center;
    min-height: 4rem;
    padding: 0.9rem 1rem;
    width: 4rem;
}

.account-listing-price-form {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.account-listing-price-field {
    margin: 0;
    min-width: 220px;
}

.account-listing-price-button {
    margin-top: 1.8rem;
}

.account-listing-cancel-form {
    margin-top: 0.85rem;
}

.account-listings-empty {
    margin-top: 0;
}

@media (max-width: 820px) {
    .site-header .site-shell {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        min-height: auto;
        padding: 0.65rem 0 0.55rem;
        gap: 0.55rem;
    }

    .site-brand {
        font-size: 1rem;
    }

    .site-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: -0.2rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 0.1rem 0.2rem 0.25rem;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a,
    .site-user-menu,
    .site-nav-form {
        flex: 0 0 auto;
    }

    .site-user-name {
        max-width: 10rem;
    }

    .site-user-menu-popover {
        left: 0.75rem;
        min-width: 0;
        position: fixed;
        right: 0.75rem;
        top: 6.75rem;
        width: auto;
    }

    .event-detail-grid,
    .seller-profile-layout,
    .events-filter-form,
    .listing-create-layout {
        grid-template-columns: 1fr;
    }

    .listing-create-summary,
    .listing-create-layout aside,
    .event-detail-grid > .event-detail-panel:first-child {
        position: static;
    }

    .event-cta {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .site-shell {
        width: min(100% - 1.5rem, 1120px);
    }

    /* A full row of page numbers wraps badly on phones, so show a counter
       between the previous and next buttons instead. */
    .events-pagination-pages {
        display: none;
    }

    .events-pagination-status {
        display: inline-block;
    }

    .site-main {
        padding: 1.15rem 0 3rem;
    }

    .site-header .site-shell {
        align-items: center;
        flex-direction: row;
        gap: 0.75rem;
        min-height: 72px;
        padding: 0;
    }

    .site-brand {
        flex: 0 0 auto;
    }

    .site-brand-logo {
        max-height: 3.25rem;
        width: min(8rem, 34vw);
    }

    .site-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        margin-inline: 0;
        min-width: 0;
        overflow: visible;
        width: auto;
    }

    .site-user-menu-popover {
        left: auto;
        position: absolute;
        right: 0;
        top: calc(100% + 0.55rem);
        width: min(16rem, calc(100vw - 1.5rem));
    }

    /* The collapsed-nav dropdown sits mid-header, so a right-anchored
       popover would hang off screen; span the viewport instead. */
    .site-nav-dropdown .site-user-menu-popover {
        left: 0.75rem;
        position: fixed;
        right: 0.75rem;
        top: 5.1rem;
        width: auto;
    }

    .events-hero,
    .event-detail-hero,
    .listing-create-hero,
    .seller-profile-hero,
    .contact-hero,
    .auth-panel {
        margin-top: 1.25rem;
        margin-bottom: 3rem;
    }

    .auth-panel,
    .event-detail-panel,
    .listing-create-panel,
    .seller-profile-panel,
    .contact-panel,
    .events-empty,
    .event-listings-empty {
        padding: 1.15rem;
    }

    .events-hero h1,
    .event-detail-hero h1,
    .listing-create-hero h1,
    .seller-profile-hero h1,
    .contact-hero h1,
    .auth-panel h1 {
        font-size: clamp(1.85rem, 12vw, 2.55rem);
        line-height: 1.06;
    }

    .events-hero h1 {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .events-lead,
    .listing-create-lead,
    .contact-lead,
    .auth-copy,
    .contact-copy,
    .contact-list,
    .event-listings-copy,
    .event-detail-description p,
    .event-listings-empty p,
    .purchase-listing-note p {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .auth-actions,
    .event-detail-actions,
    .events-filter-actions,
    .listing-form-actions,
    .ticket-listing-card-head,
    .ticket-listing-purchase-form,
    .account-listing-price-form,
    .contact-actions,
    .contact-shortcuts {
        align-items: stretch;
        flex-direction: column;
    }

    .button,
    .events-filter-actions,
    .events-filter-submit,
    .ticket-listing-purchase-field,
    .ticket-listing-purchase-button,
    .account-listing-price-field,
    .account-listing-price-button,
    .contact-shortcut {
        width: 100%;
    }

    .account-listing-price-button {
        margin-top: 0;
    }

    .account-listing-cancel-form .button {
        width: 100%;
    }

    .event-card-link {
        gap: 0.9rem;
        grid-template-columns: 5.5rem minmax(0, 1fr) auto;
        align-items: start;
        padding: 0.85rem;
    }

    .event-date-block {
        min-height: auto;
        padding: 0.7rem;
    }

    .event-date-day,
    .event-date-time {
        display: block;
        margin: 0;
    }

    .event-date-weekday {
        font-size: 0.7rem;
    }

    .event-date-day {
        font-size: 1.2rem;
    }

    .event-date-time {
        font-size: 0.84rem;
    }

    .event-main-block h2 {
        font-size: 1.08rem;
    }

    .event-location-line,
    .event-nation-line {
        font-size: 0.86rem;
    }

    .event-cta {
        display: none;
    }

    .event-detail-panel .ticket-listing-price {
        width: 100%;
    }

    .account-listing-qr-grid {
        grid-template-columns: repeat(2, minmax(104px, 128px));
    }

    .site-user-menu .site-user-name {
        display: none;
    }

    .site-user-menu .site-user-chip {
        gap: 0;
        padding: 0.35rem 0.4rem;
    }
}

.faq-section {
    margin-top: 3rem;
}

.faq-header {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.faq-category-list {
    display: grid;
    gap: 1.5rem;
}

.faq-category {
    display: grid;
    gap: 0.9rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.faq-category h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.faq-item summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    padding: 1rem 1.25rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "\25BE";
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: "\25B4";
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
}

.faq-answer p {
    margin: 0.75rem 0 0;
}

.site-messages {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.site-message {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--text);
    margin: 0;
    padding: 0.85rem 1rem;
}

.site-message-error {
    background: var(--danger-soft);
    border-left-color: var(--danger);
}

select.ticket-listing-quantity-input {
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, var(--muted-strong) 50%),
        linear-gradient(135deg, var(--muted-strong) 50%, transparent 50%),
        var(--surface);
    background-position:
        calc(100% - 18px) 1.2rem,
        calc(100% - 12px) 1.2rem,
        100% 0;
    background-repeat: no-repeat;
    background-size:
        6px 6px,
        6px 6px,
        2.5rem 100%;
    cursor: pointer;
    padding-right: 2.7rem;
}

.checkout-event-time {
    color: var(--muted);
    font-size: 1rem;
    margin: 0.7rem 0 0;
}

.checkout-layout {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 4.5rem;
}

.checkout-summary-panel {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.checkout-summary-title {
    color: var(--text-strong);
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 0 1rem;
}

.checkout-summary-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.checkout-summary-row {
    color: var(--muted-strong);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-summary-row dt {
    font-weight: 500;
    margin: 0;
}

.checkout-summary-row dd {
    font-variant-numeric: tabular-nums;
    margin: 0;
    white-space: nowrap;
}

.checkout-summary-total {
    border-top: 1px solid var(--border);
    color: var(--text-strong);
    font-weight: 600;
    margin-top: 0.35rem;
    padding-top: 1rem;
}

.checkout-summary-meta {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 1.1rem 0 0;
}

.checkout-summary-note {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
}

.checkout-payment-panel {
    min-width: 0;
}

@media (min-width: 821px) {
    .checkout-layout {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    }

    .checkout-summary-panel {
        order: 2;
        position: sticky;
        top: 96px;
    }
}

.order-history {
    margin: 0 auto;
    max-width: 920px;
}

.order-history-header {
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2rem);
}

.order-history-header h1 {
    color: var(--text-strong);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0;
}

.order-history-notice {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.25rem;
}

.order-history-notice h2 {
    color: var(--text-strong);
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0;
}

.order-history-notice p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0.45rem 0 0;
}

.order-history-notice .stripe-connect-form {
    margin-top: 0.95rem;
}

.order-history-notice a {
    color: var(--primary-strong);
    font-weight: 600;
    text-decoration-color: rgba(15, 118, 110, 0.35);
    text-underline-offset: 0.22em;
}

.profile-card {
    margin-bottom: 1.5rem;
}

.profile-card-body {
    padding: 1.15rem 1.25rem;
}

.profile-card-body .account-details {
    margin: 0;
}

.order-history-list {
    display: grid;
    gap: 1rem;
    margin-bottom: 4.5rem;
}

.order-history-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.order-history-card:hover {
    border-color: var(--primary);
}

.order-history-main {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    padding: 1.15rem 1.25rem 0.9rem;
    text-decoration: none;
}

.order-history-heading h2 {
    color: var(--text-strong);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
}

.order-history-main:hover .order-history-heading h2,
.order-history-main:focus-visible .order-history-heading h2 {
    color: var(--primary-strong);
}

.order-history-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
}

.order-history-price {
    color: var(--text-strong);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    margin: 0;
    white-space: nowrap;
}

.order-history-meta {
    align-items: center;
    border-top: 1px solid var(--border);
    color: var(--muted-strong);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.5rem 1.1rem;
    padding: 0.8rem 1.25rem;
}

.order-history-status {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.22rem 0.6rem;
}

.order-status-paid {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.order-status-pending_payment {
    background: rgba(183, 121, 31, 0.12);
    color: var(--warning);
}

.order-status-refund_required,
.order-status-disputed {
    background: var(--danger-soft);
    color: var(--danger);
}

.order-status-refunded {
    background: var(--bg-strong);
    color: var(--muted-strong);
}

.order-history-test {
    color: var(--warning);
    font-weight: 600;
}

.listing-status-active {
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.listing-status-pending_stripe_onboarding,
.listing-status-pending_review,
.listing-status-draft {
    background: rgba(183, 121, 31, 0.12);
    color: var(--warning);
}

.listing-status-sold,
.listing-status-cancelled {
    background: var(--bg-strong);
    color: var(--muted-strong);
}

.listing-manage-body {
    border-top: 1px solid var(--border);
    padding: 0.15rem 1.25rem 1.25rem;
}

.listing-manage-label {
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 1.15rem 0 0;
}

.order-detail-hero {
    margin-bottom: 1rem;
}

@media (max-width: 820px) {
    .order-detail-page .listing-create-layout aside {
        order: -1;
    }
}

/* Nationsguiden
   A split-screen editorial guide. Each section pins its photo to the left half
   of the screen while the tinted reading panel on the right scrolls past it.
   Display type is a serif; section names are small labels in the brand green.
   On phones the split collapses: the photo runs inline above its section and
   the tinted panel becomes a full-width block. */
.guide-page {
    --guide-panel: var(--surface-strong);
}

/* The document breaks out of the page shell to reach both screen edges, so the
   main column clips sideways instead of growing a horizontal scrollbar. */
.guide-page .site-main {
    overflow-x: hidden;
    padding-bottom: 0;
    padding-top: 0;
}

.guide-doc {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* A thin white frame all the way round, so the tinted panels read as one
       box instead of bleeding off the screen edges. */
    padding: 0 clamp(0.5rem, 1.2vw, 1rem) clamp(0.5rem, 1.2vw, 1rem);
    width: 100vw;
}

/* Hero: a green band with the photo on the left and a white panel that laps
   over it from the right, carrying the headline. */
.guide-hero {
    position: relative;
}

.guide-hero-band {
    background: var(--primary);
    inset: 0 0 30% 0;
    position: absolute;
}

.guide-hero-inner {
    align-items: center;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1440px;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
    position: relative;
}

.guide-hero-media {
    margin: 0;
}

/* <picture> is inline by default; the photos are block-level and size
   themselves against their figure, so the wrapper must not sit on a baseline. */
.guide-hero-media picture,
.guide-media picture {
    display: block;
}

.guide-hero-media img {
    display: block;
    height: clamp(20rem, 38vw, 33rem);
    object-fit: cover;
    object-position: center 35%;
    width: 100%;
}

/* Square, like everything else in the guide. The count moves on its own as
   events come and go, so it doubles as a sign that the page is current. */
.guide-live-line {
    border-top: 1px solid var(--border);
    color: var(--text);
    /* Plain inline flow rather than flex: the line wraps on narrow panels, and
       as flex items the dot and the cue would each claim a row of their own. */
    display: block;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-top: clamp(1rem, 2vw, 1.35rem);
    text-decoration: none;
}

.guide-live-dot {
    background: var(--primary);
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    margin-right: 0.5rem;
    vertical-align: middle;
    width: 7px;
}

.guide-live-line strong {
    color: var(--text-strong);
    font-weight: 700;
}

.guide-live-cue {
    color: var(--primary-strong);
    font-weight: 600;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.guide-live-line:hover .guide-live-cue,
.guide-live-line:focus-visible .guide-live-cue {
    text-decoration: underline;
    text-underline-offset: 0.22em;
}

/* Overlaps the photo, the way the reference page sets its headline panel. */
.guide-hero-panel {
    background: var(--bg);
    margin-left: clamp(-5rem, -4vw, -2rem);
    padding: clamp(2rem, 3.5vw, 3.5rem);
    position: relative;
    z-index: 1;
}

.guide-hero-panel h1 {
    color: var(--text-strong);
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

/* Runs the full width of the panel, like the headline above it; the cap only
   bites on very wide screens, where it holds the line length at about 75
   characters. */
.guide-hero-panel .guide-lead {
    color: var(--muted-strong);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 1.35rem 0 0;
    max-width: 40rem;
}

.guide-section {
    display: grid;
    /* Very slightly wider photo column, which nudges the reading column right
       without reading as an asymmetric split. */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    /* The hero caps its content at the same width. Without this the reading
       column keeps drifting right as the screen widens, ending up past the
       headline it belongs to. */
    margin: 0 auto;
    max-width: 1440px;
    /* The header is sticky, so anchor jumps need room above the heading. */
    scroll-margin-top: 4rem;
}

/* Stays in view while its section's text scrolls past. */
.guide-media {
    align-self: start;
    margin: 0;
    padding: clamp(2rem, 4vw, 4.5rem);
    position: sticky;
    top: 5rem;
}

.guide-media img {
    display: block;
    height: auto;
    margin: 0 auto;
    /* The photo is bound by its height, not the column, so this has to grow
       alongside the column or the extra width just becomes empty space. */
    max-height: 72vh;
    max-width: 100%;
    width: auto;
}

/* Screenshots and cards are read, not cropped, so they keep a plain ground
   rather than being treated like the photographs. */
.guide-media-shot img {
    background: var(--bg);
}

.guide-body {
    background: var(--guide-panel);
    /* Lets the table below switch to its stacked form based on this column's
       width rather than the width of the window. */
    container-type: inline-size;
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 6rem) clamp(3rem, 6vw, 6rem);
}

/* Section name: a small brand-green label, as on the reference page. */
.guide-body h2 {
    color: var(--primary-strong);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.4;
    margin: 0;
    max-width: 36ch;
}

.guide-body h3 {
    color: var(--text-strong);
    font-size: clamp(1.35rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 2.75rem 0 0;
    max-width: 26ch;
}

.guide-body p {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 1.15rem 0 0;
    max-width: 36rem;
}

.guide-body h2 + p,
.guide-body h3 + p {
    margin-top: 0.9rem;
}

.guide-inline-cta {
    margin-top: 1.75rem;
}

.guide-inline-cta a {
    color: var(--primary-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.guide-inline-cta a::after {
    content: " \2192";
    text-decoration: none;
}

.guide-inline-cta a:hover {
    color: var(--primary);
}

.guide-table {
    border-collapse: collapse;
    margin-top: 2rem;
    width: 100%;
}

.guide-table thead th {
    border-bottom: 1px solid var(--border-strong);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 0.9rem 0.6rem 0;
    text-align: left;
    text-transform: uppercase;
}

.guide-table tbody tr + tr th,
.guide-table tbody tr + tr td {
    border-top: 1px solid var(--border);
}

.guide-table th[scope="row"] {
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
}

.guide-table th,
.guide-table td {
    padding: 0.9rem 0.9rem 0.9rem 0;
    vertical-align: top;
}

.guide-table th:last-child,
.guide-table td:last-child {
    padding-right: 0;
}

.guide-day,
.guide-time {
    color: var(--text);
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
}

.guide-day + .guide-day {
    margin-top: 0.3rem;
}

.guide-time {
    color: var(--text-strong);
    font-weight: 600;
}

/* The table stacks into one block per nation whenever its column is too narrow
   for three columns: the name heads the block and the two values sit below it
   with their column name as a caption. */
@container (max-width: 38rem) {
    .guide-table thead {
        display: none;
    }

    .guide-table,
    .guide-table tbody,
    .guide-table th,
    .guide-table td {
        display: block;
    }

    .guide-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem 0;
    }

    .guide-table tbody tr:first-child {
        padding-top: 0;
    }

    .guide-table tbody tr + tr {
        border-top: 1px solid var(--border);
    }

    /* The row already carries the rule, so the cells inside must not repeat it. */
    .guide-table tbody tr + tr th,
    .guide-table tbody tr + tr td {
        border-top: none;
    }

    .guide-table th[scope="row"] {
        font-size: 1.1rem;
        padding: 0;
    }

    .guide-table td {
        margin-top: 0.9rem;
        padding: 0;
    }

    /* Deliberately far from the value below it: two thirds the size, uppercase,
       widely tracked and muted, against dark sentence-case text. */
    .guide-table td::before {
        color: var(--muted);
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        margin-bottom: 0.4rem;
        text-transform: uppercase;
    }
}

/* The closing section drops the split: the marquee needs the full width. */
.guide-closing {
    background: var(--guide-panel);
    /* A white gap rather than a hairline: the tinted column above is the same
       tint, so the two blocks only read as separate with real space between
       them. Matches the frame the document keeps at its outer edges. */
    margin-top: clamp(0.5rem, 1.2vw, 1rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    scroll-margin-top: 4rem;
}

.guide-closing-inner {
    margin: 0 auto;
    width: min(1120px, calc(100% - 2rem));
}

.guide-closing h2 {
    color: var(--primary-strong);
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0;
}

.guide-closing p {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 1rem 0 0;
}

.guide-closing-lead {
    max-width: 46rem;
}

.guide-day-list {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.guide-day-heading {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.guide-day-events {
    background: var(--surface);
    border: 1px solid var(--border);
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.guide-day-event + .guide-day-event {
    border-top: 1px solid var(--border);
}

/* Time and tickets keep fixed columns so the rows line up down the list; the
   title takes whatever is left. */
.guide-day-link {
    align-items: baseline;
    display: grid;
    gap: 0.15rem 1rem;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.guide-day-link:hover,
.guide-day-link:focus-visible {
    background: var(--surface-muted);
}

.guide-day-time {
    color: var(--primary-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.guide-day-title {
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.guide-day-nation {
    color: var(--muted);
    font-size: 0.9rem;
    grid-column: 2;
}

.guide-day-tickets {
    color: var(--muted);
    font-size: 0.85rem;
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
}

.guide-day-tickets-available {
    color: var(--primary-strong);
    font-weight: 600;
}

/* Below this width the two halves are both too narrow to work: the split
   collapses, the photo stops pinning and runs inline above its section, and the
   tinted panel becomes one block with a small margin off the screen edges. */
@media (max-width: 900px) {
    .guide-hero-inner {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        padding: 0 0 clamp(2rem, 5vw, 3rem);
    }

    .guide-hero-band {
        inset: 0 0 auto 0;
        height: clamp(7rem, 20vw, 11rem);
    }

    .guide-hero-media {
        padding: clamp(1.5rem, 4vw, 2.5rem) 0.625rem 0;
    }

    .guide-hero-media img {
        height: clamp(13rem, 45vw, 18rem);
    }

    /* Text lines up with the section panels below; the photo keeps the wider
       10px gutter so it reads as the full-bleed image it is on desktop. */
    .guide-hero-panel {
        margin: 0 0.625rem;
        padding: clamp(1.75rem, 6vw, 2.5rem) 1.875rem 0;
    }

    .guide-hero-panel h1 {
        font-size: clamp(2.125rem, 8vw, 2.375rem);
    }

    .guide-hero-panel .guide-lead {
        font-size: 1rem;
    }

    /* The tint moves to the whole section so the photo sits on it too, and the
       panels run edge to edge and back to back down the page. */
    .guide-section {
        background: var(--guide-panel);
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-media {
        padding: 1.875rem 1.875rem 0;
        position: static;
    }

    /* Photographs crop to a landscape band so every section starts the same
       way; screenshots keep their own shape. */
    .guide-media img {
        aspect-ratio: 3 / 2;
        max-height: none;
        object-fit: cover;
        object-position: center 35%;
        width: 100%;
    }

    .guide-media-shot img {
        aspect-ratio: auto;
        max-height: 60vh;
        object-fit: contain;
        width: auto;
    }

    .guide-media-empty {
        display: none;
    }

    .guide-body {
        background: none;
        padding: 1.875rem;
    }

    .guide-body p,
    .guide-closing p {
        font-size: 1rem;
    }

    .guide-body h3 {
        font-size: 1.3rem;
        margin-top: 2.25rem;
    }

    /* The sections above are tinted too on phones, so the divider is needed
       here more than on desktop, not less. */
    .guide-closing {
        padding: 1.875rem 0 3rem;
    }

    .guide-day-link {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .guide-day-tickets {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
    }

    .guide-closing-inner {
        width: 100%;
    }

    .guide-closing h2 {
        padding: 0 1.875rem;
    }

    .guide-closing p {
        padding: 0 1.875rem;
    }

    .guide-day-list {
        padding: 0 1.875rem;
    }
}