/* Cape Ann Symphony — Profile pages.
   Patron account area: /profile, /profile/history, /profile/subscriptions,
   /profile/payment, /profile/notifications, /profile/edit.
   Loaded via page_css on each profile.*.2026.php. */

/* ============== HERO + TABS ============== */

.profile-hero {
    border-bottom: 1px solid var(--rule);
    padding: 56px 0 0;
}
.profile-eyebrow {
    color: var(--ink-3);
    margin-bottom: 12px;
    display: block;
}
.profile-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}
.profile-title {
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
}
.profile-subtitle {
    font-size: 18px;
    color: var(--ink-3);
    margin-top: 10px;
    font-family: "Inter", sans-serif;
}
.profile-hero-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.profile-logout-form { margin: 0; padding: 0; display: inline; }

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    margin-top: 36px;
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab {
    padding: 16px 22px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-3);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
}
.profile-tab:hover { color: var(--ink); }
.profile-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.profile-tab-count {
    padding: 2px 8px;
    background: var(--bg-sunken);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
}
.profile-tab.is-active .profile-tab-count {
    background: color-mix(in oklab, var(--accent) 15%, var(--bg-sunken));
    color: var(--accent);
}

/* ============== MAIN BODY ============== */

.profile-main {
    padding: 48px 0 80px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; gap: 32px; }
}

.profile-section-h {
    font-size: 32px;
    margin-bottom: 6px;
}
.profile-section-sub {
    font-size: 16px;
    color: var(--ink-3);
    font-family: "Inter", sans-serif;
    margin-bottom: 28px;
    line-height: 1.55;
    max-width: 560px;
}

/* ============== TICKET CARDS (Upcoming) ============== */

.ticket-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-card {
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 28px;
    align-items: center;
}
@media (max-width: 720px) {
    .ticket-card { grid-template-columns: 80px 1fr; }
    .ticket-card .ticket-card-cta { grid-column: 1 / -1; }
}

.ticket-card-date {
    text-align: center;
    border-right: 1px solid var(--rule);
    padding-right: 20px;
}
.ticket-card-month {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}
.ticket-card-day {
    font-family: var(--display, "Cormorant Garamond"), Georgia, serif;
    font-size: 52px;
    color: var(--ink);
    line-height: 1;
    margin-top: 4px;
}
.ticket-card-weekday {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
}

.ticket-card-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
}
.ticket-card-title {
    font-size: 30px;
    line-height: 1.1;
    margin: 6px 0 10px;
}
.ticket-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: var(--ink-2);
}
.ticket-card-row strong { color: var(--ink); font-weight: 600; }

.ticket-card-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

/* Concert-type chip ("Classical" / "Pops" / "Family" / "Gala") — and
   the legacy "Coming soon" chip share the same visual treatment. */
