/* Tennessee Theatre Usher Portal — shared styles for shortcode output
   and the login gate. The theme (usher-portal-theme) provides page
   chrome (header, nav, footer) using the same variables so everything
   matches even if these load in a different order. */

:root {
	--tt-burgundy: #7A222E;
	--tt-burgundy-dark: #5C1A23;
	--tt-gold: #B8963E;
	--tt-gold-light: #D9C078;
	--tt-cream: #FAF3E9;
	--tt-card: #FFFFFF;
	--tt-ink: #2A1519;
	--tt-ink-soft: #6B4A4F;
	--tt-muted: #8A6165;
	--tt-border: #E8DCC8;
	--tt-tint: #F3E4E7;
	--tt-font-heading: Georgia, 'Times New Roman', serif;
	--tt-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Next show highlight ---------- */
.up-next-show {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--tt-burgundy);
	color: #fff;
	border-radius: 14px;
	padding: 16px 18px;
	font-family: var(--tt-font-body);
	margin-bottom: 24px;
}
.up-next-show .up-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.up-next-show-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #E7C9CE;
}
.up-next-show-name {
	font-family: var(--tt-font-heading);
	font-size: 17px;
	font-weight: 700;
	margin-top: 1px;
}
.up-next-show-date {
	font-size: 14px;
	color: #E7C9CE;
	margin-top: 2px;
}
/* Call Time / Position (2026-09-16, Jeff's request: "these are important
   and should be easily visible") -- deliberately brighter/bolder than the
   muted-pink label/date above, not just another line of the same weight,
   so they actually stand out on the tile rather than blending in. Each
   renders only when that request's own Position/Call Time text is set --
   see render_next_show_tile() in class-up-shortcodes.php. */
.up-next-show-detail {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-top: 4px;
}
.up-next-show-detail-label {
	font-weight: 600;
	color: #E7C9CE;
	margin-right: 4px;
}

/* ---------- Home page alerts & messages ---------- */
.up-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; font-family: var(--tt-font-body); }
.up-alert-tile {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--tt-tint);
	border: 1px solid var(--tt-border);
	border-left: 4px solid var(--tt-gold);
	border-radius: 12px;
	padding: 13px 14px;
	color: var(--tt-ink);
}
.up-alert-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(184, 150, 62, .18);
	color: var(--tt-burgundy);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.up-alert-body { flex: 1; min-width: 0; }
.up-alert-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tt-muted); margin-bottom: 3px; }
.up-alert-message { font-size: 13.5px; line-height: 1.45; color: var(--tt-ink); }
.up-alert-dismiss-form { flex-shrink: 0; }
.up-alert-dismiss {
	all: unset;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tt-muted);
	cursor: pointer;
}
.up-alert-dismiss:hover { background: rgba(122, 34, 46, .1); color: var(--tt-burgundy); }

/* ---------- Shows accordion ---------- */
.up-shows-list { display: flex; flex-direction: column; gap: 12px; font-family: var(--tt-font-body); }
/* 2026-09-14, Jeff's request: a consistent dark border on every show card,
   regardless of its state color -- the "no requests open" state's tint can
   be set arbitrarily light (e.g. white) via Settings -> Show Card Colors,
   which otherwise left the card with no visible edge at all against the
   cream page background on mobile. The border is now fixed/solid black
   here rather than derived from each state's tint (see the state rules
   below, which no longer set border-color), so every card stays clearly
   outlined no matter what colors are chosen. */
