/*
 * Magical Library — the single event page.
 *
 * Loads on top of ml-agenda.css (the hero, the `.ev` row and the private-table
 * band come from there) and rpg-site-styles' ml-chrome.css (tokens and the
 * shared .btn / .eyebrow / .sec / .sechead / .celestial / .rv primitives).
 *
 * There is no `design-reference/event.html` — the reference set covers the
 * agenda and not one event on it. So this composes from the language the rest
 * of the redesign already speaks: the agenda's forest date block, the PDP's
 * stock candle (a table has seats the way a shelf has copies), the checkout's
 * card-shaped form treatment, and the agenda's closing band.
 */

/* ---------------------------------------------------------------- THE HERO */

.rpg-ml-event .evshero {
	/* Warmer and shallower than the agenda's hero: this page has one event on
	   it, so the hero is a headline, not a landing. */
	background: radial-gradient(76% 120% at 78% 0%, #2b201e, #11241d 62%, #0d1d17);
	/* Side padding lives on `.in` now — ml-chrome.css, THE HERO GRID. */
	padding-block: 40px 42px;
}

/* The poster, behind the text and faded out towards it. Masked rather than
   given an opacity, so the left-hand column keeps full contrast for the title
   whatever the cover happens to be. */
.rpg-ml-event .evcover {
	position: absolute;
	inset: 0 0 0 34%;
	background-size: cover;
	background-position: center;
	opacity: .28;
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 46%);
	mask-image: linear-gradient(90deg, transparent, #000 46%);
}

/* A scrim between the poster and the text. The mask already fades the cover
   out towards the left, but a pale poster — a white workshop flyer, a light
   box shot — still puts light pixels under the tail of a long title. This sits
   above the cover and below the stars, so the title is legible whatever gets
   uploaded — which is not something a template can check.

   The stacking order on this hero, bottom to top: cover 0, scrim 1,
   celestial 2 (raised from the chrome's 0 — the stars are the site's
   atmosphere and belong on top of the poster, not under it), text 3. */
.rpg-ml-event .evshero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(95deg, rgba(13, 29, 23, .92) 0 38%, rgba(13, 29, 23, .55) 58%, rgba(13, 29, 23, .12));
}