.ticket-chip-soon,
.ticket-chip-type {
    display: inline-block;
    padding: 3px 10px;
    background: color-mix(in oklab, var(--accent) 18%, var(--bg-sunken));
    color: var(--accent);
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Empty state */
.profile-empty {
    padding: 64px 32px;
    border: 1px dashed var(--rule);
    border-radius: 8px;
    text-align: center;
    background: var(--bg-elev);
}
.profile-empty-h {
    font-size: 28px;
    margin-bottom: 10px;
}
.profile-empty p {
    font-size: 16px;
    color: var(--ink-3);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 20px;
}

/* ============== RIGHT-RAIL CARDS ============== */

.profile-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-aside-card {
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
}
.profile-aside-card.is-accent {
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
    border-color: color-mix(in oklab, var(--accent) 30%, var(--rule));
}
.profile-aside-card.is-sunken { background: var(--bg-sunken); }

.profile-aside-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.profile-aside-h {
    font-size: 22px;
    margin: 8px 0 0;
    line-height: 1.2;
}
.profile-aside-body {
    font-size: 15px;
    color: var(--ink-2);
    font-family: "Inter", sans-serif;
    margin-top: 10px;
    line-height: 1.55;
}

/* ============== HISTORY (Past concerts) ============== */

.history-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
@media (max-width: 720px) { .history-stats { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
    padding: 20px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
}
.stat-card.is-accent {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.stat-card-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.stat-card.is-accent .stat-card-label { color: rgba(255,255,255,0.6); }

.stat-card-value {
    font-size: 30px;
    margin-top: 8px;
    line-height: 1.1;
}
.stat-card-sub {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
}
.stat-card.is-accent .stat-card-sub { color: rgba(255,255,255,0.7); }

.history-season {
    margin-bottom: 48px;
}
.history-season-h {
    display: flex;
    align-items: baseline;
    gap: 16px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 12px;
    margin-bottom: 0;
}
.history-season-h h3 { font-size: 28px; margin: 0; }
.history-season-meta {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
}

.history-row {
    display: grid;
    /* Last two columns auto-size to their content, so the action
       column doesn't artificially cap at 160px and overflow back
       into the price column. minmax(0, 1fr) on the title prevents
       long concert names from blowing the grid out. */
    grid-template-columns: 160px minmax(0, 1fr) 220px auto auto;
    gap: 14px 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}
.history-row:last-child { border-bottom: 0; }
.history-row-date {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
}
.history-row-title { font-size: 22px; line-height: 1.2; }
.history-row-meta {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
}
.history-row-amt {
    font-size: 22px;
    text-align: right;
    white-space: nowrap;
}
/* Three buttons (Receipt + View invoice + Download). flex-wrap lets
   them spill onto a second row at tighter widths instead of jamming
   into the price column to the left. */
.history-row-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 900px) {
    .history-row { grid-template-columns: 1fr auto; gap: 8px 16px; }
    .history-row-meta, .history-row-action { grid-column: 1 / -1; }
    .history-row-action { justify-content: flex-start; }
}

/* ============== NOTIFICATIONS PANEL ============== */

.pref-card {
    padding: 32px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
    margin-bottom: 24px;
}
.pref-card-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.pref-card-h h3 { font-size: 22px; margin: 0; }
.pref-card-h-meta {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
}
.pref-card-body-intro {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
    margin-bottom: 20px;
}

.pref-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    align-items: center;
}
.pref-row:last-child { border-bottom: 0; }
.pref-row[data-disabled="1"] { cursor: default; }

.pref-row-title {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pref-row-tag {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 2px 8px;
    border: 1px solid var(--rule);
    border-radius: 999px;
}
.pref-row-hint {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 4px;
    line-height: 1.5;
}

/* Toggle switch */
.toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--rule-2, #C9C5BC);
    position: relative;
    cursor: pointer;
    transition: background 160ms ease;
    flex-shrink: 0;
    margin: 0;
    border: 0;
    outline: 0;
}
.toggle::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left 160ms ease;
}
.toggle:checked { background: var(--accent); }
.toggle:checked::before { left: 21px; }
.toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }

/* Phone verify panel */
.verify-panel {
    padding: 20px;
    background: var(--bg-sunken);
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: 20px;
}
.verify-panel.is-pending {
    background: color-mix(in oklab, var(--accent) 6%, var(--bg-sunken));
    border-color: color-mix(in oklab, var(--accent) 30%, var(--rule));
}
.verify-panel-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.verify-panel-row {
    display: flex;
    gap: 10px;
}
.verify-panel-row .input { flex: 1; font-size: 17px; }
.verify-code {
    flex: 1;
    font-size: 19px;
    letter-spacing: 0.3em;
    text-align: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ============== PROFILE-EDIT (inline edit blocks) ============== */

.edit-block {
    padding: 28px 32px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
    margin-bottom: 16px;
}
.edit-block-h {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.edit-block-h h3 {
    font-size: 22px;
    margin: 0 0 6px;
}
.edit-block-value {
    font-family: "Inter", sans-serif;
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.5;
}
.edit-block-value-muted {
    color: var(--ink-3);
    font-style: italic;
}

/* ============== STUB / COMING-SOON CARDS ============== */

.stub-block {
    padding: 48px 40px;
    border: 1px dashed var(--rule);
    border-radius: 8px;
    background: var(--bg-elev);
    text-align: center;
}
.stub-block .display { font-size: 28px; margin-bottom: 10px; }
.stub-block p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: var(--ink-3);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 20px;
}

/* ============== TICKET-CARD VARIANT PICKER ============== */
/*
 * Three render styles for upcoming tickets. The picker is a small
 * segmented control above the card stack. Persisted in localStorage
 * via inline JS in profile.2026.php.
 */

.ticket-style-picker {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--bg-elev);
    margin-bottom: 20px;
    font-family: "Inter", sans-serif;
}
.ticket-style-picker-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    padding: 0 12px 0 14px;
}
.ticket-style-picker button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 999px;
    font-family: inherit;
    line-height: 1;
}
.ticket-style-picker button:hover { color: var(--ink); }
.ticket-style-picker button.is-active {
    background: var(--ink);
    color: var(--bg);
}

