/*
 * EventCrew public signup page.
 *
 * Background-agnostic on purpose: the widget inherits the theme's text colour,
 * dims secondary text with opacity rather than a fixed grey, and takes its
 * surfaces and borders from the theme's own presets - so it reads on a light or
 * a dark theme without knowing which it is on.
 *
 * Lives in a real file rather than a <style> block in the template so it is
 * cacheable and versioned with the plugin. That matters more than it looks:
 * the PWA service worker caches the page HTML, so an inline stylesheet only
 * ever reached an installed app when a network fetch happened to succeed.
 */

/*
 * The token layer. --eventcrew-accent is set per-install by an inline style
 * from SignupController (the same option the installed app and the emails use),
 * so the three finally match; the rest resolve against the theme's global
 * styles with a sane fallback for a classic theme that defines none.
 */
/*
 * Nothing here needs to know whether the page is light or dark, and nothing
 * asks. A block theme in dark mode already answers through its own presets -
 * its "contrast" is the light colour - and every fallback below resolves to
 * currentColor or transparent, so a classic theme, a dark theme, or a dark
 * section of a light page all work by inheriting rather than by being
 * detected. An absolute #111 or #fff here is what would need a setting to
 * correct, and a setting is a thing to keep in sync with a theme that changes.
 */
.eventcrew-signup {
    --eventcrew-accent: var(--wp--preset--color--primary, #4a6cf7);
    --eventcrew-on-accent: #fff;
    --eventcrew-ink: var(--wp--preset--color--contrast, currentColor);
    --eventcrew-surface: var(--wp--preset--color--base, transparent);
    --eventcrew-radius: var(--wp--custom--border-radius, 8px);
    /* currentColor, not --eventcrew-ink: a border has to read against the text
       actually on the page, which is the one thing always known. */
    --eventcrew-line: color-mix(in srgb, currentColor 18%, transparent);
    /* Sign up keeps its own green: "go" is a meaning, not a brand, and a
       crew whose accent happens to be red would otherwise get a red Sign up.
       The pips' bright green under near-black text (6.5:1), not the old deep
       #1b5e20 under white, which read as a heavy dark slab on a dark page. */
    --eventcrew-go: #22c55e;
    --eventcrew-go-hover: #4ade80;
    --eventcrew-on-go: #052e16;
    --eventcrew-stop: #8e1616;
    /*
     * There was a --eventcrew-stop-ink here: the stop red mixed toward the
     * page's text colour, so a bare Delete link could be red and legible at
     * once. It could not. Tinted enough to read on a dark page it was pink;
     * red enough to mean danger it was invisible - two releases of adjusting a
     * ratio between those. Delete now has a surface of its own and carries the
     * red as a background under white, where the contrast is fixed and owes the
     * page nothing.
     */
    /* The pips are half a character wide, where the button's deep green reads
       as near-black. They get a vivid one of their own so a filled slot is
       obvious at a glance rather than a dark speck. */
    --eventcrew-pip: #22c55e;
}

/* .8, not .7: at .7 small print went faint on a translucent or photo
   background, which is what the live theme puts behind the page. */
.eventcrew-signup .eventcrew-muted { opacity: .8; }
/*
 * Hints wrap evenly rather than leaving one word stranded on a second line.
 *
 * These sit under the sign-in field, which many themes centre, and a centred
 * line that breaks anywhere splits into two ragged halves - the ugliest way for
 * small print to fail. text-wrap: balance evens the lines out; browsers that do
 * not know it ignore it and wrap as before, so it costs nothing where it is not
 * understood. The wording is kept short for the same reason: this is the fix
 * for the line that wraps anyway, not a licence to write more.
 */
.eventcrew-signup .eventcrew-hint {
    margin: .5em 0 0; font-size: .9em;
    text-wrap: balance;
}
.eventcrew-signup .eventcrew-turnstile { margin-top: .75em; }
.eventcrew-signup .eventcrew-profile label { display: block; margin-top: .75em; font-weight: 600; }
.eventcrew-signup .eventcrew-profile .wp-element-input { display: block; width: 100%; max-width: 28em; box-sizing: border-box; }
/*
 * Name on the left, Sign out on the right. The form is a block element, so
 * without the flex it drops to its own row and ends up nowhere near the name it
 * belongs to.
 *
 * Centred rather than on a shared baseline now that Sign out is a real button:
 * a baseline lines up the two pieces of text and leaves the button's padding
 * hanging below the name, which reads as misalignment rather than as intent.
 */
.eventcrew-signup .eventcrew-identity {
    display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
    margin: 0 0 .6em; font-size: .9em;
}
/*
 * A little air above each heading, so a section's title is not sitting on the
 * button that ended the section before it. Margins between the two collapse, so
 * this is the gap rather than an addition to one.
 */
.eventcrew-signup .eventcrew-subhead { margin: .5em 0 .5em; font-size: 1.05em; }
.eventcrew-signup .eventcrew-section { margin: 0 0 1.5em; }

/*
 * The action feedback is a toast pinned to the viewport, so it stays visible
 * after an in-place update no matter where the list is scrolled - which the old
 * inline notice, sitting at the top of the board, did not.
 */
.eventcrew-toast {
    position: fixed; left: 50%; bottom: 1.5em; transform: translateX(-50%) translateY(.5em);
    z-index: 100000; width: max-content; max-width: 90vw; box-sizing: border-box;
    padding: .6em 1.1em; border-radius: 8px;
    background: #222; color: #fff; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
}
.eventcrew-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/*
 * Tabs. Everything here is inert until the script adds .is-tabbed: without it
 * every panel stays visible and the nav is a row of jump links, which is what a
 * JavaScript-less visitor gets.
 *
 * The tab bar is the first thing on the page, a flat menu bar that stays at
 * the top of the screen while the page scrolls. It needs a solid background so
 * the page does not show through it: --eventcrew-page-bg, which the Crew app
 * page sets to its own background colour, or else the theme's base colour.
 * The WordPress admin bar (signed-in WordPress users) is fixed at the top too,
 * so the bar sits under it rather than behind it.
 */
.eventcrew-signup .eventcrew-tabs {
    position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
    display: flex; flex-wrap: wrap; gap: 0 .25em;
    margin: 0 0 1.2em;
    background: var(--eventcrew-page-bg, var(--wp--preset--color--base, Canvas));
    border-bottom: 1px solid var(--eventcrew-line);
}
/*
 * Each tab is plain text in the bar, like a menu entry. The open tab is
 * brighter and has a thick accent line under it. 44px tall to tap.
 */
.eventcrew-signup .eventcrew-tab {
    box-sizing: border-box; padding: .3em .9em;
    color: inherit; text-decoration: none; font-weight: 600; line-height: 1.2;
    font-size: 1.1em;
    border-bottom: 3px solid transparent; margin-bottom: -1px; opacity: .7;
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.eventcrew-signup .eventcrew-tab:hover { opacity: 1; }
.eventcrew-signup .eventcrew-tab.is-active {
    opacity: 1;
    border-bottom-color: var(--eventcrew-accent);
}
/*
 * The Admin tab (organizers only) in the accent colour so it stands out.
 * Accent text rather than text on a solid accent, because the configured
 * on-accent colour is often white, which is hard to read on a light accent.
 */
.eventcrew-signup .eventcrew-tab[data-eventcrew-tab="admin"] {
    color: var(--eventcrew-accent); opacity: .85;
}
.eventcrew-signup .eventcrew-tab[data-eventcrew-tab="admin"].is-active { opacity: 1; }
/*
 * The Admin tab's second row: Roster, Door, People, Telegram. Smaller, plain
 * text links on the left, so they do not look like a second tab bar. The open
 * one is in the accent colour with a thin accent line under it. Only once the
 * script has run (has-subtabs) are the other screens hidden, so without
 * JavaScript every Admin card stays on one page.
 */
.eventcrew-signup .eventcrew-subtabs {
    display: flex; flex-wrap: wrap; gap: .2em 1.2em; margin: 0 0 1em;
}
.eventcrew-signup .eventcrew-subtab {
    padding: .25em 0; border-bottom: 2px solid transparent;
    color: inherit; text-decoration: none; opacity: .75; font-size: .9em;
}
.eventcrew-signup .eventcrew-subtab:hover { opacity: 1; }
.eventcrew-signup .eventcrew-subtab.is-active {
    border-bottom-color: var(--eventcrew-accent); color: var(--eventcrew-accent); opacity: 1;
}
.eventcrew-signup .has-subtabs [data-eventcrew-subpanel]:not(.is-active) { display: none; }
/*
 * Phone: smaller text and padding so five tabs fit on one line in English; if
 * they still wrap (Finnish), each row's tabs stretch to fill it evenly. The
 * text is a size up from .75em (Owner 2026-11-08: "a bit bigger"); at 360px
 * the five English tabs still fit on one line.
 */
@media (max-width: 640px) {
    .eventcrew-signup .eventcrew-tabs { gap: 0; }
    .eventcrew-signup .eventcrew-tab { flex: 1 1 auto; padding: .3em .3em; font-size: .88em; }
}
/*
 * Browsers draw their own ring on click as well as on keyboard focus; the
 * focus state colours the bottom line instead.
 */
.eventcrew-signup .eventcrew-tab:focus { outline: none; }
.eventcrew-signup .eventcrew-tab:focus-visible {
    outline: none; opacity: 1;
    border-bottom-color: var(--eventcrew-accent);
}

.eventcrew-signup.is-tabbed .eventcrew-panel { display: none; }
.eventcrew-signup.is-tabbed .eventcrew-panel.is-active { display: block; }
.eventcrew-signup.is-tabbed .eventcrew-panel:focus { outline: none; }

/*
 * With tabs on, the tab already names the panel, so the heading would say it
 * twice. Hidden visually rather than removed, because it is still the panel's
 * accessible name and its landmark for a screen-reader heading list.
 */
.eventcrew-signup.is-tabbed .eventcrew-panel-title {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The board list. Scoped to the board so ticket and task lists elsewhere in the
   panels keep the theme's own list styling. */
.eventcrew-signup .eventcrew-board ul { list-style: none; padding: 0; margin: 0; }

/*
 * One card per event: the event's name and day in a header strip, its tasks
 * underneath. Without the card the events ran together into one long list and
 * the only thing marking where one ended was a small bold line.
 *
 * The surface is the page's own text colour at a few percent, so the card
 * shows on a light page, a dark page and a photo background alike without the
 * sheet having to know which it is on.
 */
.eventcrew-signup .eventcrew-event {
    margin: 0 0 1.2em;
    border: 1px solid var(--eventcrew-line);
    border-radius: var(--eventcrew-radius);
    background: color-mix(in srgb, currentColor 4%, transparent);
    overflow: hidden;
}
.eventcrew-signup .eventcrew-event-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: .2em 1em;
    padding: .7em 1em;
    border-bottom: 1px solid var(--eventcrew-line);
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.eventcrew-signup .eventcrew-board .eventcrew-event-title,
.eventcrew-signup .eventcrew-me-card .eventcrew-event-title,
.eventcrew-signup .eventcrew-admin-card .eventcrew-event-title { margin: 0; font-size: 1.05em; line-height: 1.3; }
.eventcrew-signup .eventcrew-event-date { font-size: .9em; opacity: .8; white-space: nowrap; }
/* The event's DJ line, on its own line under the event's name (EventName). */
.eventcrew-signup .eventcrew-event-dj { display: block; font-size: .85em; font-weight: 400; opacity: .8; }

/*
 * The events on the board in columns: as many 18rem columns as fit inside the
 * page's own column (it never reaches past the theme's box), so one on a
 * phone and two in a 645px theme column. rem, not em: em
 * follows the theme's text size, which is about 20px on the live theme, and
 * 20em columns then fitted only two across 1280px. auto-fit, not auto-fill:
 * with fewer events than columns, the cards widen to fill the row instead of
 * leaving empty columns. The gap replaces each card's bottom margin.
 */
.eventcrew-signup .eventcrew-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.2em;
    align-items: start;
    scroll-margin-top: 1em;
}
.eventcrew-signup .eventcrew-board-grid .eventcrew-event { margin: 0; }
/*
 * Signed in, every tab (Board, Me, Settings, Help, Admin) sits under the
 * header card, which is 32em wide and centred. The panels took the whole page
 * width, so on a desktop they reached far past the card's edges. Same width
 * and centring as the card, so all share one left and one right edge. On a
 * phone 32em is wider than the screen, so nothing changes there. Signed out
 * the board is not in a panel and stays as wide as the sign-in card above it.
 * The 2px are the card's two 1px borders, which its 32em does not include.
 */
.eventcrew-signup .eventcrew-panel { max-width: calc(32em + 2px); margin-inline: auto; }
/*
 * At that width two 18rem columns still fit, and each was then too narrow for
 * a task row: a long button such as "Cacao fairy only" took its full width and
 * the task name was left a few pixels, one letter per line. One column, so a
 * row has the card's whole width. A phone already had one column.
 */
.eventcrew-signup .eventcrew-panel > .eventcrew-board .eventcrew-board-grid { grid-template-columns: minmax(0, 1fr); }
/* The tab bar above them the same width, so all three share one left and one right edge. */
.eventcrew-signup .eventcrew-tabs { max-width: calc(32em + 2px); margin-inline: auto; }

/*
 * An event with a picture shows it behind its header, under a dark layer so
 * the white name and date stay readable on any photo. The header is taller so
 * the picture can be seen; the text sits at its bottom. The header shows only
 * a strip of the picture: the strip is placed 25% from the top, not in the
 * middle, because on the event posters the faces are in the upper third and
 * a centred strip showed the chins.
 */
.eventcrew-signup .eventcrew-event-head.has-image {
    min-height: 6.5em;
    align-content: flex-end; align-items: flex-end;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .7)),
        var(--eventcrew-event-image) center 25% / cover no-repeat;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.eventcrew-signup .eventcrew-event-head.has-image .eventcrew-event-date { opacity: .95; }
.eventcrew-signup .eventcrew-event .eventcrew-task-row { padding-inline: 1em; }
.eventcrew-signup .eventcrew-board-note { margin: 0 0 1em; font-size: .95em; }
/*
 * Each upcoming task breaks where it should: the job on its own line, the when
 * and the calendar link beneath. Left to wrap on its own it split mid-phrase
 * at whatever width the column happened to be.
 */
.eventcrew-signup .eventcrew-plain-list { list-style: none; margin: 0; padding: 0; }
/* Previous · page 2 of 3 · Next under a paged Me-tab list: one line of text links. */
.eventcrew-signup .eventcrew-pager {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4em 1em;
    margin: 0;
}
.eventcrew-signup .eventcrew-plain-list li {
    display: flex; flex-direction: column; gap: .1em;
    padding: .5em 0; border-bottom: 1px solid var(--eventcrew-line);
}
.eventcrew-signup .eventcrew-plain-list li:last-child { border-bottom: 0; }
/* A row's text-link action (Cancel, Give away): on its own line, left. */
.eventcrew-signup .eventcrew-inline-form { align-self: flex-start; margin: 0; }
/* Give away opens a small email + name form under its link. */
.eventcrew-signup .eventcrew-give summary { list-style: none; }
.eventcrew-signup .eventcrew-give summary::-webkit-details-marker { display: none; }
.eventcrew-signup .eventcrew-give-form { display: flex; flex-direction: column; gap: .3em; max-width: 24em; margin: 0 0 .3em; }
.eventcrew-signup .eventcrew-give-form button { align-self: flex-start; }
/* A ticket the door has marked in: the ticket page's orange, with dark text (7:1) on any theme. */
.eventcrew-signup .eventcrew-used {
    align-self: flex-start; margin-top: .2em; padding: .15em .6em; border-radius: 999px;
    background: #ff8c1a; color: #1d1d1f; font-size: .85em; font-weight: 700;
}

/*
 * The Me tab's parts (My tasks, What you've done, Tickets) are cards like the
 * board's events. Rows get the same side padding as a board row; anything that
 * is not a list (a note, the credit form) sits in a padded body.
 */
.eventcrew-signup .eventcrew-me-card .eventcrew-plain-list li,
.eventcrew-signup .eventcrew-admin-card .eventcrew-plain-list li { padding-inline: 1em; }
.eventcrew-signup .eventcrew-me-card .eventcrew-card-body,
.eventcrew-signup .eventcrew-admin-card .eventcrew-card-body { margin: 0; padding: .7em 1em; }
.eventcrew-signup .eventcrew-me-card .eventcrew-card-body .eventcrew-plain-list li { padding-inline: 0; }
.eventcrew-signup .eventcrew-me-card .eventcrew-card-body > p,
.eventcrew-signup .eventcrew-admin-card .eventcrew-card-body > p { margin: 0 0 .7em; }
.eventcrew-signup .eventcrew-me-card .eventcrew-card-body > :last-child,
.eventcrew-signup .eventcrew-admin-card .eventcrew-card-body > :last-child { margin-bottom: 0; }

/*
 * The organizer's Admin tab: six cards. Inside them, buttons are a size smaller
 * than the theme's (the theme's padding made each one a 54px black block), and
 * is-style-outline is drawn here because the theme only styles it on a Button
 * block's wrapper, so on a bare button it did nothing. Fields fill the card
 * instead of keeping the browser's 150px default.
 */
.eventcrew-signup .eventcrew-admin-card .wp-element-button {
    padding: .5em 1em; font-size: .9em; line-height: 1.3; min-height: 44px;
    border: 1px solid transparent; border-radius: var(--eventcrew-radius);
}
.eventcrew-signup .eventcrew-admin-card .wp-element-button.is-style-outline {
    background: transparent; color: inherit; border-color: currentColor;
}
.eventcrew-signup .eventcrew-admin-card .wp-element-button.is-style-outline:hover,
.eventcrew-signup .eventcrew-admin-card .wp-element-button.is-style-outline:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.eventcrew-signup .eventcrew-admin-card label { display: block; margin: 0 0 .2em; }
.eventcrew-signup .eventcrew-admin-card select,
.eventcrew-signup .eventcrew-admin-card input[type="text"],
.eventcrew-signup .eventcrew-admin-card input[type="email"],
.eventcrew-signup .eventcrew-admin-card input[type="number"],
.eventcrew-signup .eventcrew-admin-card input[type="date"],
.eventcrew-signup .eventcrew-admin-card input[type="datetime-local"] {
    box-sizing: border-box; width: 100%; min-height: 44px; padding: .4em .6em;
    /*
     * A light tint of the card's own text colour, not the surface colour: the
     * surface colour is the theme's base colour, which on a dark theme is a
     * bright yellow box inside the dark card.
     */
    font: inherit; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid var(--eventcrew-line); border-radius: var(--eventcrew-radius);
}
/* The open dropdown list is drawn by the browser: dark text on white there. */
.eventcrew-signup .eventcrew-admin-card select option { color: #222; background: #fff; }
.eventcrew-signup .eventcrew-admin-hint { display: block; margin-top: .3em; font-size: .9em; }
/* Two short fields side by side (Credits + Reason, Member + Role), stacked when narrow. */
.eventcrew-signup .eventcrew-admin-pair { display: flex; flex-wrap: wrap; gap: .7em; }
.eventcrew-signup .eventcrew-admin-pair > span { flex: 1 1 10em; min-width: 0; }
.eventcrew-signup .eventcrew-admin-pair > span:first-child:has(input[type="number"]) { flex: 0 0 6em; }
.eventcrew-signup .eventcrew-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.eventcrew-signup .eventcrew-admin-actions form { margin: 0; }
/* Role holders: name, the role boxes and Save on one line each. */
.eventcrew-signup .eventcrew-admin-holders { border-top: 1px solid var(--eventcrew-line); }
.eventcrew-signup .eventcrew-admin-roles {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3em .9em; margin: 0;
}
.eventcrew-signup .eventcrew-admin-roles strong { flex: 1 1 8em; }
.eventcrew-signup .eventcrew-admin-roles label { display: inline-flex; gap: .3em; margin: 0; white-space: nowrap; }
/* Guest sign up means nothing while Guest display is off: greyed out then. */
.eventcrew-signup .eventcrew-admin-roles:has(input[name="role_on_board"]:not(:checked)):has(input[name="role_members_display"]:not(:checked)) .eventcrew-needs-display { opacity: .5; }
/* The task list for "Add a person to a task" is long: a scroll box, one task per line. */
.eventcrew-signup .eventcrew-admin-tasks {
    margin: 0 0 .7em; padding: .3em .7em .5em; max-height: 16em; overflow-y: auto;
    border: 1px solid var(--eventcrew-line); border-radius: var(--eventcrew-radius);
}
.eventcrew-signup .eventcrew-admin-tasks label {
    display: flex; gap: .5em; align-items: baseline; padding: .3em 0; line-height: 1.35;
}
/* Tonight's crew: each task a small heading, each person a row with a status menu that saves on change. */
.eventcrew-signup .eventcrew-admin-task { margin: 0; padding: .7em 1em .1em; font-size: .95em; text-wrap: wrap; }
.eventcrew-signup .eventcrew-admin-nobody { margin: 0; padding: .2em 1em .5em; }
.eventcrew-signup .eventcrew-admin-roster li { gap: .4em; }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-roster select { width: auto; max-width: 100%; }
/* "+ Add a person" under the crew: a text link that opens the form below it. */
.eventcrew-signup .eventcrew-admin-add { padding: 0 1em .7em; }
.eventcrew-signup .eventcrew-admin-add summary { list-style: none; }
.eventcrew-signup .eventcrew-admin-add summary::-webkit-details-marker { display: none; }
.eventcrew-signup .eventcrew-admin-add > form { padding-left: 0; padding-right: 0; }
/* The date bar of the Roster and Door screens: ◀ date · 📅 date ✓ · date ▶, centred. */
.eventcrew-signup .eventcrew-admin-datebar {
    display: flex; align-items: center; justify-content: center; gap: .9em; margin: 0 0 1em;
}
.eventcrew-signup .eventcrew-admin-datebar [aria-current="date"] { font-weight: 600; }
.eventcrew-signup .eventcrew-admin-datebar-arrow {
    display: inline-flex; justify-content: center; min-width: 44px; font-size: 1.5em; text-decoration: none;
}
.eventcrew-signup .eventcrew-admin-roster form { margin: 0; display: flex; flex-wrap: wrap; gap: .4em .9em; }
.eventcrew-signup .eventcrew-admin-roster .wp-element-button { padding: .4em .8em; font-size: .85em; }
/* The Roster screen's date picker, each task's Update / Mark all buttons, guests and ticket buyers. */
.eventcrew-signup .eventcrew-admin-card textarea {
    box-sizing: border-box; width: 100%; padding: .4em .6em;
    font: inherit; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid var(--eventcrew-line); border-radius: var(--eventcrew-radius);
}
.eventcrew-signup .eventcrew-admin-attend { padding: .2em 1em .7em; }
.eventcrew-signup .eventcrew-admin-at-risk { color: #b32d2e; opacity: 1; }
.eventcrew-signup .eventcrew-admin-guests li > form { display: flex; flex-direction: column; gap: .5em; }
.eventcrew-signup .eventcrew-admin-guests p { margin: 0; }
.eventcrew-signup .eventcrew-admin-buyers { columns: 2 10em; margin: 0 0 .7em; padding-left: 1.2em; }
/*
 * The Admin cards in the Me cards' frame (Owner 2026-11-08: "coherent with
 * the other cards and more clear while saving space"): a title strip with an
 * (i) for the longer explanation, one short line under it, rows like the Me
 * tab's, one button per card and text links for the rest. A form used now
 * and then is folded under a text link (+ Add a person, Give a credit...).
 */
.eventcrew-signup .eventcrew-admin-card .eventcrew-event-head { align-items: center; }
.eventcrew-signup .eventcrew-admin-card .eventcrew-event-head > .eventcrew-about-btn {
    margin: 0 auto 0 calc(-1em + .4em); flex: none;
}
.eventcrew-signup .eventcrew-about-p { display: block; }
.eventcrew-signup .eventcrew-about-p + .eventcrew-about-p { margin-top: .5em; }
.eventcrew-signup .eventcrew-admin-card .eventcrew-admin-lead { font-size: .9em; }
.eventcrew-signup .eventcrew-admin-card .eventcrew-card-body + .eventcrew-card-body,
.eventcrew-signup .eventcrew-admin-card .eventcrew-plain-list + .eventcrew-card-body,
.eventcrew-signup .eventcrew-admin-card .eventcrew-card-body + .eventcrew-plain-list {
    border-top: 1px solid var(--eventcrew-line);
}
.eventcrew-signup .eventcrew-admin-card .eventcrew-admin-lead + .eventcrew-plain-list { border-top: 0; }
.eventcrew-signup .eventcrew-admin-card a.eventcrew-me-day { color: inherit; }
/* A folded form: a text link that opens the form under it. */
.eventcrew-signup .eventcrew-admin-fold > summary { list-style: none; }
.eventcrew-signup .eventcrew-admin-fold > summary::-webkit-details-marker { display: none; }
.eventcrew-signup .eventcrew-admin-fold[open] > summary { font-weight: 600; }
.eventcrew-signup .eventcrew-admin-folds { display: flex; flex-wrap: wrap; column-gap: 1.2em; }
.eventcrew-signup .eventcrew-admin-folds > .eventcrew-admin-fold[open] { flex-basis: 100%; }
.eventcrew-signup .eventcrew-admin-form { display: flex; flex-direction: column; gap: .6em; margin: 0 0 .3em; }
.eventcrew-signup .eventcrew-admin-form > p { margin: 0; }
.eventcrew-signup .eventcrew-admin-form > .wp-element-button { align-self: flex-start; }
.eventcrew-signup .eventcrew-admin-form .eventcrew-admin-hint { margin-top: 0; }
/* Search: the field and its text link on one line. */
.eventcrew-signup .eventcrew-admin-search { display: flex; align-items: center; gap: .8em; }
.eventcrew-signup .eventcrew-admin-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 44px; padding: .4em .6em;
    font: inherit; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid var(--eventcrew-line); border-radius: var(--eventcrew-radius);
}
/* Label on the left, value on the right: a person's status, a role's counts. */
.eventcrew-signup .eventcrew-admin-card .eventcrew-admin-facts li {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 1em; padding-block: .35em;
}
.eventcrew-signup .eventcrew-admin-facts li > span:first-child { opacity: .8; }
.eventcrew-signup .eventcrew-admin-facts li > span:last-child { font-weight: 600; text-align: right; }
/* The roster: each task a title strip, each person a row with the status menu on the right. */
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-task {
    padding: .6em 1em; border-bottom: 1px solid var(--eventcrew-line);
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.eventcrew-signup .eventcrew-admin-crew * + .eventcrew-admin-task { border-top: 1px solid var(--eventcrew-line); }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-nobody { padding: .6em 1em; }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-me-row-head { align-items: center; flex-wrap: nowrap; }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-me-row-head .eventcrew-me-day { min-width: 0; overflow-wrap: anywhere; }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-roster .eventcrew-me-row-head select {
    flex: none; width: auto; max-width: 55%; min-height: 36px; padding: .2em .4em; font-size: .9em;
}
.eventcrew-signup .eventcrew-me-what > span + span::before { content: " · "; }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-attend { padding: 0 1em .4em; border-top: 1px solid var(--eventcrew-line); }
.eventcrew-signup .eventcrew-admin-crew .eventcrew-admin-add { padding: .2em 1em .5em; border-top: 1px solid var(--eventcrew-line); }
/* A status line with its text-link actions after it, wrapping between links. */
.eventcrew-signup .eventcrew-admin-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.2em; }
.eventcrew-signup .eventcrew-admin-links + .eventcrew-admin-links { margin-top: .5em; }
.eventcrew-signup .eventcrew-admin-line { flex-basis: 100%; font-size: .9em; }
.eventcrew-signup .eventcrew-me-actions .eventcrew-admin-fold[open] { flex-basis: 100%; }
.eventcrew-signup .eventcrew-admin-blocked { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; }
/* Tasks: the date menu on one line with its label; a role's folds stacked inside its form. */
.eventcrew-signup .eventcrew-admin-search select { flex: 1 1 auto; min-width: 0; width: auto; }
.eventcrew-signup .eventcrew-admin-folds > .eventcrew-admin-search { flex-basis: 100%; }
.eventcrew-signup .eventcrew-admin-fold > .eventcrew-admin-search { margin: .3em 0 .5em; }
.eventcrew-signup .eventcrew-admin-form .eventcrew-admin-fold[open] { display: flex; flex-direction: column; gap: .5em; padding-bottom: .5em; }
.eventcrew-signup .eventcrew-admin-fold > p { margin: 0; }
.eventcrew-signup .eventcrew-admin-count { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.eventcrew-signup .eventcrew-admin-count input[type="number"] { flex: 0 0 6em; width: 6em; }
/* Messages: a sub-title strip per text or event, each language's text a row. */
.eventcrew-signup .eventcrew-admin-card .eventcrew-admin-sub {
    margin: 0; padding: .6em 1em; font-size: .95em; text-wrap: wrap;
    border-top: 1px solid var(--eventcrew-line); border-bottom: 1px solid var(--eventcrew-line);
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.eventcrew-signup .eventcrew-admin-sub + .eventcrew-card-body,
.eventcrew-signup .eventcrew-admin-sub + .eventcrew-plain-list { border-top: 0; }
.eventcrew-signup .eventcrew-admin-text { white-space: pre-line; font-size: .9em; }
.eventcrew-signup .eventcrew-admin-texts .eventcrew-me-day { font-size: .9em; }
.eventcrew-signup .eventcrew-admin-events { margin: .3em 0 .5em; padding-left: 1.2em; }
.eventcrew-signup .eventcrew-admin-lead + .eventcrew-admin-events { margin-top: 0; }
.eventcrew-signup .eventcrew-card-body > .eventcrew-admin-lead { margin: 0; }
.eventcrew-signup .eventcrew-admin-line + .eventcrew-admin-line { margin-top: .3em; }
/*
 * One entry in the Me tab's Tickets, Tasks, Past tickets and Past tasks
 * (signup-me-row.php, Owner 2026-11-08): the day in bold with the times or
 * the status on the right, the event's name, its DJs, what it is, then a
 * line of small text links. A thin accent bar on the left ties the lines of
 * one entry together, so a card reads as entries, not a run of links.
 */
.eventcrew-signup .eventcrew-me-list li.eventcrew-me-row {
    gap: .05em;
    padding-block: .6em;
    overflow-wrap: break-word;
    border-left: 3px solid color-mix(in srgb, var(--eventcrew-accent) 70%, transparent);
}
.eventcrew-signup .eventcrew-me-row-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 0 .75em;
}
.eventcrew-signup .eventcrew-me-day { font-weight: 700; font-size: 1.05em; }
.eventcrew-signup .eventcrew-me-time { font-size: .85em; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eventcrew-signup .eventcrew-me-status {
    padding: 0 .5em; border: 1px solid var(--eventcrew-line); border-radius: 999px;
    font-size: .8em; opacity: .85; white-space: nowrap;
}
.eventcrew-signup .eventcrew-me-event { font-weight: 600; }
.eventcrew-signup .eventcrew-me-what { font-size: .85em; opacity: .8; }
/* The actions: small text links on one line, wrapping between links only. */
.eventcrew-signup .eventcrew-me-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 1em;
    margin-top: .1em; font-size: .9em;
}
.eventcrew-signup .eventcrew-me-actions .eventcrew-textlink { min-height: 36px; white-space: nowrap; }
.eventcrew-signup .eventcrew-me-actions .eventcrew-inline-form { align-self: center; }
/* Give away opened: its form takes the whole width under the links. */
.eventcrew-signup .eventcrew-me-actions .eventcrew-give[open] { flex-basis: 100%; }
.eventcrew-signup form { margin: 0; }

/*
 * One task: what and when on the left, how full in the middle, the action on
 * the right. Wraps to two rows on a narrow phone rather than crushing the
 * button.
 */
/*
 * A two-column grid, not a wrapping flex row.
 *
 * Flex-wrap was the wrong tool: it means "put this on a new line whenever it
 * does not fit", and then every fix is an argument about what counts as
 * fitting. A grid of "everything left, as much as is left over" and "the
 * action, exactly as wide as it needs" cannot wrap at all - the name and time
 * wrap inside their own column instead, which is where wrapping belongs.
 *
 * minmax(0, 1fr) rather than 1fr, because a bare 1fr still refuses to go below
 * its content's minimum width - the same trap min-width:auto sets on a flex
 * item, and the reason a long event name could shove the button aside.
 */
/*
 * The name column keeps at least 9em (or the whole row, if narrower): a wide
 * action beside it squeezed "Decorate" down to "Decor / ate" (2026-11-08).
 * Names wrap between words only; a single word longer than the line is the one
 * case left to break.
 */
.eventcrew-signup .eventcrew-task-row {
    display: grid;
    grid-template-columns: minmax(min(9em, 100%), 1fr) auto;
    align-items: center;
    gap: .75em;
    padding: .6em 0; border-bottom: 1px solid var(--eventcrew-line);
}
.eventcrew-signup .eventcrew-task-row:last-child { border-bottom: 0; }
.eventcrew-signup .eventcrew-task-main {
    display: flex; flex-direction: column; gap: .1em;
    min-width: 0; overflow-wrap: break-word; word-break: normal;
}
.eventcrew-signup .eventcrew-task-role { font-weight: 600; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
/* The time on one line: "17:00–18:30" must not wrap at its dash. */
.eventcrew-signup .eventcrew-task-when { font-size: .85em; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
/*
 * Take someone's task: a text link on its own line under the row, spanning
 * both columns and right aligned under the count. The row's gap is pulled back
 * so it sits with its row; the link itself keeps the 44px tap height. Opened,
 * the holders' names line up on the right too.
 */
.eventcrew-signup .eventcrew-task-takeover {
    grid-column: 1 / -1; justify-self: end; text-align: right;
    margin-top: -.6em;
}
.eventcrew-signup .eventcrew-task-takeover summary.eventcrew-textlink {
    display: inline-flex; line-height: inherit; white-space: normal;
}
.eventcrew-signup .eventcrew-task-takeover form { margin: 0 0 0 .75em; }
.eventcrew-signup .eventcrew-task-names { display: block; font-size: .85em; opacity: .8; overflow-wrap: anywhere; }
.eventcrew-signup .eventcrew-task-desc { font-size: .85em; }

/*
 * The (i) button after a task's name, and the bubble it opens. The bubble is
 * a popover, so the browser puts it above the page, centred, and closes it on
 * a tap outside or Esc. The ::after widens the place you can tap to about
 * 40px without making the circle itself bigger.
 */
.eventcrew-signup .eventcrew-about-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35em; height: 1.35em; margin-left: .35em; padding: 0;
    border: 1px solid currentColor; border-radius: 50%;
    background: transparent; color: inherit; opacity: .85;
    font: italic 700 .8em/1 Georgia, "Times New Roman", serif;
    vertical-align: .1em; cursor: pointer;
}
.eventcrew-signup .eventcrew-about-btn::after { content: ""; position: absolute; inset: -10px; }
.eventcrew-signup .eventcrew-about-btn:hover,
.eventcrew-signup .eventcrew-about-btn:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
/* Without popover support the text shows under the name, as small print. */
.eventcrew-signup .eventcrew-about { font-size: .85em; font-weight: 400; }
@supports selector(:popover-open) {
    .eventcrew-signup .eventcrew-about[popover] {
        max-width: min(22em, calc(100vw - 2em));
        margin: auto; padding: .9em 1.1em;
        border: 0; border-radius: var(--eventcrew-radius, 8px);
        background: #222; color: #fff;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
        font-size: 1rem; line-height: 1.5;
    }
    .eventcrew-signup .eventcrew-about[popover]::backdrop { background: rgba(0, 0, 0, .35); }
    .eventcrew-signup .eventcrew-about strong { display: block; margin-bottom: .3em; }
}

/*
 * The Help tab: the welcome text and the organizer guide. Headings get room
 * above them; a list whose lines start with an emoji uses the emoji as its
 * bullet, so it has no dot and no indent.
 */
.eventcrew-signup .eventcrew-help p { margin: 0 0 1em; line-height: 1.6; }
.eventcrew-signup .eventcrew-help-heading { margin: 1.8em 0 .6em; font-size: 1.1em; scroll-margin-top: 1em; }
/* In a Help card the heading is the card's title, so it loses the gap above. */
.eventcrew-signup .eventcrew-help-card .eventcrew-event-title { margin: 0; font-size: 1.05em; line-height: 1.3; }
.eventcrew-signup .eventcrew-help-card .eventcrew-card-body { padding: .8em 1em; }
.eventcrew-signup .eventcrew-help-card .eventcrew-card-body > :last-child { margin-bottom: 0; }
.eventcrew-signup .eventcrew-help-card .eventcrew-help-heading:not(.eventcrew-event-title) { margin-top: 1em; }
.eventcrew-signup .eventcrew-help-list { margin: 0 0 1.2em; line-height: 1.6; }
.eventcrew-signup .eventcrew-help-list li { margin: 0 0 .7em; }
.eventcrew-signup .eventcrew-help-list.is-emoji { list-style: none; padding: 0; }
/* Bot commands and other things to type, kept on one line. */
.eventcrew-signup .eventcrew-cmd {
    white-space: nowrap; font-size: .9em; padding: .05em .35em; border-radius: 4px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
/* A centred outlined button, like the crew guide button under the board. */
.eventcrew-signup .eventcrew-links.eventcrew-help-orglink { margin: 0 0 1.2em; }
.eventcrew-signup .eventcrew-help-organizer { margin-top: 2em; scroll-margin-top: 1em; }
.eventcrew-signup .eventcrew-help-organizer > h2 { margin: 0 0 .8em; }
/* The Help tab's parts, named as in the bot's Help menu (Owner 2026-11-08). */
.eventcrew-signup .eventcrew-help-part { margin: 1.6em 0 .8em; scroll-margin-top: 1em; }
.eventcrew-signup .eventcrew-faq-item { border-bottom: 1px solid rgba(127, 127, 127, .25); padding: .5em 0; }
.eventcrew-signup .eventcrew-faq-item:last-child { border-bottom: 0; }
.eventcrew-signup .eventcrew-faq-item summary { cursor: pointer; font-weight: 600; line-height: 1.4; }
.eventcrew-signup .eventcrew-faq-item p { margin: .5em 0 .2em; }

/* The count above the action, the pair as narrow as the button itself. */
.eventcrew-signup .eventcrew-task-side {
    display: flex; flex-direction: column; align-items: center; gap: .35em;
}

/*
 * Capacity: one pip per slot, filled for each person signed up, with the count
 * spelled out beside it. The dots alone read at a glance but do not say what
 * they are counting - the number is what makes them legible the first time.
 */
.eventcrew-signup .eventcrew-capacity { display: inline-flex; gap: .45em; align-items: center; }
.eventcrew-signup .eventcrew-pips { display: inline-flex; gap: 5px; align-items: center; }
/*
 * Big enough to see and drawn at full strength. A hairline circle dimmed to
 * half opacity is invisible at this size, so an empty slot is a solid ring in
 * the same green and a filled one is that ring filled in - the difference is
 * ink, not transparency. border-box, so the ring does not inflate the circle.
 */
/*
 * Whole pixels, not em. At .85em these were 13.6px boxes with a 2px border and
 * a 50% radius, rasterized onto a whole-pixel grid - so the curve came out
 * uneven, and because the gap was fractional too, each pip landed on a
 * different sub-pixel offset and rounded differently from its neighbour. A
 * decorative 12px dot has nothing to gain from scaling with the text and
 * everything to gain from being the same 12px every time.
 */
/*
 * Solid discs, not rings. A 2px ring on a 12px dot gives the renderer two
 * curved edges to anti-alias across about twelve pixels of diameter, which is
 * not enough to describe both - hence the flat spots and the faintly lumpy
 * outline. A filled shape has one edge, and comes out round at any size and on
 * any display. The two states then differ only in colour, which is the thing
 * they are actually meant to differ in.
 */
.eventcrew-signup .eventcrew-pip {
    box-sizing: border-box;
    width: 12px; height: 12px; border-radius: 50%;
    border: 0;
    /* The page's own text colour, faint: no theme detection needed, and it
       reads as an empty slot rather than a differently-coloured full one. */
    background: color-mix(in srgb, currentColor 25%, transparent);
    flex: none;
}
.eventcrew-signup .eventcrew-pip.is-filled { background: var(--eventcrew-pip); }
/* Why a row cannot be taken, in the space its button would have occupied. */
.eventcrew-signup .eventcrew-blocked {
    font-size: .8em; opacity: .7; text-align: right;
    min-width: 7.5em; line-height: 1.3;
}
.eventcrew-signup .eventcrew-capacity-count {
    font-size: .8em; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/*
 * Sign out, Sign out everywhere and Delete are the theme's own buttons, and
 * this sheet adds nothing to them but the danger colour.
 *
 * They began as bare underlined text, which inherited the page's colour and sat
 * on whatever the theme put behind it - unreadable over a dark background image,
 * and the one control somebody might urgently need. Four releases tried to fix
 * that here: two by choosing a better text colour, one by inventing a grey
 * surface, one by stopping that surface silently vanishing. All of them were
 * this stylesheet trying to decide contrast against a background it cannot see.
 *
 * wp-element-button is what every other button on the page already wears - Save
 * preferences, Get my ticket, and the board's Sign up and Cancel, which add a
 * modifier on top of it exactly as the danger rule below does. Wearing it hands
 * contrast, padding, radius and border back to the theme, which decides them
 * once for the whole site and knows what the background is.
 *
 * There is deliberately no font-size here. An earlier .85em shrank the label
 * while the theme's padding - in px, as most themes write it - stayed put, so
 * the button read as a slab of padding around small text and looked nothing
 * like the ones beside it. Overriding one half of a size the theme sets in two
 * places is how that happens.
 */
.eventcrew-signup button.eventcrew-linkbtn {
    cursor: pointer;
}

.eventcrew-signup .eventcrew-danger { margin: .4em 0; }
/*
 * Text links: the less-used actions (Sign out, Cancel, Edit, Previous/Next,
 * Reset import…), drawn as underlined text so the page has few buttons. The
 * same look for a link and for a form's submit button. The page's own text
 * colour, so it reads on any background, as the Suomi | English links do. At
 * least 44px tall to tap.
 *
 * Delete my data keeps a thick red underline rather than red text: red text
 * that is readable on a dark page turns pink, and red enough to mean danger
 * cannot be read there (see the note on --eventcrew-stop).
 */
.eventcrew-signup .eventcrew-textlink {
    display: inline-flex; align-items: center; min-height: 44px;
    margin: 0; padding: 0 .1em; background: none; border: 0; border-radius: 0;
    box-shadow: none; font: inherit; color: inherit; letter-spacing: normal;
    text-transform: none; text-decoration: underline; text-underline-offset: .2em;
    cursor: pointer; opacity: .9;
}
.eventcrew-signup .eventcrew-textlink:hover,
.eventcrew-signup .eventcrew-textlink:focus-visible { opacity: 1; text-decoration-thickness: 2px; }
.eventcrew-signup .eventcrew-textlink-danger,
.eventcrew-signup .eventcrew-textlink-danger:hover,
.eventcrew-signup .eventcrew-textlink-danger:focus-visible {
    text-decoration-color: #e53935; text-decoration-thickness: 3px;
}
/*
 * The Settings cards' buttons: one size, centred in their card. Save and Sign
 * out everywhere are outlined in the page's text colour (the theme's filled
 * primary is too loud for a settings page); Delete keeps its red fill.
 */
.eventcrew-signup button.eventcrew-settings-btn {
    display: block; margin: 1em auto 0; min-width: min(100%, 15em);
    background: transparent; color: inherit;
    border: 1px solid currentColor; border-radius: var(--eventcrew-radius);
    padding: .55em .8em; font: inherit; line-height: 1.4;
    letter-spacing: .04em; max-width: 100%;
}
.eventcrew-signup button.eventcrew-settings-btn:hover,
.eventcrew-signup button.eventcrew-settings-btn:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
}
/* Pushed to the far end of the identity row, whatever the name's length. */
.eventcrew-signup .eventcrew-signout { margin: 0 0 0 auto; }
/*
 * The language switch (Suomi | English | ...), between the name and Sign out. It takes the push to the far
 * end itself and Sign out sits right after it. Plain text buttons: the one in
 * use is bold, the other underlined like a link.
 */
.eventcrew-signup .eventcrew-language {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: 0 0 0 auto;
}
.eventcrew-signup .eventcrew-language + .eventcrew-signout { margin-left: .5em; }
.eventcrew-signup .eventcrew-language button {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    text-decoration: underline; cursor: pointer;
}
.eventcrew-signup .eventcrew-language button[aria-pressed="true"] {
    font-weight: 700; text-decoration: none;
}

/*
 * Sign up reads go, Cancel reads stop. Go takes the crew's accent so the page
 * matches the app and the emails; stop stays a deep red, which is the one
 * colour a theme should not get to reassign.
 */
/*
 * One box for all three, so "Sign up", "Cancel" and "Full" line up down the
 * right edge and every row is the same height.
 *
 * Signed out, Sign up is an <a>, not a <button>, and that is where it went
 * wrong before: an <a> is content-box, so min-height 44px plus the vertical
 * padding made it about 61px tall and min-width 7.5em plus the side padding
 * made it wider than Full beside it, which grew its row. And an <a> does not
 * centre its text vertically the way a <button> does, so the word sat at the
 * top of the extra height. border-box and a centring inline-flex make the
 * link, the buttons and the <summary> one 44px box; no vertical padding, so
 * the theme's 1rem button padding cannot come back through it. A transparent
 * 1px border gives Sign up and Cancel the same outer size as Full's outline.
 */
.eventcrew-signup .eventcrew-btn-go,
.eventcrew-signup .eventcrew-btn-stop,
.eventcrew-signup .eventcrew-btn-full {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 7.5em; margin: 0; padding: 0 1em;
    border: 1px solid transparent; border-radius: var(--eventcrew-radius); cursor: pointer;
    font: inherit; font-size: .85em; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none;
}
.eventcrew-signup form.eventcrew-action button[disabled] { opacity: .6; cursor: default; }
/* A role task: Sign up opens "Count toward free-entry credit?" with Yes / No. */
/*
 * The summary is not a <button>, so it does not centre its own text: with
 * min-height 44px the word sat at the top. A 44px line height centres the word
 * in every browser (Safari does not reliably lay out a <summary> as flex, which
 * was the 1.52.4 attempt); no vertical padding, so the box is exactly 44px,
 * the height of the plain Sign up buttons on the other rows.
 */
.eventcrew-signup .eventcrew-credit-ask summary {
    list-style: none; display: inline-block; box-sizing: border-box;
    padding-top: 0; padding-bottom: 0; line-height: 44px; white-space: nowrap;
    vertical-align: middle;
}
.eventcrew-signup .eventcrew-credit-ask summary::-webkit-details-marker { display: none; }
.eventcrew-signup .eventcrew-credit-ask[open] summary { display: none; }
.eventcrew-signup .eventcrew-credit-ask form { display: inline-block; margin: .25em .25em 0 0; }
.eventcrew-signup .eventcrew-credit-ask form .eventcrew-btn-go { min-width: 4em; }
.eventcrew-signup .eventcrew-btn-go { background: var(--eventcrew-go); color: var(--eventcrew-on-go); }
.eventcrew-signup .eventcrew-btn-go:hover,
.eventcrew-signup .eventcrew-btn-go:focus-visible { background: var(--eventcrew-go-hover); color: var(--eventcrew-on-go); }
/* A green ring outside the button: reads on the dark page (6.5:1) and on a light one. */
.eventcrew-signup .eventcrew-btn-go:focus-visible { outline: 2px solid var(--eventcrew-go); outline-offset: 2px; }
.eventcrew-signup .eventcrew-btn-stop { background: var(--eventcrew-stop); color: #fff; }
.eventcrew-signup .eventcrew-btn-stop:hover { filter: brightness(.9); color: #fff; }
.eventcrew-signup .eventcrew-btn-full {
    background: transparent; color: inherit; opacity: .5; cursor: not-allowed;
    border: 1px solid var(--eventcrew-line);
}

/*
 * The buttons at the top of the page: the Telegram group filled (the theme's own
 * button, as the main action) and the crew guide under it, each on its own
 * row at every screen width. Both the same height. The outline is drawn
 * here because the theme only styles is-style-outline inside a block wrapper.
 */
.eventcrew-signup .eventcrew-links {
    display: flex; flex-direction: column; align-items: center; gap: .6em;
    margin: 0 0 1.2em;
}
.eventcrew-signup .eventcrew-links .wp-element-button {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 44px; padding: .5em 1.1em;
    border-radius: var(--eventcrew-radius); font-weight: 600; text-decoration: none;
    /* A row of its own, as wide as on one row: up to 18em, less on a narrow screen. */
    flex: none; width: 100%; max-width: 18em; white-space: nowrap;
}
.eventcrew-signup .eventcrew-links .eventcrew-link-icon { flex: none; width: 1.2em; height: 1.2em; }

/*
 * Spending a credit. A stacked block rather than a cramped inline row: label,
 * the date on a line of its own, then the button centred under it. The select
 * is dressed to match the sign-in field - same height, radius, border and
 * surface - instead of being left as the browser's grey default, which was the
 * one control on the page that looked like it belonged to a different decade.
 */
.eventcrew-signup .eventcrew-redeem {
    display: flex; flex-direction: column; gap: .5em;
    margin: 1em 0; padding: 1em;
    border: 1px solid var(--eventcrew-line); border-radius: var(--eventcrew-radius);
}
.eventcrew-signup .eventcrew-redeem label { font-weight: 600; }
.eventcrew-signup .eventcrew-redeem select {
    box-sizing: border-box; width: 100%;
    height: 3em; padding: 0 2.5em 0 1em;
    font: inherit; font-size: 1rem; line-height: 1;
    /*
     * A light tint of the text colour, as on the Admin card fields: the
     * surface colour is the theme's base colour, which on a dark theme is a
     * bright yellow box.
     */
    color: inherit;
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid var(--eventcrew-line);
    border-radius: var(--eventcrew-radius);
    /* The browser's own arrow is part of the grey look being replaced. */
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.15em center, right .85em center;
    background-size: .35em .35em, .35em .35em;
    background-repeat: no-repeat;
}
/* The open dropdown list is drawn by the browser: dark text on white there. */
.eventcrew-signup .eventcrew-redeem select option { color: #222; background: #fff; }
.eventcrew-signup .eventcrew-redeem select:focus {
    outline: none;
    border-color: var(--eventcrew-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--eventcrew-accent) 25%, transparent);
}
.eventcrew-signup .eventcrew-redeem button { align-self: center; min-height: 44px; }

/* The collapsible disclosures. */
/* Part of the header card, so it sits tight under the name. */
.eventcrew-signup .eventcrew-standing { margin: 0 0 .2em; padding: 0; list-style: none; font-weight: 600; }
/* One item a line, a fixed-width icon in front so the texts line up. */
.eventcrew-signup .eventcrew-standing li { display: flex; align-items: baseline; gap: .45em; margin: 0 0 .15em; padding: 0; }
.eventcrew-signup .eventcrew-standing li::before { content: none; }
.eventcrew-signup .eventcrew-standing-icon { flex: none; display: inline-block; width: 1.3em; text-align: center; font-weight: normal; }
/*
 * The standing bar (StandingBar): one fill on a track, green, orange or red
 * by the zone (the same colours as the email; mid tones that show on a light
 * and a dark page), and a small mark at the good-standing limit. The numbers
 * come in as custom properties on the element.
 */
.eventcrew-signup .eventcrew-standing-bar { position: relative; max-width: 20em; margin: .5em 0 .2em; --eventcrew-bar-colour: #2e9d4a; }
.eventcrew-signup .eventcrew-standing-bar--warning { --eventcrew-bar-colour: #ee8a1a; }
.eventcrew-signup .eventcrew-standing-bar--danger { --eventcrew-bar-colour: #d9534f; }
.eventcrew-signup .eventcrew-standing-bar-track { display: block; height: .8em; border-radius: .4em; background: color-mix(in srgb, currentColor 15%, transparent); overflow: hidden; }
.eventcrew-signup .eventcrew-standing-bar-fill { display: block; height: 100%; width: var(--eventcrew-bar-fill, 0%); background: var(--eventcrew-bar-colour); }
.eventcrew-signup .eventcrew-standing-bar-limit { position: absolute; top: -.15em; bottom: -.15em; left: var(--eventcrew-bar-limit); width: 2px; margin-left: -1px; background: currentColor; opacity: .6; }
.eventcrew-signup .eventcrew-standing-bar-label { margin: 0 0 .4em; }
/*
 * The header card: name, language and Sign out in its top bar, standing in
 * its body. The bar keeps the identity row's centring and its smaller text.
 */
/* Narrower than the panels under it, and centred. */
.eventcrew-signup .eventcrew-header-card { max-width: 32em; margin-inline: auto; }
.eventcrew-signup .eventcrew-header-card .eventcrew-identity { margin: 0; align-items: center; }
.eventcrew-signup .eventcrew-header-card .eventcrew-identity-name { font-weight: 600; }
.eventcrew-signup .eventcrew-header-card .eventcrew-disclosure { margin-bottom: 0; }
/* The crew guide under the person's details: one card body, so no second gap. */
.eventcrew-signup .eventcrew-header-card .eventcrew-card-body + .eventcrew-header-guide { padding-top: 0; }
/* The crew guide link, centred under the details. */
.eventcrew-signup .eventcrew-header-guide { text-align: center; }
.eventcrew-signup .eventcrew-header-guide p { margin: 0; }
/* A Me-tab card clears the top of the screen when a link scrolls to it. */
.eventcrew-signup .eventcrew-me-card[id] { scroll-margin-top: 1em; }
.eventcrew-signup .eventcrew-disclosure { margin: .3em 0 .8em; font-size: .9em; }
.eventcrew-signup .eventcrew-disclosure summary { cursor: pointer; opacity: .8; padding: .3em 0; }
.eventcrew-signup .eventcrew-score-help table { border-collapse: collapse; margin: .4em 0; }
.eventcrew-signup .eventcrew-score-help td { padding: .1em .8em .1em 0; }
.eventcrew-signup .eventcrew-num { text-align: right; font-variant-numeric: tabular-nums; }

.eventcrew-signup .eventcrew-matrix { border-collapse: collapse; }
.eventcrew-signup .eventcrew-matrix th,
.eventcrew-signup .eventcrew-matrix td { padding: .3em .6em .3em 0; }
.eventcrew-signup .eventcrew-tick { text-align: center; }

.eventcrew-signin-row {
    display: flex;
    align-items: stretch;
    gap: 0.75em;
    flex-wrap: wrap;
}

/*
 * With a captcha in the row there are three controls, and a 300px widget will
 * never share a baseline with a field and a button. Stacking them to a single
 * column of one width is the only arrangement that does not look accidental.
 */
.eventcrew-signin-row.has-captcha {
    flex-direction: column;
    align-items: stretch;
    /* Centred, because on a signed-out page this column is the only thing
       there and hugging the left edge just looks like it fell over. */
    max-width: 22em;
    margin-inline: auto;
}
/* The column is centred on the page; the text inside the field is not. An
   email typed down the middle of its box looks like a mistake. */
.eventcrew-signin-row.has-captcha .wp-element-input { min-width: 0; flex: none; }
.eventcrew-signin-row.has-captcha .wp-element-button { width: 100%; }
/*
 * The widget runs at its flexible size, which fills the column, and is 65px
 * tall. The field and the button take the same 65px, so the three controls
 * are one width and one height instead of three different boxes.
 */
.eventcrew-signin-row.has-captcha .eventcrew-turnstile { width: 100%; margin: 0; }
.eventcrew-signin-row.has-captcha .wp-element-input,
.eventcrew-signin-row.has-captcha .wp-element-button { height: 65px; min-height: 65px; max-height: 65px; margin: 0; }
/* The widget shows only when Cloudflare needs a click (interaction-only), so
   it keeps no empty space; the button says "Checking you're human…" meanwhile. */
/* The compact widget (a column under 300px) is narrower than the column, so
   it is centred in it like the field and button above and below it. */
.eventcrew-signup .eventcrew-turnstile[data-size="compact"] { display: flex; justify-content: center; }

/* The note under the centred form is centred with it. A sibling selector, not
   :has(), so this needs nothing newer than the rest of the sheet. */
.eventcrew-signup .has-captcha ~ .eventcrew-hint { text-align: center; }

.eventcrew-signin-row .wp-element-input,
.eventcrew-signin-row .wp-element-button {
    box-sizing: border-box;
    height: 3em;              /* the shared source of truth */
    padding-block: 0;         /* kill vertical padding differences */
    padding-inline: 1em;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--eventcrew-radius);
    border: 1px solid var(--eventcrew-ink);
}

/*
 * The newcomer's questions above the email field (JoinAnswers): Yes and No
 * on one line, and the two numbers only once Yes is ticked. Centred with the
 * column when the captcha stacks the row.
 */
.eventcrew-signup .eventcrew-join { border: 0; margin: 0 0 .9em; padding: 0; min-width: 0; }
.eventcrew-signup .eventcrew-join.has-captcha { max-width: 22em; margin-inline: auto; }
.eventcrew-signup .eventcrew-join legend { padding: 0; font-weight: 600; }
.eventcrew-signup .eventcrew-join .eventcrew-hint { margin: .1em 0 .3em; }
.eventcrew-signup .eventcrew-join-choice { display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
.eventcrew-signup .eventcrew-join-choice label { display: inline-flex; align-items: center; gap: .35em; cursor: pointer; }
/* The numbers show once Yes is ticked; a browser without :has() shows them always (the bot asks them too). */
.eventcrew-signup .eventcrew-join-more { display: flex; flex-wrap: wrap; gap: .6em 1.2em; margin-top: .6em; }
@supports selector(:has(*)) {
    .eventcrew-signup .eventcrew-join-more { display: none; }
    .eventcrew-signup .eventcrew-join:has(input[value="yes"]:checked) .eventcrew-join-more { display: flex; }
}
.eventcrew-signup .eventcrew-join-more label { display: flex; flex-direction: column; gap: .3em; font-size: .9em; max-width: 100%; }
.eventcrew-signup .eventcrew-join-more input { box-sizing: border-box; width: 6em; height: 2.4em; padding-inline: .6em; }

/*
 * Signed out, the sign-in card wears the banner the Telegram board message
 * carries (BoardBanner::url(), a 3:1 strip of the chosen page's picture).
 * A dark layer over it keeps the white heading, question and notes at AA
 * whatever the photo: at least 55% black, so even a white pixel under it is no
 * lighter than #737373. The dark colour under the picture stands in until it
 * loads or when it fails. The picture is a background, so it moves nothing.
 */
.eventcrew-signup .eventcrew-signin-card.has-image {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .8)),
        var(--eventcrew-event-image) center 25% / cover no-repeat,
        #1d1630;
    color: #fff;
}
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-event-head { background: rgba(0, 0, 0, .25); }
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-event-title,
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-card-body > p,
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-signin-choice-prompt,
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-hint {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.eventcrew-signup .eventcrew-signin-card.has-image .eventcrew-hint { opacity: 1; }

/*
 * A guest's Sign up scrolls back to the sign-in card, which then glows once
 * (about a second) to show where to go. Programmatic focus lands on the card
 * for screen readers and the keyboard; it draws no outline of its own. Less
 * motion: a steady ring for the same second instead of the pulse.
 */
.eventcrew-signup .eventcrew-signin-card { scroll-margin-top: 16px; }
.eventcrew-signup .eventcrew-signin-card:focus { outline: none; }
.eventcrew-signup .eventcrew-signin-card.is-calling { animation: eventcrew-signin-call 1s ease-out 1; }
@keyframes eventcrew-signin-call {
    0% { box-shadow: 0 0 0 0 rgba(255, 196, 64, .9); }
    35% { box-shadow: 0 0 0 6px rgba(255, 196, 64, .7); }
    100% { box-shadow: 0 0 0 14px rgba(255, 196, 64, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .eventcrew-signup .eventcrew-signin-card.is-calling {
        animation: none;
        box-shadow: 0 0 0 4px rgba(255, 196, 64, .9);
    }
}

/*
 * The sign-in choice: the Email button and the Telegram button side by side,
 * centred. The Telegram button has Telegram's colours and paper-plane icon;
 * the page script gives it the Email button's shape and font.
 */
.eventcrew-signup .eventcrew-signin-choice[hidden],
.eventcrew-signup .eventcrew-signin[hidden],
.eventcrew-signup .eventcrew-signin-back[hidden],
.eventcrew-signup .eventcrew-tg-note[hidden],
.eventcrew-signup .eventcrew-tg-wait[hidden] { display: none; }
.eventcrew-signup .tg-auth-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 28px;
    border: none;
    border-radius: 22px;
    background: #119AF5;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-transform: none;
    cursor: pointer;
    user-select: none;
}
.eventcrew-signup .tg-auth-button:hover,
.eventcrew-signup .tg-auth-button:focus-visible { background: #1090E5; }
.eventcrew-signup .tg-auth-button::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M2.81376 10.5943C7.36914 8.61002 10.406 7.30175 11.9245 6.66971C16.265 4.86489 17.1658 4.55143 17.7542 4.54094C17.8836 4.53874 18.1716 4.57072 18.3596 4.72281C18.5158 4.85097 18.5598 5.0243 18.5818 5.14588C18.6013 5.26745 18.6282 5.54454 18.6062 5.76083C18.3719 8.23138 17.3539 14.2266 16.8363 16.9938C16.619 18.1647 16.1869 18.5572 15.7695 18.5955C14.8613 18.679 14.1728 17.996 13.294 17.42C11.9196 16.5185 11.1433 15.9575 9.80793 15.0779C8.26505 14.0613 9.26594 13.5025 10.1448 12.5895C10.3743 12.3505 14.373 8.71426 14.4487 8.38445C14.4585 8.34319 14.4683 8.18939 14.3755 8.10834C14.2852 8.02705 14.1508 8.05488 14.0532 8.07685C13.914 8.1081 11.7193 9.56015 7.4618 12.4328C6.83928 12.861 6.27536 13.0697 5.76758 13.0587C5.21097 13.0468 4.13689 12.7433 3.3386 12.484C2.3621 12.166 1.5833 11.9977 1.65166 11.4575C1.68583 11.1763 2.07406 10.8884 2.81376 10.5943Z' fill='white'/%3E%3C/svg%3E");
}
.eventcrew-signup .eventcrew-signin-choice-prompt { margin: 0 0 .75em; }
/* Both buttons one width: the row is as wide as its content, and its equal
   columns (side by side) or its single column (stacked) take the wider one. */
.eventcrew-signup .eventcrew-signin-choice-row {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 0.75em;
}
@media (min-width: 640px) {
    .eventcrew-signup .eventcrew-signin-choice-row { grid-auto-flow: column; }
}
.eventcrew-signup .eventcrew-signin-choice-row .tg-auth-button {
    width: auto;
    justify-content: center;
}
.eventcrew-signup .eventcrew-signin-choice-row .wp-element-button {
    box-sizing: border-box;
    height: 44px;
    padding-block: 0;
    padding-inline: 1.5em;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--eventcrew-radius);
}
.eventcrew-signup .eventcrew-tg-note { margin: .75em 0 0; }
/*
 * The code card after Telegram was pressed: "Your code", the four digits as
 * two boxed pairs, one line on what to do, then Open Telegram (or, once that
 * was pressed, "Waiting for Telegram..." and a link to open it again).
 * Centred, like the choice row it replaces.
 */
.eventcrew-signup .eventcrew-tg-wait { text-align: center; }
.eventcrew-signup .eventcrew-tg-wait p { margin: 0 0 .75em; }
.eventcrew-signup .eventcrew-tg-wait a:not(.tg-auth-button) { color: var(--eventcrew-accent); font-weight: 600; }
.eventcrew-signup .eventcrew-tg-code-label {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}
.eventcrew-signup .eventcrew-tg-wait .eventcrew-tg-code {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1rem;
}
.eventcrew-signup .eventcrew-tg-pair {
    box-sizing: border-box;
    min-width: 2.4em;
    padding: .1em .3em;
    border: 2px solid var(--eventcrew-line);
    border-radius: var(--eventcrew-radius);
    background: var(--eventcrew-surface);
    color: var(--eventcrew-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(2.25rem, 11vw, 3rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: .04em;
}
.eventcrew-signup .eventcrew-tg-wait .eventcrew-tg-open {
    display: flex;
    justify-content: center;
}
/* A link with the button's look: keep the theme's link colour and underline off it. */
.eventcrew-signup .eventcrew-tg-open .tg-auth-button,
.eventcrew-signup .eventcrew-tg-open .tg-auth-button:visited,
.eventcrew-signup .eventcrew-tg-open .tg-auth-button:hover,
.eventcrew-signup .eventcrew-tg-open .tg-auth-button:focus-visible {
    justify-content: center;
    color: #fff;
    text-decoration: none;
}
.eventcrew-signup .eventcrew-tg-waiting { font-weight: 600; }
/* Last, so it beats the display: flex rules above. */
.eventcrew-signup .eventcrew-tg-wait [hidden] { display: none; }
.eventcrew-signup .eventcrew-signin-back { margin: 0 0 .75em; font-size: 1rem; font-weight: 600; }
.eventcrew-signup .eventcrew-signin-back a { color: var(--eventcrew-accent); }
.eventcrew-signup .eventcrew-signin-expired { margin: 0 0 .75em; font-weight: 600; }

.eventcrew-signin-row .wp-element-input {
    background-color: var(--eventcrew-surface);
    color: var(--eventcrew-ink);
    min-width: 16em;
    flex: 1 1 16em;
}

.eventcrew-signin-row .wp-element-input:focus {
    outline: none;
    border-color: var(--eventcrew-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--eventcrew-accent) 25%, transparent);
}

.eventcrew-signin-row .wp-element-input::placeholder {
    color: var(--eventcrew-ink);
    opacity: 0.5;
}

/*
 * On a phone, the crew page uses nearly the whole screen width. Themes that
 * put the page in a framed column pad that frame on all sides, which on a
 * 390px screen left the cards about 290px. The negative side margins pull the
 * page out to 24px from each screen edge; min() keeps them at zero or less, so
 * a theme with less padding is never pushed inward.
 *
 * WordPress's own layout CSS sets `margin-left/right: auto !important` on
 * every block directly inside a constrained group (the page content), which
 * silently cancelled these margins in 1.52.0. Hence !important here too, with
 * a selector that is more specific than WordPress's, and no max-width cap.
 */
@media (max-width: 640px) {
    .is-layout-constrained > .eventcrew-signup,
    .eventcrew-signup {
        max-width: none;
        margin-left: min(0px, calc(50% - 50vw + 24px)) !important;
        margin-right: min(0px, calc(50% - 50vw + 24px)) !important;
    }
    /*
     * On a phone the identity row wrapped and Sign out dropped under the
     * name, on the left. Two columns instead: the name on the left, and on
     * the right Suomi | English with Sign out stacked under it.
     */
    .eventcrew-signup .eventcrew-header-card .eventcrew-identity {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        align-items: center; column-gap: .75em; row-gap: .4em;
    }
    .eventcrew-signup .eventcrew-identity:has(.eventcrew-language) .eventcrew-identity-name {
        grid-row: span 2;
    }
    .eventcrew-signup .eventcrew-header-card .eventcrew-language,
    .eventcrew-signup .eventcrew-header-card .eventcrew-signout {
        grid-column: 2; justify-self: end; margin: 0;
    }
}

/* Sign in with Telegram, while the code is made: a small spinner after the label. */
.tg-auth-button.is-busy {
    cursor: progress;
    opacity: .85;
}

.tg-auth-button.is-busy::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: eventcrew-tg-spin .7s linear infinite;
}

@keyframes eventcrew-tg-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tg-auth-button.is-busy::after { animation-duration: 2s; }
}

/*
 * The website's banner at the top of the Crew app page: the site logo alone
 * on the page colour, no picture or box behind it. A fixed height, so nothing
 * under it moves while the logo loads; the logo is sized by its height.
 */
.eventcrew-site-banner {
    --eventcrew-banner-height: clamp(64px, 9vw, 104px);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--eventcrew-banner-height);
    padding: 12px 16px 0;
}
.eventcrew-site-banner-home {
    display: block; max-width: 100%;
    line-height: 0; text-decoration: none; color: #fff;
}
.eventcrew-site-banner-logo {
    display: block;
    width: auto; max-width: 100%;
    height: calc(var(--eventcrew-banner-height) - 12px);
    object-fit: contain;
}
.eventcrew-site-banner-name {
    display: block;
    font-size: clamp(1.2em, 4vw, 2em); font-weight: 700; line-height: 1.2;
}