.rpg-ml-event .evshero > .celestial { z-index: 2; }
.rpg-ml-event .evshero .in { z-index: 3; }
.rpg-ml-event .evshero .crumb { color: #b9c6b6; padding: 0 0 14px; }
.rpg-ml-event .evshero .crumb a { color: var(--gold-hi); }
.rpg-ml-event .evshero .crumb span { margin: 0 6px; opacity: .6; }

.rpg-ml-event .evtop {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 22px;
	align-items: start;
}

/* The agenda's date block at hero scale. Same colours, same three lines. */
.rpg-ml-event .evtop .date {
	text-align: center;
	background: var(--forest);
	color: #f3ead6;
	border-radius: 12px;
	padding: 14px 10px;
	border: 1px solid rgba(200, 162, 74, .35);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.rpg-ml-event .evtop .date .d { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1; }
.rpg-ml-event .evtop .date .m { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gold-hi); margin-top: 4px; }
.rpg-ml-event .evtop .date .t { font-family: var(--mono); font-size: 11px; color: #c6cabb; margin-top: 4px; }

.rpg-ml-event .evtitle h1 {
	font-size: clamp(28px, 4.2vw, 46px);
	color: #f7edd6;
	margin: 6px 0 8px;
}

.rpg-ml-event .evwhen {
	font-family: var(--book);
	font-style: italic;
	font-size: 16px;
	color: #e0d3c6;
}

.rpg-ml-event .evpast {
	font-family: var(--mono);
	font-size: 12px;
	color: #d9beb2;
	margin-top: 12px;
}

/* --------------------------------------------------------- THE SEATS LINE
   MOVED to ml-nextup.css in 1.10.0, prefix dropped, and this sheet declares it
   as a dependency. Three pages draw that line now — this hero, the Calendar's
   next-up card and the front page's — all from `rpg_ml_event_seats()`, and a
   second copy of the candle here is the copy that would not get the next fix. */

.rpg-ml-event .evbook { margin-top: 16px; }

/* --------------------------------------------------------- THE TWO COLUMNS */

.rpg-ml-event .evpage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 34px;
	align-items: start;
	padding-top: 34px;
	padding-bottom: 10px;
}

.rpg-ml-event .evtext { font-size: 16px; line-height: 1.7; }
.rpg-ml-event .evtext > * + * { margin-top: 14px; }
.rpg-ml-event .evtext h2 { font-size: 24px; margin-top: 26px; }
.rpg-ml-event .evtext h3 { font-size: 19px; margin-top: 20px; }
.rpg-ml-event .evtext ul,
.rpg-ml-event .evtext ol { padding-left: 22px; list-style: revert; }
.rpg-ml-event .evtext li { margin: 5px 0; }
.rpg-ml-event .evtext a { color: var(--brass-ink); text-decoration: underline; }
.rpg-ml-event .evtext img { border-radius: var(--r-md); }

/* TEC prints the featured image again inside the description on some setups;
   the hero already carries it, and two copies of a poster is not a design. */
.rpg-ml-event .evtext .tribe-events-event-image { display: none; }

/* ----------------------------------------------------------- THE VENUE */

.rpg-ml-event .evvenue { margin-top: 34px; }
.rpg-ml-event .evvenue h2 { font-size: 22px; margin-bottom: 12px; }

.rpg-ml-event .evvenue-in {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 18px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px;
	align-items: start;
}

.rpg-ml-event .evvenue-in--nomap { grid-template-columns: 1fr; }

.rpg-ml-event .evaddr b { font-family: var(--serif); font-size: 18px; display: block; }
.rpg-ml-event .evaddr address { font-style: normal; color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.rpg-ml-event .evphone { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.rpg-ml-event .evmap { border-radius: 10px; overflow: hidden; }
.rpg-ml-event .evmap iframe,
.rpg-ml-event .evmap > div { width: 100% !important; max-width: 100%; border: 0; }

/* ------------------------------------------------------ THE BOOKING CARD */

.rpg-ml-event .evbook-col { position: sticky; top: 92px; }

/* ONE GAP, NOT SIX MARGINS (round 55). Kevin: the card *"needs little work on
   spacing and margins"*, and measured on dev the gaps between its blocks were
   12px, 15px, 0px and 26px — the 0 being the legal notice sitting flush against
   the bottom of Event Tickets' form, which reads as the two belonging together.
   They came from five different rules (this card's, the facts list's, the
   re-skinned form's, .rpglegal's in ml-chrome.css and .evcal's) each adding its
   own margin to whatever it happened to follow.

   A flex column with ONE `gap` is the fix rather than five corrected margins:
   the next block added to this card inherits the rhythm instead of having to
   restate it, and there is no margin arithmetic left to get wrong. Every child's
   own vertical margin is zeroed below for the same reason — a margin and a gap
   both applying is how 15px and 26px happened. */
.rpg-ml-event .evcard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 14px 34px rgba(60, 45, 20, .1);
	/* The brass hairline the cart and checkout summaries carry, so the three
	   "this is the box you pay from" surfaces on the site read as one thing. */
	border-top: 3px solid var(--brass);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The gap owns the spacing; nothing inside may add to it. `.rpglegal` is
   deliberately unscoped in ml-chrome.css (it has to survive UCSS on the
   checkout and in the drawer), so its 12px top margin has to be turned off
   here, where the gap is. */
.rpg-ml-event .evcard > * { margin-top: 0; margin-bottom: 0; }

.rpg-ml-event .evcard-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.rpg-ml-event .evcard-ey {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--brass-ink); font-weight: 700;
}

.rpg-ml-event .evcard-price { font-family: var(--serif); font-size: 24px; font-weight: 700; }

.rpg-ml-event .evfacts { margin: 0; font-size: 13.5px; }
.rpg-ml-event .evfacts > div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rpg-ml-event .evfacts > div:last-child { border-bottom: 0; }
.rpg-ml-event .evfacts dt {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muted); flex: 0 0 74px; padding-top: 2px;
}
.rpg-ml-event .evfacts dd { font-weight: 600; flex: 1; min-width: 0; }

.rpg-ml-event .evsold,
.rpg-ml-event .evdoor {
	font-family: var(--book); font-style: italic; font-size: 13.5px;
	color: var(--muted); margin-top: 0;
}

.rpg-ml-event .evcal {
	display: flex; gap: 14px; flex-wrap: wrap;
	margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: 12px;
}
.rpg-ml-event .evcal a { color: var(--muted); }
.rpg-ml-event .evcal a:hover { color: var(--brass-ink); }

/* ---------------------------------------- EVENT TICKETS' OWN FORM, RE-SKINNED
   Not replaced. It carries attendee meta, WooCommerce stock, the cart and every
   plugin hanging off the buy area — the same reason the PDP re-skins
   WooCommerce's add-to-cart form rather than redrawing it. Only the chrome that
   fights this card is neutralised, and the submit button is dressed as the
   design's gold button. */

.rpg-ml-event .evcard .tribe-tickets,
.rpg-ml-event .evcard .tribe-common,
.rpg-ml-event .evcard .tribe-tickets__tickets-form,
.rpg-ml-event .evcard .tribe-tickets__rsvp-wrapper {
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
	max-width: 100%;
	box-shadow: none;
}

/* TEC's own headings inside the form duplicate the card's "Take a seat". */
.rpg-ml-event .evcard .tribe-tickets__tickets-title,
.rpg-ml-event .evcard .tribe-tickets__form-title { display: none; }

/* ETP lays the item out as title | price | stepper in a row, which is right at
   full width and unreadable in a 380px column — the ticket name is the event
   name, so it wraps to four lines beside a 60px price. Stacked: name, then the
   price and the stepper on one line under it. */
.rpg-ml-event .evcard .tribe-tickets__tickets-item,
.rpg-ml-event .evcard .tribe-tickets__rsvp {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 10px;
	background: var(--paper);
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-content-title-container { width: 100%; }

/* ------------------------------------------------ A CLOSED RSVP (1.14.1)
   ET's closed state is one template, `v2/rsvp/actions/full`: "0 Going",
   "Currently full" and an "RSVP Closed" label in
   `.tribe-tickets__rsvp-actions-full`. (It draws an RSVP only inside its sale
   window, so "closed" never means anything else on this page.)

   THE VERTICAL LABEL. The flex column above turns ET's grid columns into flex
   items, and ET's desktop sheet gives the actions column `flex: 0 0 auto` —
   so it shrank to its content, 137px, and ET's own 32px side padding on the
   label left 23px for "RSVP CLOSED", which then broke two letters to a line.
   Measured on dev at 1440: 23×124px, five lines. At 390 ET's phone padding
   happened to leave room, which is why it is a desktop bug.

   The label itself is fixed without :has(), so it stays on one line in any
   browser; the column is widened with :has() where that is understood. ET's
   own side gutter on the column is KEPT: it is what lines the label up with
   the details column above it (whose gutter is the same), and zeroing it put
   the label under the row's -24px margin, clipped to "SVP CLOSED". */
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-wrapper:has(.tribe-tickets__rsvp-actions-full) {
	flex: 1 1 auto;
	width: 100%;
}

/* ET's phone sheet keeps 56px above the actions for its RSVP button; a closed
   RSVP has no button, so that was 56px of nothing above the label. */
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions:has(.tribe-tickets__rsvp-actions-full) { padding: 0; margin: 0; }

.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-full {
	width: 100%;
	padding: 8px 0 0;
	text-align: left;
}

.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-full-text {
	white-space: nowrap;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* "0 Going" and "Currently full" in the card's own rows: ET prints the count
   as a 40px heading numeral, which for a zero reads as a scoreboard. The
   count and its word on one baseline, the sentence in the card's italic. */
/* ET's phone sheet centres the title and "Currently full" and nothing else —
   beside a left-hand count and label that read as two alignments in one box. */
.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-details-wrapper,
.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-details {
	text-align: left;
	align-items: flex-start;
}

.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-attendance {
	display: flex;
	flex-direction: row; /* ET stacks these in a column */
	align-items: baseline;
	gap: 6px;
	margin: 6px 0 0;
}

.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-attendance-number {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-attendance-going {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.rpg-ml-event .evcard .tribe-tickets__rsvp:has(.tribe-tickets__rsvp-actions-full) .tribe-tickets__rsvp-availability {
	font-family: var(--book);
	font-style: italic;
	font-size: 13.5px;
	color: var(--muted);
	margin-top: 2px;
}

/* A CLOSED RSVP BESIDE A TICKET ON SALE is hidden, wait-list form and all:
   the card should offer the ticket that can be bought, not a "Get notified
   when you can RSVP" form above it. The class is PHP's decision
   (rpg_ml_event_ticket()['rsvp_shut'], templates/ml-event.php) and is set
   only when EVERY RSVP on the event is closed — so this can hide the RSVP
   blocks wholesale, with no :has() for UCSS to drop. An event whose only
   ticket is the RSVP never gets the class and keeps its wait-list. */
.rpg-ml-event .evcard--rsvp-shut .tribe-tickets__rsvp-wrapper { display: none; }

.rpg-ml-event .evcard .tribe-tickets__tickets-item-extra {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-extra-available {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity {
	margin: 0;
	justify-content: flex-start;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-details-title,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-details-title h4 {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 600;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-price,
.rpg-ml-event .evcard .tribe-amount,
.rpg-ml-event .evcard .tribe-tickets__tickets-footer-total-wrap {
	font-family: var(--serif);
	font-weight: 700;
}

.rpg-ml-event .evcard input[type="number"],
.rpg-ml-event .evcard input[type="text"],
.rpg-ml-event .evcard input[type="email"],
.rpg-ml-event .evcard select,
.rpg-ml-event .evcard textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r-md, 8px);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	padding: 9px 11px;
}

.rpg-ml-event .evcard input:focus-visible,
.rpg-ml-event .evcard select:focus-visible,
.rpg-ml-event .evcard textarea:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 1px;
}

/* THE QUANTITY STEPPER, AS THE AGENDA'S (round 55).
   Measured before: Event Tickets' own `−` and `+` are 12px wide and 34px tall
   — icon glyphs with no box — sitting either side of a 40px input in a 76px
   group. A 12px-wide control is under a third of the 44px touch target the rest
   of this site holds to, and it looked like a typographic accident rather than
   a button.

   This is the agenda row's `.evqty` pill, rule for rule (ml-agenda.css): one
   pill, 32x38 buttons that fill it, a centred mono number with the spinners
   removed. The shop has one stepper and these are now both of it. */
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	padding: 0;
	/* The pill measured 82px tall around 38px buttons before these two lines.
	   `tribe-common-h4` is on the group itself, so it carried `font-size:24px`
	   and a 34px line-height — an inherited STRUT, invisible in the markup,
	   inflating a box whose children are all 38px. The height is stated so the
	   pill is the size of the controls in it.

	   `flex` and not `height` alone: Event Tickets sets `flex: 0 0 82px` on
	   this group, and inside a COLUMN flex container a flex-basis is the main
	   axis, so it beat `height:38px` outright and the box stayed 82px with the
	   line-height already corrected. */
	flex: 0 0 auto;
	height: 38px;
	line-height: 1;
	font-size: inherit;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-number {
	height: 38px;
	line-height: 1;
	font-size: inherit;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add {
	width: 32px;
	height: 38px;
	min-height: 0;
	flex: 0 0 32px;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--forest);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove:hover,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add:hover {
	background: rgba(28, 58, 48, .08);
	filter: none;
	transform: none;
}

/* THE STRAY FOCUS RECTANGLE Kevin saw on the "+".
   Event Tickets styles `:focus`, not `:focus-visible`, so a MOUSE click leaves
   a 3px brass ring painted around a 12px button and it stays there — which is
   what a stray rectangle beside a number is. `:focus` loses the outline and
   `:focus-visible` gets it back, so a keyboard still gets a ring and a mouse
   does not; `outline-offset:-3px` keeps it inside the pill instead of drawing a
   second rectangle around it, exactly as the agenda's stepper does. */
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove:focus,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add:focus {
	outline: none;
	box-shadow: none;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove:focus-visible,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity input[type="number"] {
	width: 40px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	outline: none;
	text-align: center;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity input[type="number"]::-webkit-outer-spin-button,
.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* THE TOTALS ROW (round 55). Kevin's screenshot: *"Quantity: 1 / Total: €
   10,00" wraps into two ragged columns beside the Get Tickets button*.

   Measured cause: Event Tickets' footer is `display:flex` with a button that
   this sheet had set to `width:100%`. In a 342px row a 100%-wide button asks
   for the whole line, so flex shrank the two label blocks to 38px and 50px —
   and each then wrapped its own label over three lines. The ragged columns are
   two labels folded inside boxes a third of the width they need.

   The fix is to stop the two labels competing with the button for the line:
   they go `nowrap`, they sit together at the left, and the button takes a full
   row of its own beneath them.

   A DELIBERATE DEVIATION from the brief, which asked for the pair "left of the
   button", and the reason is a measurement: laid out that way the row needs
   78 + 122 for the labels, 123 for a content-sized button and two 12px gaps =
   347px inside a 330px box. It does not fit at this card's width, and the ways
   to force it — a 16px-padded button, dropping the separator's margin — all
   land within 5px of the edge, which is the same knife-edge that put the
   footer strip on two lines in §1. A full-width gold CTA is also the treatment
   every other button in this card already has, so the button keeps it.

   What Kevin actually reported is fixed either way: the pair is ONE LINE, not
   two ragged columns. */
.rpg-ml-event .evcard .tribe-tickets__tickets-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.rpg-ml-event .evcard .tribe-tickets__tickets-footer-quantity,
.rpg-ml-event .evcard .tribe-tickets__tickets-footer-total {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
	white-space: nowrap;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
}

/* The "·" between the pair, so they read as one sentence rather than two
   stacked facts — and as a pseudo-element, because the separator belongs to
   the layout and not to either label's own copy. */
.rpg-ml-event .evcard .tribe-tickets__tickets-footer-total::before {
	content: "·";
	margin-right: 7px;
	color: var(--line);
}

.rpg-ml-event .evcard .tribe-tickets__tickets-footer-quantity-number,
.rpg-ml-event .evcard .tribe-tickets__tickets-footer-total-wrap {
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

/* Its own row, full width — see the block comment above for the 347-in-330
   measurement that decided this. */
.rpg-ml-event .evcard .tribe-tickets__tickets-footer .tribe-tickets__tickets-buy {
	flex: 1 0 100%;
	width: 100%;
	margin: 0;
}

.rpg-ml-event .evcard button[type="submit"],
.rpg-ml-event .evcard .tribe-tickets__tickets-buy,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-button-going,
.rpg-ml-event .evcard .tribe-common-c-btn {
	width: 100%;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--r-md, 8px);
	background: linear-gradient(var(--gold-hi), #c19338);
	color: #231a07;
	border: 0;
	box-shadow: 0 6px 18px rgba(150, 110, 40, .3);
	transition: transform .16s var(--ease-out), filter .2s;
}

.rpg-ml-event .evcard button[type="submit"]:hover,
.rpg-ml-event .evcard .tribe-tickets__tickets-buy:hover,
.rpg-ml-event .evcard .tribe-common-c-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ------------------------------------------------ MORE FROM THE AGENDA */

.rpg-ml-event .evmore { border-top: 1px solid var(--line); margin-top: 20px; }
.rpg-ml-event .evmore .evlist { padding-top: 8px; }
.rpg-ml-event .evmore .sechead { margin-bottom: 16px; }
.rpg-ml-event .evmore .sechead h2 { font-size: 26px; }

/* ------------------------------------------------------------ BREAKPOINTS */

@media (max-width: 1000px) {
	.rpg-ml-event .evpage { grid-template-columns: 1fr; gap: 24px; }
	/* Sticky in a single column pins the card to the top of a long scroll and
	   covers the text it is about. */
	.rpg-ml-event .evbook-col { position: static; }
	.rpg-ml-event .evvenue-in { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.rpg-ml-event .evcover { inset: 0; opacity: .16; -webkit-mask-image: none; mask-image: none; }
	.rpg-ml-event .evtop { grid-template-columns: 76px 1fr; gap: 14px; }
	.rpg-ml-event .evtop .date .d { font-size: 30px; }
}

@media (max-width: 560px) {
	.rpg-ml-event .evshero { padding-block: 28px 32px; }
	.rpg-ml-event .evtop { grid-template-columns: 1fr; }
	.rpg-ml-event .evtop .date { width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
	/* The candle's flicker is stilled by ml-nextup.css, which owns it now. */
	.rpg-ml-event .evcard button[type="submit"],
	.rpg-ml-event .evcard .tribe-common-c-btn { transition: none; }
	.rpg-ml-event .evcard button[type="submit"]:hover,
	.rpg-ml-event .evcard .tribe-common-c-btn:hover { transform: none; }
}

/* ======================================================================
   ROUND 56 — THE RSVP BOX IN THE TICKET CARD'S OWN ROWS (MOBILE-SWEEP.md §7)
   Event Tickets' RSVP block was drawn as its own centred box inside the card:
   the event's title again, a 60px "0 / Going", "8 remaining, 5 days left to
   RSVP" and an "RSVP Here" heading over the button. The card already says
   all of that in its own rows (When / Time / and, since this round, Seats),
   so the block keeps only its action: the "Going" button, full width, as the
   card's one CTA. ET's form, AJAX and the attendee step after "Going" are
   untouched — this hides presentation only.
   ====================================================================== */
.rpg-ml-event .evcard .tribe-tickets__rsvp {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
}
.rpg-ml-event .evcard .tribe-tickets__rsvp-details-wrapper,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-wrapper { padding: 0; margin: 0; flex: 1 1 100%; max-width: 100%; }
.rpg-ml-event .evcard .tribe-tickets__rsvp-title,
.rpg-ml-event .evcard .tribe-tickets__rsvp-attendance,
.rpg-ml-event .evcard .tribe-tickets__rsvp-availability,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-rsvp > .tribe-common-h2 { display: none; }
.rpg-ml-event .evcard .tribe-tickets__rsvp-details { padding: 0; }
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-rsvp,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-rsvp-going { padding: 0; margin: 0; text-align: left; }
/* "Not going" (shown when the shop enables it) as the quiet second action. */
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-button-not-going {
	background: none; box-shadow: none; color: var(--muted); min-height: 40px; font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px;
}
/* The step after "Going": ET's quantity input in the agenda's stepper pill. */
.rpg-ml-event .evcard .tribe-tickets__rsvp-form .tribe-tickets__form-field-input,
.rpg-ml-event .evcard .tribe-tickets__rsvp-form input[type="text"],
.rpg-ml-event .evcard .tribe-tickets__rsvp-form input[type="email"] {
	width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-md, 8px);
	padding: 10px 12px; font-size: 16px; background: var(--card); color: var(--ink);
}
.rpg-ml-event .evcard .tribe-tickets__rsvp-form .tribe-tickets__form-field-label {
	font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink);
}

/* The card's seats row: the agenda line's voice. */
.rpg-ml-event .evcard .evseatsrow dd { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }
.rpg-ml-event .evcard .evseatsrow.is-last dd { color: var(--wine); font-weight: 700; }

/* TEC's calendar dropdown, moved into the card by ml-event.js: under the CTA,
   full width, the card's quiet line button rather than TEC's bordered row. */
.rpg-ml-event .evcard .evcal-tec { margin: 0; padding: 0; border: 0; width: 100%; }
.rpg-ml-event .evcard .evcal-tec .tribe-events-c-subscribe-dropdown { width: 100%; }
.rpg-ml-event .evcard .evcal-tec .tribe-events-c-subscribe-dropdown__button {
	width: 100%; min-height: 44px; justify-content: center; background: none; box-shadow: none;
	border: 1px solid var(--line); color: var(--forest); font-size: 13px; font-weight: 700;
}
.rpg-ml-event .evcard .evcal-tec .tribe-events-c-subscribe-dropdown__content { position: static; width: 100%; }
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-rsvp,
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-rsvp-going { display: block; width: 100%; }
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions-button-going { width: 100%; }
/* ET's own `.tribe-common .tribe-common-c-btn` sizing outranks a two-class
   rule here; this states the full chain once. */
.rpg-ml-event .evcard .tribe-tickets__rsvp-actions .tribe-tickets__rsvp-actions-rsvp-going .tribe-common-c-btn.tribe-tickets__rsvp-actions-button-going { width: 100%; max-width: none; }

/* ---- round 56 §9: the card's small caps to 11px, 40px steppers -------------- */
.rpg-ml-event .evcard-ey,
.rpg-ml-event .evfacts dt { font-size: 11px; }
@media (max-width: 600px) {
	.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add,
	.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove { width: 40px; height: 40px; }
	.rpg-ml-event .evcard .evcal-tec .tribe-events-c-subscribe-dropdown__button-text { min-height: 40px; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
}
/* The gold buttons in the card keep a visible keyboard ring (§9). */
.rpg-ml-event .evcard .tribe-common-c-btn:focus-visible,
.rpg-ml-event .evcard button[type="submit"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
	.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-add,
	.rpg-ml-event .evcard .tribe-tickets__tickets-item-quantity-remove { flex: 0 0 40px; min-width: 40px; }
}