/* === Variant A: List (existing .ticket-card, with concert color bar) === */
/*
 * Adds a 4px-wide colored bar on the left of the card, derived from
 * the concert's rgbCode (set inline via --concert-color). Falls back
 * to the site accent if no color is provided.
 */
.ticket-card.ticket-card--list {
    position: relative;
    overflow: hidden;
    border-left: 0;
}
/* Variant gating — the picker JS toggles [hidden] on each variant.
   Some variants use display:grid/flex which would otherwise beat the
   UA stylesheet's [hidden]{display:none}. Force it. */
.ticket-card-wrap [data-variant][hidden] { display: none !important; }

/* Perforation — a solid concert-colored band on the left edge of the card,
   with bg-colored dots punched out of its right edge so it looks like the
   band has been torn off along the perforation. The band is wider than the
   visible strip; the dots straddle the band's right edge. */
.ticket-card.ticket-card--list::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 18px;
    background: var(--concert-color, var(--accent));
}
.ticket-card.ticket-card--list::after {
    content: "";
    position: absolute;
    left: -6px; /* dots straddle the band's LEFT edge */
    top: 0; bottom: 0;
    width: 12px;
    background-image: radial-gradient(
        circle at 6px 7px,
        var(--bg-elev) 0 3px,
        transparent 3.5px
    );
    background-size: 12px 14px;
    background-repeat: repeat-y;
    background-position: center top;
}
.ticket-card .ticket-card-address {
    color: var(--ink-3);
    font-size: 14px;
    margin-top: 4px;
}

/* === Variant B: Poster-led === */

.ticket-card--poster {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 0;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--bg-elev);
    overflow: hidden;
    align-items: stretch;
}
@media (max-width: 720px) {
    .ticket-card--poster { grid-template-columns: 1fr; }
    .ticket-card--poster .ticket-poster-img { aspect-ratio: 16/9; height: auto; }
}
.ticket-poster-img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    background: var(--bg-sunken);
    display: block;
}
.ticket-poster-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ticket-poster-when {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--concert-color, var(--accent));
    font-weight: 600;
    margin-bottom: 6px;
}
.ticket-poster-when .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.ticket-poster-title {
    font-family: var(--display, "Cormorant Garamond"), Georgia, serif;
    font-size: 32px;
    line-height: 1.05;
    margin: 0 0 14px;
    color: var(--ink);
    text-wrap: balance;
}
.ticket-poster-meta {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-bottom: 4px;
}
.ticket-poster-meta strong { color: var(--ink); font-weight: 600; }
.ticket-poster-cta {
    padding: 28px 28px 28px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
}
@media (max-width: 720px) {
    .ticket-poster-cta { padding: 0 28px 28px; }
}

/* === Variant C: Ticket stub (skeuomorphic) === */
/*
 * Two panels separated by a "perforated" divider — a vertical
 * dotted line with two semi-circle notches that look like the
 * tear-off detached at top/bottom. The whole thing has a slight
 * paper-grain background and uses the concert color on the stub
 * heading. Subtle 0.5deg rotation on hover for a tactile feel.
 */
.ticket-card--stub {
    display: grid;
    grid-template-columns: 1fr 180px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg,
            color-mix(in oklab, var(--ink) 1.5%, transparent) 0,
            color-mix(in oklab, var(--ink) 1.5%, transparent) 1px,
            transparent 1px, transparent 4px),
        var(--bg-elev);
    box-shadow: 0 2px 0 color-mix(in oklab, var(--ink) 6%, transparent),
                0 8px 20px -12px color-mix(in oklab, var(--ink) 18%, transparent);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease;
}
.ticket-card--stub:hover {
    transform: rotate(-0.4deg) translateY(-2px);
}
@media (max-width: 720px) {
    .ticket-card--stub { grid-template-columns: 1fr; }
}

