/* ---------------------------------------------------------------------------
   Doorpass — design system.

   Hand-written on purpose: no build step, no JavaScript, no web fonts. The
   ticket shop has to open on an old Android phone on weak village wifi, so
   the whole theme is one small cacheable file and the type stack is whatever
   the device already has.

   Everything is driven by the custom properties in :root. Changing the brand
   means changing tokens here, not hunting through rules — and the dark theme
   at the bottom is nothing but a second set of the same tokens.
   --------------------------------------------------------------------------- */

:root {
    /* Brand: deep indigo for trust, amber for the things that cost money. */
    --brand: #4338ca;
    --brand-dark: #342c9e;
    --brand-deep: #221d6b;
    --brand-tint: #eef0fe;
    --brand-tint-2: #dfe2fc;
    --brand-line: #c7ccf8;
    --brand-ink: #ffffff;

    --accent: #d97706;
    --accent-strong: #b45309;
    --accent-tint: #fdf3e2;
    --accent-line: #f0dcb2;

    /* Neutrals, tuned slightly cool so they sit under the indigo. */
    --ink: #1a1932;
    --ink-soft: #595873;
    --ink-faint: #8886a3;
    --line: #e3e3ef;
    --line-soft: #eff0f8;
    --bg: #f5f6fb;
    --bg-sunken: #eceef7;
    --card: #ffffff;

    /* Status */
    --good: #0f7a55;
    --good-bg: #e7f6ef;
    --good-line: #b5e2cd;
    --bad: #be2a2a;
    --bad-bg: #fdecec;
    --bad-line: #f2c8c8;
    --warn: #96600a;
    --warn-bg: #fdf4e4;
    --warn-line: #efdcb2;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(26, 25, 50, .06), 0 1px 3px rgba(26, 25, 50, .04);
    --shadow: 0 2px 4px rgba(26, 25, 50, .05), 0 8px 20px -8px rgba(26, 25, 50, .14);
    --shadow-lg: 0 4px 10px rgba(26, 25, 50, .07), 0 24px 48px -16px rgba(26, 25, 50, .22);
    --ring: 0 0 0 3px rgba(67, 56, 202, .28);

    --col: 940px;
    --col-narrow: 540px;
    --col-wide: 1180px;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* A faint brand wash behind the page, so white cards have something to sit on. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 320px;
    background: linear-gradient(180deg, rgba(67, 56, 202, .07), rgba(67, 56, 202, 0));
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--brand);
    text-underline-offset: 2px;
}

a:hover { color: var(--brand-dark); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: 32px 20px 72px;
    flex: 1 0 auto;
}

.wrap--narrow { max-width: var(--col-narrow); }
.wrap--wide { max-width: var(--col-wide); }

@media (max-width: 560px) {
    .wrap { padding: 20px 16px 56px; }
}

/* Skip link for keyboard users — visible only when focused. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 50;
    background: var(--brand);
    color: var(--brand-ink);
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus { top: 0; color: var(--brand-ink); }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-head {
    position: relative;
    z-index: 20;
    background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand-dark) 48%, var(--brand) 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

.site-head__inner {
    max-width: var(--col);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    gap: 10px 20px;
    align-items: center;
    flex-wrap: wrap;
}

.site-head__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}

.site-head__brand:hover { color: #fff; }

/* The mark carries a figure standing in a doorway, and a person needs room
   to be a person: at the old 18px the head was under two pixels across and
   the whole thing read as a smudge. 26px in a 40px tile is the smallest size
   at which the door and the raised arm both survive. */
.site-head__logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.site-head__logo svg { width: 26px; height: 26px; display: block; }