.up-show-card { background: var(--tt-card); border: 1px solid rgba(0, 0, 0, .3); border-radius: 14px; overflow: hidden; }
.up-show-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 16px;
	cursor: pointer;
}
.up-show-date-chip {
	width: 40px; height: 40px; border-radius: 10px; background: var(--tt-tint);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: var(--tt-burgundy); flex-shrink: 0; line-height: 1;
}
.up-show-date-chip span { font-size: 9px; font-weight: 700; text-transform: uppercase; }
.up-show-date-chip strong { font-size: 15px; font-weight: 700; }
.up-show-info { flex: 1; min-width: 0; text-align: left; }
.up-show-name { display: block; font-family: var(--tt-font-heading); font-size: 15.5px; font-weight: 700; color: var(--tt-ink); }
.up-show-meta { display: block; font-size: 12.5px; color: var(--tt-muted); margin-top: 1px; }
.up-show-sold { display: block; font-size: 12px; color: var(--tt-burgundy); font-weight: 600; margin: 6px 0 10px; }
.up-chevron { color: var(--tt-muted); transition: transform .15s ease; flex-shrink: 0; }
.up-show-card.is-open .up-chevron { transform: rotate(180deg); }
.up-show-panel { display: none; padding: 2px 16px 16px; border-top: 1px solid #F0E5D2; }
.up-show-card.is-open .up-show-panel { display: block; }
.up-usher-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F6EEDE; }
.up-usher-row:first-child { border-top: none; padding-top: 12px; }
.up-usher-name { font-size: 13.5px; color: var(--tt-ink); }
.up-mailto { color: var(--tt-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.up-mailto:hover { color: var(--tt-burgundy); text-decoration: underline; }
.up-mail-icon { opacity: .55; flex-shrink: 0; }
.up-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .2px; white-space: nowrap; }
.up-pill-head { background: var(--tt-burgundy); color: #fff; }
.up-pill-usher { background: var(--tt-tint); color: var(--tt-burgundy); }
.up-coming-soon { display: flex; align-items: center; gap: 10px; padding: 14px 0 6px; color: var(--tt-gold); }
.up-coming-soon span { font-size: 13.5px; color: var(--tt-muted); font-style: italic; }

/* 2026-09-15, Jeff's request: a running headcount at the bottom of a
   show's expanded assignment groups. */
.up-assignment-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tt-border); font-size: 12.5px; color: var(--tt-muted); }
.up-assignment-total strong { color: var(--tt-ink); }

/* Per-department assignment groups (2026-09-09): each is expandable/
   collapsible on its own, head/lead role listed first within it. */
.up-assignment-group-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	cursor: pointer;
	margin: 14px 0 2px;
}
.up-assignment-group:first-child .up-assignment-group-toggle { margin-top: 12px; }
.up-assignment-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tt-muted); font-weight: 700; }
.up-chevron-sm { color: var(--tt-muted); transition: transform .15s ease; flex-shrink: 0; display: inline-flex; }
.up-chevron-sm svg { width: 14px; height: 14px; }
.up-assignment-group.is-collapsed .up-chevron-sm { transform: rotate(-90deg); }
.up-assignment-group.is-collapsed .up-assignment-group-entries { display: none; }
.up-assignment-group-entries .up-usher-row:first-child { border-top: none; padding-top: 4px; }

/* Roster rows render as a fixed 4-column grid -- Role badge / Name / Call
   Time / Position (2026-09-09 follow-up: badge moved to the front, was
   Name/Call Time/Role/Position) -- so every row lines up down the page
   even when a column is blank for that person (2026-09-09, Jeff's request:
   "I would like things to be in columns and uniform... even if blank").
   Scoped to roster rows specifically (.up-assignment-group-entries), not
   the differently-shaped request-to-work rows below (.up-request-rows),
   which keep the base .up-usher-row space-between layout untouched. */