.ticket-stub-main {
    padding: 28px 36px 28px 32px;
    border-right: 2px dashed color-mix(in oklab, var(--ink) 22%, transparent);
    position: relative;
}
@media (max-width: 720px) {
    .ticket-stub-main {
        border-right: 0;
        border-bottom: 2px dashed color-mix(in oklab, var(--ink) 22%, transparent);
    }
}
/* The two notches that turn the dashed line into a perforation */
.ticket-stub-main::before,
.ticket-stub-main::after {
    content: "";
    position: absolute;
    right: -10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--rule);
}
.ticket-stub-main::before { top: -10px; }
.ticket-stub-main::after { bottom: -10px; }
@media (max-width: 720px) {
    .ticket-stub-main::before,
    .ticket-stub-main::after { display: none; }
}

.ticket-stub-when {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--concert-color, var(--accent));
}
.ticket-stub-when .month {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.ticket-stub-when .day {
    font-family: var(--display, "Cormorant Garamond"), Georgia, serif;
    font-size: 56px;
    line-height: 0.9;
    color: var(--ink);
}
.ticket-stub-when .weekday-time {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.ticket-stub-title {
    font-family: var(--display, "Cormorant Garamond"), Georgia, serif;
    font-size: 28px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 8px;
    text-wrap: balance;
}
.ticket-stub-venue {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
}
.ticket-stub-venue strong { color: var(--ink); font-weight: 600; }

.ticket-stub-aside {
    padding: 24px 24px 24px 28px;
    background: color-mix(in oklab, var(--concert-color, var(--accent)) 8%, var(--bg-elev));
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}
.ticket-stub-aside-row {
    font-family: "Inter", sans-serif;
}
.ticket-stub-aside-row .label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 4px;
}
.ticket-stub-aside-row .value {
    font-size: 18px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
}
.ticket-stub-aside-row .value-lg {
    font-family: var(--display, "Cormorant Garamond"), Georgia, serif;
    font-size: 32px;
    line-height: 1;
    color: var(--ink);
}
.ticket-stub-aside-cta {
    margin-top: 4px;
}

/* ============== UTILITY ============== */
.profile-actions-row {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-rule-divider {
    border-top: 1px solid var(--rule);
    margin: 24px 0;
    padding-top: 24px;
}

/* ──────────────────────────────────────────────────────────────
   /profile/ticket — per-concert ticket detail page
   ────────────────────────────────────────────────────────────── */

.profile-crumb {
    margin: 16px 0 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
}

.ticket-detail-hero {
    padding-bottom: 8px;
}
.ticket-detail-hero__meta {
    margin-top: 8px;
    line-height: 1.5;
}
.ticket-detail-hero__addr {
    color: var(--ink-3, #5A6069);
}
.ticket-detail-hero__count {
    margin-top: 12px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3, #5A6069);
}
.ticket-detail-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ticket-detail-list {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .ticket-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ticket-detail-card {
    background: #fff;
    border: 1px solid var(--rule, #D9D0BB);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ticket-detail-card__primary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ticket-detail-card__num .eyebrow {
    display: block;
    margin-bottom: 4px;
}
.ticket-detail-card__tier {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}
.ticket-detail-card__price {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-3, #5A6069);
    margin: 0;
}
.ticket-detail-card__id {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--ink-4, #8B8F97);
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.ticket-detail-card__id code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 13px;
    color: var(--ink, #15181C);
    background: var(--bg-sunken, #EEE6D4);
    padding: 2px 6px;
    border-radius: 4px;
}
.ticket-detail-card__order {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--ink-4, #8B8F97);
    margin: 0;
}
.ticket-detail-card__wallet {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--rule, #D9D0BB);
    padding-top: 14px;
}
.ticket-detail-card__wallet-btn {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}
.ticket-detail-card__wallet-btn:hover img {
    opacity: 0.85;
}

.ticket-detail-list__footnote {
    margin-top: 28px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3, #5A6069);
    line-height: 1.55;
    max-width: 56ch;
}

/* Per-performance grouping section */
.ticket-detail-perf {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rule, #D9D0BB);
}
.ticket-detail-perf:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.ticket-detail-perf__head {
    margin-bottom: 18px;
}
.ticket-detail-perf__title {
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
}
.ticket-detail-perf__venue {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: var(--ink-2, #2C3138);
    margin: 6px 0 0;
    line-height: 1.45;
}
.ticket-detail-perf__addr {
    color: var(--ink-3, #5A6069);
}
.ticket-detail-perf__count {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--ink-3, #5A6069);
    margin: 6px 0 0;
}


/* ============================================================
 * VOLUNTEER UPLOAD FORMS — shared styles for the four
 * /profile/volunteer/{photos,press,minutes,concert-notes}
 * pages. Field inputs themselves use the .auth-field /
 * .auth-field-label / .auth-field-hint classes from auth.css.
 * ============================================================ */

/* Page-level flash banners (error / success after redirect). */
.alert { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.alert-warning { background: #fff8e1; color: #6d4c00; border: 1px solid #ffe082; }
.alert-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }

/* Wrapper that constrains form width consistently across the
   four volunteer pages. */
.volunteer-form-wrap { max-width: 640px; }
.volunteer-form-wrap--wide { max-width: 720px; }

/* "Current photo" preview shown above the file input on edit
   mode. Echoed by cas_volunteer_image_preview_html(). */
.edit-photo-preview {
    display: flex; align-items: center; gap: 14px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-elev, #fdfaf3);
    border: 1px dashed var(--border, #e0d8c8);
    border-radius: 8px;
}
.edit-photo-preview img {
    max-width: 120px; max-height: 90px;
    object-fit: cover; border-radius: 4px;
}
.edit-photo-current {
    font-family: "Inter", sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted, #6b6052);
}

/* "Current file: <filename> [link]" preview for PDF/non-image
   uploads (minutes, press scans). Same dashed-box treatment as
   the image preview, but a single-line label + link instead of
   a thumbnail. Echoed by cas_volunteer_file_preview_html(). */
.edit-file-preview {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--bg-elev, #fdfaf3);
    border: 1px dashed var(--border, #e0d8c8);
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
}
.edit-file-current {
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted, #6b6052);
    margin-right: 4px;
}
.edit-file-preview a {
    color: var(--ink, #2d2620);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.edit-file-preview a:hover { text-decoration-thickness: 2px; }

/* "Your submissions" list shown below the form. Rendered by
   cas_volunteer_render_my_submissions(). */
.my-subs-section { margin-top: 56px; }
.my-subs-h { font-size: 24px; }
.my-subs { list-style: none; padding: 0; margin: 18px 0 0; }
.my-subs__row {
    display: flex; gap: 16px; align-items: center;
    padding: 14px;
    border: 1px solid var(--border, #e0d8c8);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
}
.my-subs__thumb {
    width: 96px; height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--bg-elev, #fdfaf3);
}
.my-subs__thumb--placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: var(--muted, #6b6052);
}
.my-subs__meta { flex: 1; min-width: 0; }
.my-subs__caption {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink, #2d2620);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-subs__sub {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--muted, #6b6052);
}
.my-subs__chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.my-subs__chip--ok      { background: #e8f5e9; color: #1b5e20; }
.my-subs__chip--pending { background: #fff8e1; color: #6d4c00; }

.my-subs__actions { display: flex; gap: 8px; flex-shrink: 0; }
.my-subs__btn {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    color: var(--ink, #2d2620);
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.my-subs__btn:hover { background: var(--bg-elev, #f4efe4); }
.my-subs__btn--danger { color: #b71c1c; border-color: #f5c6cb; }
.my-subs__btn--danger:hover { background: #fdecea; }

@media (max-width: 540px) {
    .my-subs__row { flex-wrap: wrap; }
    .my-subs__actions { width: 100%; justify-content: flex-end; }
}

/* "Cancel editing → start fresh" link shown below the form
   when in edit mode. */
.volunteer-cancel-edit { margin-top: 14px; }