.site-head__org {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.site-head__nav {
    margin-left: auto;
    display: flex;
    gap: 6px 14px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
}

.site-head__nav > a,
.site-head__link {
    padding: 6px 11px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-head__nav > a:hover,
.site-head__link:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.site-head__link--active {
    background: rgba(255, 255, 255, .17);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.site-head__who {
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buttons sitting in the dark header need the inverted treatment. */
.site-head__nav .btn--ghost {
    border-color: rgba(255, 255, 255, .34);
    color: rgba(255, 255, 255, .92);
    background: transparent;
    min-height: 34px;
    padding: 6px 13px;
    font-size: 14px;
    box-shadow: none;
}

.site-head__nav .btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.site-head__nav form { display: inline-flex; margin: 0; }

@media (max-width: 620px) {
    .site-head__nav { margin-left: 0; width: 100%; font-size: 13px; }
    .site-head__who { display: none; }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-foot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    background: var(--card);
}

.site-foot__inner {
    max-width: var(--col);
    margin: 0 auto;
    padding: 22px 20px 30px;
    display: flex;
    gap: 8px 20px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-soft);
}

.site-foot__inner nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

h1 {
    font-size: clamp(25px, 4.4vw, 32px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

h2 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 38px 0 14px;
}

h3 { font-size: 16px; line-height: 1.35; margin: 0 0 4px; }

.lede {
    font-size: 17px;
    color: var(--ink-soft);
    margin: 0 0 26px;
    max-width: 62ch;
}

.muted { color: var(--ink-soft); }
.small { font-size: 14px; }

.mono {
    font-family: var(--mono);
    font-size: .92em;
    letter-spacing: .01em;
}

/* A heading with something (a badge, a button) on its right. */
.page-head {
    display: flex;
    gap: 12px 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-head > :first-child { flex: 1 1 320px; }
.page-head h1, .page-head .lede { margin-bottom: 0; }

/* Chips under a title: date, venue, organiser. */
.meta-list {
    display: flex;
    gap: 8px 10px;
    flex-wrap: wrap;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    color: var(--ink-soft);
}

.meta strong { color: var(--ink); font-weight: 600; }
.meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brand); }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    margin-bottom: 32px;
    background:
        radial-gradient(120% 140% at 92% -10%, rgba(217, 119, 6, .38), rgba(217, 119, 6, 0) 58%),
        linear-gradient(118deg, var(--brand-deep) 0%, var(--brand-dark) 52%, #5b45d4 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

/* One decorative flourish: a ring bleeding off the top-right corner. */
.hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 22px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 10px;
}

.hero h1 { color: #fff; margin-bottom: 10px; }

.hero__lede {
    font-size: 17px;
    color: rgba(255, 255, 255, .84);
    margin: 0;
    max-width: 52ch;
}

.hero .meta {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: none;
    color: rgba(255, 255, 255, .86);
}

.hero .meta strong { color: #fff; }
.hero .meta svg { color: rgba(255, 255, 255, .8); }
.hero .meta-list { margin: 18px 0 0; }

@media (max-width: 560px) {
    .hero { padding: 26px 20px; border-radius: var(--radius); }
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.card > :last-child { margin-bottom: 0; }

/* Tables live in these, so let a wide one scroll instead of breaking the page. */
.card--tight { padding: 6px 8px; overflow-x: auto; }
.card--tight > table { margin: 0; }

.card__row {
    display: flex;
    gap: 14px 18px;
    align-items: baseline;
    flex-wrap: wrap;
}

.card__head {
    display: flex;
    gap: 10px 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.card--brand {
    border-color: var(--brand-line);
    background: linear-gradient(180deg, var(--brand-tint), var(--card) 70%);
}

.card--accent { border-left: 4px solid var(--accent); }

/* Anything that voids tickets or deletes data gets a red edge. */
.card--danger { border-left: 4px solid var(--bad); }
.card--danger > h3 { color: var(--bad); }

.prose { color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Event list (public shop)
   --------------------------------------------------------------------------- */

.event-list {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.event-card {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.event-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-line);
    box-shadow: var(--shadow);
}

/* Calendar-page date block. */
.event-card__date {
    flex: 0 0 auto;
    width: 62px;
    padding: 8px 0 9px;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
    color: var(--brand-dark);
    line-height: 1.1;
}

.event-card__day { display: block; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }

.event-card__month {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.event-card__body { flex: 1 1 260px; min-width: 0; }

.event-card__title {
    font-size: 17px;
    font-weight: 650;
    margin: 0 0 3px;
    letter-spacing: -.01em;
}

.event-card__title a { color: var(--ink); text-decoration: none; }
.event-card__title a:hover { color: var(--brand); }

.event-card__meta {
    font-size: 14px;
    color: var(--ink-soft);
}

.event-card__by { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 480px) {
    .event-card { padding: 16px; gap: 14px; }
    .event-card .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--ink);
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=tel], input[type=search], input[type=url],
select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink);
    background: var(--card);
    box-shadow: inset 0 1px 2px rgba(26, 25, 50, .04);
    transition: border-color .12s ease, box-shadow .12s ease;
}

select {
    /* Own arrow, so the control looks the same in every browser. */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23595873' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
}

textarea { min-height: 120px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-faint); }

input:hover, select:hover, textarea:hover { border-color: #cdcee0; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--bg-sunken);
    color: var(--ink-faint);
    cursor: not-allowed;
    box-shadow: none;
}

input[type=checkbox], input[type=radio] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    vertical-align: -3px;
    margin-right: 6px;
}

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field__hint {
    font-weight: 400;
    color: var(--ink-faint);
    font-size: 13px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 560px) {
    .grid-2 { grid-template-columns: 1fr; gap: 0; }
    .grid-2 > .field { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 44px;              /* comfortable on a phone */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: var(--brand-ink);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(34, 29, 107, .3), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .1s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover {
    background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-deep) 100%);
    box-shadow: 0 4px 12px -2px rgba(34, 29, 107, .4), inset 0 1px 0 rgba(255, 255, 255, .16);
    color: var(--brand-ink);
}

.btn:active { transform: translateY(1px); box-shadow: none; }

.btn:disabled, .btn[disabled] {
    background: var(--bg-sunken);
    color: var(--ink-faint);
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
}

.btn--ghost {
    background: var(--card);
    border-color: var(--line);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
    background: var(--brand-tint);
    border-color: var(--brand-line);
    color: var(--brand-dark);
    box-shadow: var(--shadow-sm);
}

/* The buy button. Amber rather than indigo, because the header, the hero and
   every secondary control are already indigo and the one action that takes
   money should not be the same colour as the furniture.

   The gradient starts at --accent-strong, not --accent: white on #d97706 is
   3.2:1, which fails AA for button text, while #b45309 is 5.0:1 and the
   bottom stop 7.1:1. The lighter --accent is a text and border colour, not a
   fill to put white on. */
.btn--accent {
    background: linear-gradient(180deg, var(--accent-strong) 0%, #8f4309 100%);
    box-shadow: 0 1px 2px rgba(143, 67, 9, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn--accent:hover {
    background: linear-gradient(180deg, #a04a08 0%, #7c3a07 100%);
    box-shadow: 0 4px 12px -2px rgba(143, 67, 9, .45);
}

.btn--danger {
    background: var(--card);
    border-color: var(--bad-line);
    color: var(--bad);
    font-weight: 500;
    min-height: 34px;
    padding: 6px 13px;
    font-size: 14px;
    box-shadow: none;
}

.btn--danger:hover {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
    box-shadow: none;
}

.btn--block { display: flex; width: 100%; }

.btn--lg { min-height: 50px; padding: 13px 26px; font-size: 17px; }

.btn--sm { min-height: 34px; padding: 6px 13px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------------- */

.notice {
    position: relative;
    border-radius: var(--radius-sm);
    padding: 13px 16px 13px 46px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 15px;
}

/* The glyph is drawn in CSS: no icon font, no extra request. */
.notice::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: currentColor;
    opacity: .16;
}

.notice::after {
    position: absolute;
    left: 14px;
    top: 15px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.notice--good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.notice--good::after { content: "\2713"; }

.notice--bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice--bad::after { content: "!"; }

.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice--warn::after { content: "!"; }

.notice a { color: inherit; font-weight: 600; }

.notice ul { margin: 6px 0 0; padding-left: 18px; }
.notice ul li + li { margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    white-space: nowrap;
    vertical-align: 1px;
}

.badge--good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.badge--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.badge--bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.badge--info { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-dark); }

/* A live dot, so "on sale" reads at a glance. */
.badge--good::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

th, td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

thead th:first-child { border-top-left-radius: var(--radius-sm); }
thead th:last-child { border-top-right-radius: var(--radius-sm); }

/* Detail tables use a th in the body as a label column, not a header row. */
tbody th {
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:last-child th { border-bottom: 0; }
/* Row hover only where there are rows to scan — not on two-column detail
   tables, where half a highlighted row just looks broken. Browsers without
   :has() simply skip it. */
table:has(thead) tbody tr:hover td { background: var(--brand-tint); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The summed last row of an order. */
tbody tr.total-row td {
    border-top: 2px solid var(--line);
    background: var(--bg);
    font-size: 16px;
}

tbody tr.total-row:hover td { background: var(--bg); }

/* ---------------------------------------------------------------------------
   Stats
   --------------------------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

/* Brand hairline along the top edge. */
.stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #6d5ae0);
}

.stat__value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--ink);
}

.stat__label { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Ticket picker (shop event page)
   --------------------------------------------------------------------------- */

.tt {
    display: flex;
    gap: 10px 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.tt:first-child { padding-top: 4px; }
.tt:last-child { border-bottom: 0; padding-bottom: 4px; }

.tt__main { flex: 1 1 240px; min-width: 0; }
.tt__main h3 { font-weight: 650; }

.tt__price {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

.tt__qty { width: 96px; flex: 0 0 auto; }
.tt__qty label { font-size: 12px; color: var(--ink-faint); margin-bottom: 3px; }
.tt__qty input { text-align: center; font-weight: 600; }

@media (max-width: 420px) {
    .tt__qty { width: 100%; }
    .tt__qty input { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Issued tickets — a stub with a torn edge
   --------------------------------------------------------------------------- */

.ticket {
    position: relative;
    display: flex;
    gap: 12px 20px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 20px 16px 26px;
    margin-bottom: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ticket::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--brand), #6d5ae0);
}

/* The notch that makes it read as a torn-off stub. */
.ticket::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 0 0 1px var(--line);
}

.ticket > * { position: relative; z-index: 1; }

.ticket__code {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    word-break: break-all;
    max-width: 340px;
}

/* ---------------------------------------------------------------------------
   Empty states
   --------------------------------------------------------------------------- */

.empty {
    text-align: center;
    padding: 44px 20px;
    color: var(--ink-soft);
    font-size: 15px;
}

.card.empty { padding: 48px 20px; }

/* ---------------------------------------------------------------------------
   Language menu — lives in the dark header
   --------------------------------------------------------------------------- */

.lang-menu {
    display: inline-flex;
    border-radius: 999px;
    padding: 2px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.lang-menu__item {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    color: rgba(255, 255, 255, .72);
}

.lang-menu__item:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.lang-menu__item--active { background: #fff; color: var(--brand-dark); }
.lang-menu__item--active:hover { background: #fff; color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   Motion and print
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* The order page is the ticket. People print it. */
@media print {
    body { background: #fff; color: #000; font-size: 12pt; }
    body::before { display: none; }

    .site-head, .site-foot, .skip-link, .lang-menu,
    form, .btn { display: none !important; }

    .wrap { max-width: none; padding: 0; }

    .hero {
        background: none !important;
        color: #000;
        box-shadow: none;
        border: 1px solid #000;
        padding: 12pt;
    }

    .hero h1, .hero__lede, .hero__eyebrow { color: #000; }
    .hero::after { display: none; }

    .card, .ticket, .stat, .meta {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
    }

    .ticket::before, .ticket::after { display: none; }
    .ticket { padding-left: 16px; }

    a { color: #000; text-decoration: none; }
}

/* ---------------------------------------------------------------------------
   The organizer pitch on the home page: trust badges, the three steps, the
   FAQ and the sign-up call to action.

   All of it sits below the event list, so a buyer who arrived from a shared
   link never pays for it with a scroll. Built from the same tokens as
   everything else, which is why none of it needs a dark-theme rule.
   --------------------------------------------------------------------------- */

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.trust__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.trust__item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .75);
}

.section { margin-top: 48px; }

.section__head { margin-bottom: 18px; }
.section__head h2 { margin: 0 0 4px; }
.section__head p { margin: 0; }

.section__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}

/* Three steps. A grid that collapses to one column rather than a carousel:
   on the phones this has to work on, a carousel is a way to hide steps two
   and three. */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps__item {
    position: relative;
    padding: 20px 20px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.steps__no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
}

.steps__title { margin: 0 0 4px; font-size: 16px; }
.steps__body { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* FAQ. Native <details>, so it opens without JavaScript and the browser's
   own find-in-page can still reach a closed answer in most engines. */
.faq {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq__item + .faq__item { border-top: 1px solid var(--line-soft); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* The marker is drawn here rather than left to the browser, which renders a
   triangle at a size and colour no token controls. */
.faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.faq__item[open] .faq__q::after { transform: rotate(225deg) translate(-2px, -2px); }

.faq__q:hover { background: var(--bg-sunken); }
.faq__item[open] .faq__q { color: var(--brand); }

.faq__a {
    padding: 0 18px 16px;
    font-size: 15px;
    color: var(--ink-soft);
}

/* Sign-up call to action, for the organizer who scrolled this far. */
.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    margin-top: 48px;
    padding: 28px 30px;
    border-radius: var(--radius-lg);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
}

.cta__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.cta__title { margin: 0 0 6px; }
.cta__body { margin: 0; max-width: 46ch; color: var(--ink-soft); }

.cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cta__link { font-size: 14px; }

/* Calendar and share row on an event page, and the poster-QR row in the
   organizer area. */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 20px;
}

.actions__label {
    margin-left: 6px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Dark theme — the same tokens with different values. Nothing below the token
   block has to know the theme exists.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #7d74ef;
        --brand-dark: #6358e0;
        --brand-deep: #241f5e;
        --brand-tint: #22213c;
        --brand-tint-2: #2b2a4c;
        --brand-line: #3b3966;
        --brand-ink: #ffffff;

        --accent: #f0a93a;
        --accent-strong: #d98f1c;
        --accent-tint: #2e2616;
        --accent-line: #4a3c1d;

        --ink: #e9e9f4;
        --ink-soft: #a6a5bf;
        --ink-faint: #7b7a95;
        --line: #2e2d47;
        --line-soft: #27263d;
        --bg: #14131f;
        --bg-sunken: #1d1c2c;
        --card: #1b1a2a;

        --good: #4cc08d;
        --good-bg: #162a23;
        --good-line: #27553f;
        --bad: #f0807f;
        --bad-bg: #2d1a1d;
        --bad-line: #5a2c2f;
        --warn: #e0ab4e;
        --warn-bg: #2a2214;
        --warn-line: #51401f;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(0, 0, 0, .6);
        --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 24px 48px -16px rgba(0, 0, 0, .7);
        --ring: 0 0 0 3px rgba(125, 116, 239, .35);

        color-scheme: dark;
    }

    body::before { background: linear-gradient(180deg, rgba(125, 116, 239, .1), rgba(125, 116, 239, 0)); }

    .site-head { background: linear-gradient(100deg, #1a1733 0%, #272254 52%, #352c72 100%); }

    .btn { background: linear-gradient(180deg, var(--brand-dark) 0%, #4f44c9 100%); }
    .btn:hover { background: linear-gradient(180deg, #6f64e8 0%, var(--brand-dark) 100%); }

    /* In dark mode the amber tokens are light, so white text on them would
       be unreadable (1.9:1). The fill keeps the light amber and takes dark
       text instead, which reads at 8.3:1. */
    .btn--accent {
        background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
        color: #241a06;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    .btn--accent:hover { background: linear-gradient(180deg, #f7bb5a 0%, #e59c24 100%); }

    .hero {
        background:
            radial-gradient(120% 140% at 92% -10%, rgba(240, 169, 58, .24), rgba(240, 169, 58, 0) 58%),
            linear-gradient(118deg, #1c1940 0%, #2b2563 52%, #42348c 100%);
    }

    input:hover, select:hover, textarea:hover { border-color: #41405f; }

    select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6a5bf' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    }
}