.up-assignment-group-entries .up-usher-row {
	display: grid;
	grid-template-columns: 30px minmax(64px, 1.3fr) 62px minmax(56px, 1fr);
	align-items: center;
	gap: 6px;
	justify-content: initial;
}
.up-assignment-group-entries .up-usher-name,
.up-assignment-group-entries .up-usher-call-time,
.up-assignment-group-entries .up-assignment-position { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-assignment-group-entries .up-pill { text-align: center; padding: 3px 4px; justify-self: start; }

/* A little breathing room between the assignments above and the
   positions-being-requested list below (2026-09-09, Jeff's request). */
.up-request-rows { margin-top: 14px; }
/* 2026-09-09, Jeff's request: when nothing's actionable and the viewer has
   no existing request for any of their roles on this show, one general
   placeholder replaces the (now empty) list of closed-role rows. */
.up-request-rows-empty { margin: 0; font-size: 13px; color: var(--tt-muted); font-style: italic; }

/* Per-assignment Call Time (its own column -- 2026-09-09, Jeff's request;
   replaced the old mailto envelope icon; rendered plain with no
   parentheses, per a same-day follow-up) and Position (2026-09-09). The
   role-wide admin note that used to also echo inline in this roster was
   removed the same day, now that each person's own Call Time covers that
   need -- see .up-show-notes below for its replacement, a per-SHOW note
   instead. */
.up-usher-call-time { font-size: 12px; color: var(--tt-muted); font-weight: 600; }
.up-assignment-position { font-weight: 600; color: var(--tt-ink-soft); font-size: 12px; }
.up-request-card-details { color: var(--tt-ink-soft); font-weight: 600; }

@media (max-width: 380px) {
	.up-assignment-group-entries .up-usher-row { grid-template-columns: 26px minmax(56px, 1.3fr) 52px minmax(46px, 1fr); gap: 4px; }
	.up-assignment-group-entries .up-usher-name,
	.up-assignment-group-entries .up-usher-call-time,
	.up-assignment-group-entries .up-assignment-position { font-size: 11.5px; }
	.up-assignment-group-entries .up-pill { font-size: 9.5px; padding: 3px 3px; }
}

/* Show Notes (2026-09-09, Jeff's request): an optional free-text note per
   show, rendered right under the show's own heading and above its
   assigned-staff roster whenever it's filled in -- day-of details, special
   notes, photo policy, etc. */
.up-show-notes { margin: 10px 0 4px; padding: 10px 12px; background: var(--tt-tint); border-left: 3px solid var(--tt-gold); border-radius: 4px; font-size: 13px; line-height: 1.45; color: var(--tt-ink-soft); }

/* ---------- Schedule timeline ---------- */
.up-schedule-list { display: flex; flex-direction: column; gap: 14px; font-family: var(--tt-font-body); }
.up-schedule-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 18px 18px 16px; }
.up-schedule-title { font-family: var(--tt-font-heading); font-size: 15.5px; font-weight: 700; color: var(--tt-ink); margin-bottom: 14px; }
.up-step { display: flex; gap: 12px; }
.up-step > div { padding-bottom: 16px; }
.up-step-last > div { padding-bottom: 0; }
.up-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tt-gold); margin-top: 4px; flex-shrink: 0; position: relative; }
.up-dot::after { content: ""; position: absolute; top: 14px; left: 4px; width: 1.5px; height: 26px; background: var(--tt-border); }
.up-step-last .up-dot::after { display: none; }
.up-dot-active { background: var(--tt-burgundy); }
.up-step-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tt-muted); font-weight: 700; }
.up-step-date { display: block; font-size: 14px; color: var(--tt-ink); margin-top: 1px; }

/* ---------- Documents ---------- */
.up-documents { font-family: var(--tt-font-body); display: flex; flex-direction: column; gap: 20px; }
.up-doc-group-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tt-muted); font-weight: 700; margin-bottom: 6px; }
.up-doc-list { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 2px 14px; }
.up-doc-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid #F0E5D2; text-decoration: none; color: inherit; }
.up-doc-row:first-child { border-top: none; }
.up-badge { font-size: 9.5px; font-weight: 700; padding: 3px 6px; border-radius: 5px; letter-spacing: .3px; flex-shrink: 0; background: var(--tt-tint); color: var(--tt-burgundy); }
.up-doc-title { flex: 1; font-size: 13.5px; color: var(--tt-ink); }
.up-doc-row svg { color: var(--tt-muted); flex-shrink: 0; }

/* ---------- Contact form ---------- */
.up-contact { font-family: var(--tt-font-body); }
.up-contact-intro { font-size: 14px; line-height: 1.5; color: var(--tt-ink-soft); max-width: 460px; margin: 0 0 18px; }
.up-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.up-label { font-size: 12px; font-weight: 700; color: var(--tt-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: -10px; }
.up-input {
	font-family: var(--tt-font-body); font-size: 16px; padding: 13px 14px; border-radius: 10px;
	border: 1.5px solid #E0CBAE; background: #fff; color: var(--tt-ink); box-sizing: border-box; width: 100%;
}
.up-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.up-notice-success { background: #E8F0E4; color: #2F5323; }
.up-notice-error { background: #F3E4E7; color: var(--tt-burgundy-dark); }

/* ---------- Buttons ---------- */
.up-button {
	font-family: var(--tt-font-body); font-size: 15px; font-weight: 600; padding: 13px 20px;
	border-radius: 10px; border: none; cursor: pointer; display: inline-block; text-align: center;
}
.up-button-primary { background: var(--tt-burgundy); color: #fff; }
.up-button-primary:hover { background: var(--tt-burgundy-dark); }
.up-button-outline { background: #fff; color: var(--tt-burgundy); border: 1.5px solid var(--tt-burgundy); padding: 8px 14px; font-size: 12.5px; }

/* ---------- Notify / signup block ---------- */
.up-notify { font-family: var(--tt-font-body); background: var(--tt-card); border: 1.5px solid var(--tt-gold-light); border-radius: 14px; padding: 6px 18px; }
.up-notify-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #F0E5D2; }
.up-notify-row:first-child { border-top: none; }
.up-icon-sm { width: 34px; height: 34px; border-radius: 9px; background: var(--tt-cream); display: flex; align-items: center; justify-content: center; color: var(--tt-gold); flex-shrink: 0; }
.up-notify-label { flex: 1; font-size: 13.5px; color: var(--tt-ink); font-weight: 600; }
.up-notify-row-form { flex-direction: column; align-items: stretch; }
.up-notify-row-form .up-notify-label { margin-bottom: 8px; }
.up-brevo-embed {
	width: 100%;
	/* No card here on purpose: the Brevo form is set to a transparent
	   background, so leaving this wrapper bare lets the theatre-cream
	   page background show straight through instead of boxing it in
	   white. */
}
.up-brevo-embed iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	/* Brevo's iframe embed is a fixed-height box, not an auto-resizing one —
	   there's no cross-origin signal telling us the form's real content
	   height, so we go tall enough that a typical name/email/consent form
	   never needs its own internal scrollbar (which is what was happening
	   at the old, tighter 520px floor). !important beats any inline
	   height/style Brevo's snippet itself carries. The page still scrolls
	   normally around this — only the iframe's *own* internal scrolling is
	   what we're avoiding here. */
	min-height: 1000px !important;
	border: none !important;
	background: transparent !important;
}

.up-empty { font-size: 13.5px; color: var(--tt-muted); font-style: italic; }

/* ---------- Login gate ---------- */
.up-gate-body { margin: 0; background: var(--tt-burgundy); min-height: 100vh; font-family: var(--tt-font-body); }
.up-gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px 16px; box-sizing: border-box; }
.up-gate-card {
	width: 100%; max-width: 360px; background: var(--tt-cream); border-radius: 20px; padding: 28px 24px;
	box-sizing: border-box; box-shadow: 0 20px 40px rgba(0,0,0,.25);
	display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.up-gate-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.up-gate-title { font-family: var(--tt-font-heading); font-size: 22px; font-weight: 700; color: var(--tt-ink); }
.up-gate-sub { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--tt-muted); margin-top: -12px; }
.up-gate-icon { width: 44px; height: 44px; border-radius: 50%; background: #F0E0C8; display: flex; align-items: center; justify-content: center; color: var(--tt-burgundy); }
.up-gate-welcome { font-family: var(--tt-font-heading); font-size: 25px; font-weight: 700; color: var(--tt-ink); margin: 0; }
.up-gate-error { color: var(--tt-burgundy); font-size: 13.5px; margin: -8px 0 0; font-weight: 600; }
.up-gate-card form { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.up-gate-card .up-label { margin-bottom: -8px; }
.up-gate-card .up-button { width: 100%; margin-top: 4px; }
.up-gate-forgot { font-size: 13px; font-weight: 600; margin-top: -4px; }
.up-gate-help { font-size: 12.5px; color: var(--tt-muted); margin: 0; }

/* ---------- Request a Show / My Requests ---------- */
.up-request-show, .up-my-requests { font-family: var(--tt-font-body); }
.up-batch-banner {
	background: var(--tt-card); border: 1.5px solid var(--tt-gold-light); border-radius: 14px;
	padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.up-batch-banner-title { font-size: 13px; font-weight: 700; color: var(--tt-ink); }
.up-batch-banner-note { font-size: 12px; color: var(--tt-ink-soft); margin-top: 2px; }
.up-batch-banner-sub { font-size: 12px; color: var(--tt-muted); margin-top: 1px; }
.up-request-cards { display: flex; flex-direction: column; gap: 12px; }
.up-request-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 14px; padding: 15px 16px; }
.up-request-card-main { display: flex; align-items: center; gap: 12px; }
.up-request-card-status .up-request-card-main { align-items: flex-start; justify-content: space-between; gap: 10px; }
.up-request-card-rejected { opacity: .75; }
.up-request-card-removed { opacity: .75; }
.up-request-card-footer {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 13px; padding-top: 12px; border-top: 1px solid #F0E5D2;
}
.up-request-card-footer-action { justify-content: stretch; }
.up-request-card-footer-note { font-size: 12.5px; color: var(--tt-muted); line-height: 1.5; display: block; }
.up-request-card-note { font-size: 12px; color: var(--tt-muted); }
.up-request-btn { width: 100%; }
.up-request-link {
	all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tt-muted); font-family: var(--tt-font-body);
}
.up-request-link:hover { color: var(--tt-burgundy); }
.up-pill-pending { background: var(--tt-tint); color: var(--tt-burgundy); }
.up-pill-approved { background: var(--tt-burgundy); color: #fff; }
.up-pill-rejected { background: #EFE7E2; color: var(--tt-muted); }
.up-pill-removed { background: var(--tt-gold-light); color: var(--tt-ink); }

/* ---------- Request row inside Upcoming Shows (merged Part 3.1) ---------- */
.up-show-request-row { flex-wrap: wrap; }
.up-show-request-form { margin: 0; }
.up-request-btn-sm { width: auto; padding: 6px 12px; font-size: 11.5px; }
.up-request-closed-note { font-size: 12px; color: var(--tt-muted); font-style: italic; }
.up-request-not-open-note { font-size: 12px; color: var(--tt-gold); font-style: italic; }
.up-request-cap-note { font-size: 12px; color: var(--tt-burgundy); font-style: italic; font-weight: 600; }
.up-role-note { width: 100%; margin: 2px 0 8px; padding: 8px 10px; background: var(--tt-tint); border-left: 3px solid var(--tt-gold); border-radius: 4px; font-size: 13px; line-height: 1.4; color: var(--tt-ink-soft); }

/* ---------- Viewer-specific show shading + status label (2026-09-05, extended 2026-09-13) ----------
   Four states, checked in this priority order (see
   UP_Shortcodes::show_status_for_viewer()): "Available" means the viewer
   has at least one eligible open role on this show they haven't yet
   requested — wins even if they also have a pending or assigned role on
   a different tag there. "Assigned" means they've been approved for a
   role on this show and nothing else is newly requestable. "Applied"
   means nothing is newly requestable, but they have a pending request.
   Plain/"none" = neither of the above.

   Colors come from CSS custom properties (defaulted below, overridden
   inline per-site from Settings -> Show Card Colors -- see
   UP_Assets::show_card_color_css()) rather than being hardcoded, so Jeff
   can change them without a code change (2026-09-13, Jeff's request).
   These only tint the card BACKGROUND -- every card's border is a fixed
   dark outline set on .up-show-card itself above, not derived from these
   colors, so a card stays visible even when a very light color is chosen
   here (2026-09-14, Jeff's request: the "no requests open" card was
   nearly invisible against the page background on mobile once set to
   white).

   2026-09-14 (second follow-up): setting "no requests open" to white
   still didn't render as a clean white card like the "Requests are
   currently closed" banner box. Root cause -- `background: rgba(...)`
   on the state class was a plain `background` shorthand, which fully
   REPLACES the base `.up-show-card`'s solid white `background`, rather
   than layering on top of it -- so the "transparency" was exposing the
   page's own cream backdrop behind the card, not blending with a white
   card face, and could never actually look white/clean the way the
   solid banner box does. Fixed by keeping the base `background-color`
   solid (white, from .up-show-card above) and layering the tint as a
   `background-image` gradient on top of it instead, so the tint always
   blends with the card's own white face. Tint strength is now also a
   configurable CSS variable (Settings -> Show Card Colors -> Tint
   Intensity, Jeff's request: "a transparency slider") rather than a
   fixed .07 -- turning it down toward 0% makes every card render as
   plain white/untinted, same look as the closed-requests banner. */
:root {
	--up-show-none: 232, 220, 200;
	--up-show-available: 8, 102, 101;
	--up-show-applied: 255, 130, 0;
	--up-show-assigned: 184, 150, 62;
	--up-show-tint-alpha: .07;
}
.up-show-card-none { background-image: linear-gradient(rgba(var(--up-show-none), var(--up-show-tint-alpha)), rgba(var(--up-show-none), var(--up-show-tint-alpha))); }
.up-show-card-available { background-image: linear-gradient(rgba(var(--up-show-available), var(--up-show-tint-alpha)), rgba(var(--up-show-available), var(--up-show-tint-alpha))); }
.up-show-card-applied { background-image: linear-gradient(rgba(var(--up-show-applied), var(--up-show-tint-alpha)), rgba(var(--up-show-applied), var(--up-show-tint-alpha))); }
.up-show-card-assigned { background-image: linear-gradient(rgba(var(--up-show-assigned), var(--up-show-tint-alpha)), rgba(var(--up-show-assigned), var(--up-show-tint-alpha))); }
/* 2026-09-14, Jeff's request: a card can now show more than one status
   pill at once -- e.g. "Assigned to Bartender Shift" alongside "Shifts
   Available" when another role on the same show is still open for them
   -- instead of only ever showing one, picked by priority. See
   UP_Shortcodes::show_status_labels(). */
.up-show-status-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.up-show-status-label {
	display: inline-block; font-size: 10.5px; font-weight: 700;
	padding: 2px 9px; border-radius: 20px; letter-spacing: .2px; color: #fff;
}
.up-show-status-available { background: rgb(var(--up-show-available)); }
.up-show-status-applied { background: rgb(var(--up-show-applied)); }
.up-show-status-assigned { background: rgb(var(--up-show-assigned)); }

/* ---------- Full-page navigation loading overlay (2026-09-11) ----------
   Every page here is a normal server-rendered full reload, not a
   single-page app, so the browser gives no feedback of its own while a
   slower page (like Upcoming Shows once a season's worth of shows is on
   file) is generated -- especially once the site's added to a phone's
   home screen, where there's no browser chrome/spinner at all. This
   overlay is shown the instant an internal link is clicked or a form is
   submitted (see usher-portal.js) and stays visible for the whole wait,
   since nothing repaints the screen until the new page actually
   arrives -- there's no JS-driven "hide" on success because a real page
   load simply replaces this DOM (and script) entirely once it's done. A
   safety timeout in usher-portal.js clears it if navigation doesn't
   complete within 15s (e.g. the connection drops), so a flaky network
   can't leave a permanent stuck overlay. */
.up-nav-loading {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: rgba(250, 243, 233, .92);
	opacity: 0; pointer-events: none; transition: opacity .12s ease;
	font-family: var(--tt-font-body);
}
.up-nav-loading.is-active { opacity: 1; pointer-events: auto; }
.up-nav-loading-spinner {
	width: 38px; height: 38px; border-radius: 50%;
	border: 4px solid var(--tt-border); border-top-color: var(--tt-burgundy);
	animation: up-spin .7s linear infinite;
}
.up-nav-loading-text { font-size: 13px; font-weight: 600; color: var(--tt-ink-soft); letter-spacing: .2px; }

/* ---------- Settings (2026-09-16, Jeff's request) ----------
   The [usher_settings] page -- for now just Email Alerts, a master
   switch plus one row per event, each with an on/off toggle. */
.up-settings { font-family: var(--tt-font-body); max-width: 520px; }
.up-settings-section-title { font-family: var(--tt-font-heading); font-size: 18px; font-weight: 700; color: var(--tt-ink); margin: 0 0 4px; }
.up-settings-saved {
	background: #E8F0E4; color: #2F5323; padding: 10px 14px; border-radius: 10px;
	font-size: 13.5px; font-weight: 600; margin: 0 0 16px;
}
.up-settings-row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 12px;
	padding: 14px 16px; margin-top: 10px; cursor: pointer;
}
.up-settings-master { border-color: var(--tt-gold-light); background: #FBF6EA; }
.up-settings-row-label { display: block; font-size: 14px; font-weight: 600; color: var(--tt-ink); }
.up-settings-row-desc { display: block; font-size: 12.5px; color: var(--tt-ink-soft); margin-top: 2px; }
.up-settings-events-disabled { opacity: .45; pointer-events: none; }

/* A simple on/off toggle switch -- built from a checkbox (for real form
   submission/accessibility) visually hidden behind a styled track+thumb. */
.up-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.up-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.up-toggle-track {
	position: absolute; inset: 0; background: #D8CBB8; border-radius: 999px;
	transition: background .15s ease;
}
.up-toggle-track::before {
	content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
	background: #fff; border-radius: 50%; transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.up-toggle input:checked ~ .up-toggle-track { background: var(--tt-burgundy); }
.up-toggle input:checked ~ .up-toggle-track::before { transform: translateX(18px); }
.up-toggle input:focus-visible ~ .up-toggle-track { outline: 2px solid var(--tt-burgundy); outline-offset: 2px; }
@keyframes up-spin { to { transform: rotate(360deg); } }

/* ================================================================
   Large Text mode (2026-09-16, Jeff's request) -----------------------
   A per-user, opt-in accessibility mode -- see UP_Display_Prefs, whose
   `body_class` filter adds `up-large-text` to <body> for a logged-in
   user who's turned it on in Settings. Every rule below is scoped under
   `body.up-large-text`, so none of it changes anything for a viewer who
   hasn't opted in -- the base rules above are all untouched.
   Confirmed with Jeff via an interactive mockup (Home + Upcoming Shows)
   before this real build. Two spots deliberately restructure onto more
   lines rather than just growing in place, per his explicit request:
   the Next Shift tile (label/name/date/call/position, each given more
   room) and each person's row in a show's roster (name on its own
   line, Call Time + Position sharing the line below it, with the role
   pill/badge kept -- not spelled-out role text, per his final round of
   feedback). Everywhere else, this is a straightforward font-size
   (and, for buttons/toggles, tap-target) increase using the same
   values already in the mockup Jeff approved, roughly +30-35%.

   .up-usher-lines (used only by the roster-row rule below) is declared
   display:contents UNCONDITIONALLY, not scoped to up-large-text -- that
   keeps the wrapper invisible to the 4-column grid at all times in
   normal mode, so its three children land directly in that grid's
   columns 2/3/4 exactly as they did before this wrapper span existed.
   Only the up-large-text override further down turns it into a real
   flex box. ================================================================ */

.up-usher-lines { display: contents; }

body.up-large-text {
	/* A conservative sitewide floor so anything with no explicit
	   font-size of its own (e.g. the Chat page's plain text, which has
	   no dedicated CSS in this file) still grows a bit -- everything
	   named below gets its own larger, explicit size on top of this. */
	font-size: 106%;
}

/* ---------- Header / nav (theme markup, styled here -- Jeff asked for
   a plugin-only build with no theme file changes) ---------- */
body.up-large-text .up-header-site { font-size: 21px; }
body.up-large-text .up-header-sub { font-size: 13px; }
body.up-large-text .up-header-page-title { font-size: 22px; }
body.up-large-text .up-header-logout { font-size: 16px; }
body.up-large-text .up-nav-links a { font-size: 16px; }
body.up-large-text .up-page-title { font-size: 26px; }
body.up-large-text .up-quick-label { font-size: 13.5px; }
body.up-large-text .up-footer { font-size: 14px; }

/* ---------- Home page: Quick Links tiles ---------- */
body.up-large-text .up-tile-title { font-size: 18px; }
body.up-large-text .up-tile-desc { font-size: 14.5px; }
body.up-large-text .up-tile-badge { font-size: 13px; }

/* ---------- Home page: Your Next Shift hero tile -------------------
   Jeff's Round 1 feedback: "Your Next Shift" label, event name, date,
   Call, and Position should each read as clearly separate lines with
   real space between them -- more spacing on top of bigger text, not
   just bigger text. The real markup already renders each of these as
   its own <div> (block-level by default), so no display change is
   needed here, only larger type and more margin between them. */
body.up-large-text .up-next-show { padding: 20px 20px; gap: 16px; }
body.up-large-text .up-next-show-label { font-size: 14px; }
body.up-large-text .up-next-show-name { font-size: 21px; margin-top: 6px; }
body.up-large-text .up-next-show-date { font-size: 16px; margin-top: 7px; }
body.up-large-text .up-next-show-detail { font-size: 16px; margin-top: 9px; }
body.up-large-text .up-next-show-detail-label { margin-right: 6px; }

/* ---------- Upcoming Shows: show cards ---------- */
body.up-large-text .up-show-name { font-size: 19px; }
body.up-large-text .up-show-meta { font-size: 15px; }
body.up-large-text .up-show-sold { font-size: 14px; }
body.up-large-text .up-show-date-chip span { font-size: 10.5px; }
body.up-large-text .up-show-date-chip strong { font-size: 18px; }
body.up-large-text .up-show-status-label { font-size: 12px; padding: 3px 11px; }
body.up-large-text .up-assignment-group-label { font-size: 13px; }
body.up-large-text .up-assignment-total { font-size: 14.5px; }
body.up-large-text .up-show-notes { font-size: 15px; }
body.up-large-text .up-coming-soon span { font-size: 15px; }

/* A general size bump for every pill/badge (status pills on My Requests
   and Upcoming Shows, etc.) -- the roster-row rule further down adds
   its own layout changes on top of this for that specific spot. */
body.up-large-text .up-pill { font-size: 12px; padding: 4px 10px; }

/* ---------- Upcoming Shows: roster rows ----------------------------
   Jeff's Round 1 feedback: each person's row should use more than one
   line ("Position - Name, new line then Call Time, Position"). His
   final round of feedback reversed one part of the first mockup pass:
   keep the compact role pill/badge (it already encodes lead vs. regular
   via its color) instead of spelling the role out in words. Name gets
   its own full line; Call Time and Position share the line under it.
   The base 4-column grid (.up-assignment-group-entries .up-usher-row)
   is left completely alone above -- this switches that one row to a
   flex layout instead, only under up-large-text. */
body.up-large-text .up-assignment-group-entries .up-usher-row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 0;
}
body.up-large-text .up-assignment-group-entries .up-pill {
	flex: 0 0 auto;
	margin-top: 3px;
}
body.up-large-text .up-usher-lines {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	min-width: 0;
	gap: 4px 14px;
}
body.up-large-text .up-assignment-group-entries .up-usher-name {
	flex: 1 0 100%;
	font-size: 17px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
body.up-large-text .up-assignment-group-entries .up-usher-call-time,
body.up-large-text .up-assignment-group-entries .up-assignment-position {
	flex: 0 0 auto;
	font-size: 14.5px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* ---------- Buttons, inputs, toggles (also bigger tap targets) ---------- */
body.up-large-text .up-button { font-size: 17px; padding: 15px 22px; }
body.up-large-text .up-button-outline { font-size: 14px; padding: 9px 16px; }
body.up-large-text .up-input { font-size: 17px; padding: 15px 16px; }
body.up-large-text .up-label { font-size: 13.5px; }
body.up-large-text .up-toggle { width: 50px; height: 28px; }
body.up-large-text .up-toggle-track::before { width: 22px; height: 22px; }
body.up-large-text .up-toggle input:checked ~ .up-toggle-track::before { transform: translateX(22px); }

/* ---------- Settings page ---------- */
body.up-large-text .up-settings-section-title { font-size: 21px; }
body.up-large-text .up-settings-row-label { font-size: 16.5px; }
body.up-large-text .up-settings-row-desc { font-size: 14.5px; }
body.up-large-text .up-settings-saved { font-size: 15px; }

/* ---------- Alerts / messages ---------- */
body.up-large-text .up-alert-heading { font-size: 12.5px; }
body.up-large-text .up-alert-message { font-size: 16px; }

/* ---------- Training & Documents ---------- */
body.up-large-text .up-doc-group-title { font-size: 13px; }
body.up-large-text .up-doc-title { font-size: 16px; }
body.up-large-text .up-badge { font-size: 11px; }

/* ---------- Schedule Dates ---------- */
body.up-large-text .up-schedule-title { font-size: 19px; }
body.up-large-text .up-step-label { font-size: 12.5px; }
body.up-large-text .up-step-date { font-size: 16.5px; }

/* ---------- Request a Show / My Requests ---------- */
body.up-large-text .up-batch-banner-title { font-size: 15px; }
body.up-large-text .up-batch-banner-note,
body.up-large-text .up-batch-banner-sub { font-size: 14px; }
body.up-large-text .up-request-card-footer-note,
body.up-large-text .up-request-card-note { font-size: 14.5px; }
body.up-large-text .up-request-link { font-size: 14.5px; }
body.up-large-text .up-request-closed-note,
body.up-large-text .up-request-not-open-note,
body.up-large-text .up-request-cap-note { font-size: 14px; }
body.up-large-text .up-role-note { font-size: 15px; }

/* ---------- Notify / signup block ---------- */
body.up-large-text .up-notify-label { font-size: 16px; }

/* ---------- Contact form ---------- */
body.up-large-text .up-contact-intro { font-size: 16px; }
body.up-large-text .up-notice { font-size: 16px; }

/* ---------- Chat (has no dedicated CSS of its own above -- these are
   the same class names its inline-rendered JS/PHP markup uses) ---------- */
body.up-large-text .up-chat-room-card h3 { font-size: 16.5px; }
body.up-large-text .up-chat-room-card p,
body.up-large-text .up-chat-thread-header,
body.up-large-text .up-chat-empty,
body.up-large-text .up-chat-readonly-note { font-size: 15.5px; }
body.up-large-text .up-chat-compose textarea,
body.up-large-text .up-chat-compose button { font-size: 16px; }