/*
 * Magical Library — The Agenda.
 *
 * Ported from the <style> block of design-reference/events.html, scoped under
 * .rpg-ml-agenda. Depends on rpg-site-styles' ml-chrome.css for the tokens and
 * the shared .btn / .eyebrow / .sec / .sechead / .celestial / .rv primitives.
 */

.rpg-ml-agenda .evhero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(70% 100% at 80% 0%, #2b201e, #12271f);
	color: #fff;
	/* Side padding lives on `.in` now — ml-chrome.css, THE HERO GRID. */
	padding-block: 52px 44px;
	/* Round 6: the sundial is 244px across and the copy alone left the hero
	   265px tall, so the plate had ten pixels of air above and below it and
	   read as wedged in. The floor only applies where the dial is drawn at
	   full size. */
	min-height: 320px;
}

@media (max-width: 1080px) {
	.rpg-ml-agenda .evhero { min-height: 0; }
}

.rpg-ml-agenda .evhero .in {
	position: relative;
	z-index: 2;
}

.rpg-ml-agenda .evhero .eyebrow { color: var(--gold-hi); }

.rpg-ml-agenda .evhero h1 {
	font-size: clamp(32px, 4.6vw, 54px);
	color: #f7edd6;
	margin: 8px 0;
}

/* THE HERO'S OWN LEDE, and nothing else that happens to be a paragraph.
   `.evhero p` was fine while the hero held one; since 1.10.0 it also holds the
   "Next at the table" card, whose eyebrow, date line, seat line and legal
   notice are all <p>, and this rule at (0,2,1) beat every one of the
   component's own (0,2,0) selectors — the mono kicker rendered in Spectral and
   the seat line inherited a 56ch measure meant for a hero paragraph. A
   component dropped into a band must not be restyled by the band. */
.rpg-ml-agenda .evhero .in > p {
	color: #e0d3c6;
	max-width: 56ch;
	font-family: var(--book);
}

.rpg-ml-agenda .monthlink { margin-top: 18px; }

/* ------------------------------------- "NEXT AT THE TABLE" IN THE HERO (1.10.0)
   The card is the hero's centrepiece; the sundial keeps the right fifth it has
   held since round 6. So the card's width is set against THE DIAL and not
   against the container — the two live in the same band and only one of them
   knows where the other is.

   Three widths, one per size the dial is drawn at. The middle one is the only
   interesting one: between 761 and 1080 the dial is 168px at `right:3%`, so its
   left edge tracks the viewport, and a fixed max-width that clears it at 1080
   runs into it at 800. `calc(100% - 200px)` tracks it instead — 168px of dial,
   the 3% and a margin — and was checked at 1080 / 900 / 800 / 761. Below 760 the
   dial has retreated to the corner and the card takes the full column. */
.rpg-ml-agenda .evhero .nextup {
	margin-top: 22px;
	max-width: 760px;
}

@media (max-width: 1080px) {
	.rpg-ml-agenda .evhero .nextup { max-width: calc(100% - 200px); }
}

@media (max-width: 760px) {
	.rpg-ml-agenda .evhero .nextup { max-width: 100%; }
}

/* ------------------------------------------------------------- THE SUNDIAL
   Round 6. The hero already carried a warm glare in its top right — the
   `radial-gradient(70% 100% at 80% 0%, #2b201e, …)` in .evhero above, which
   Kevin liked and asked to lean into. The dial sits under it, so that glare
   stops being an unexplained warm patch and becomes the light this dial reads.

   Everything here is decoration except the gnomon, which is a real button.
   The plate, the marks, the shadow and the flare are aria-hidden and
   pointer-events:none, so the only thing a pointer can find in this corner is
   the thing that does something. */
.rpg-ml-agenda .sundial {
	position: absolute;
	top: 50%;
	right: 5%;
	width: 244px;
	height: 244px;
	transform: translateY(-50%);
	/* ABOVE .evhero .in, not below it. That wrapper is a full-height block the
	   width of the whole container with z-index:2, so at z-index:1 the dial was
	   drawn under an invisible sheet and the gnomon took no clicks at all —
	   found by clicking it at real coordinates, which is the only way to find
	   this class of bug (a synthetic .click() hides it completely, and so does
	   elementFromPoint if the overlay has no background). Nothing is covered in
	   return: the layer is pointer-events:none and only the gnomon opts back
	   in, and the plate sits in the right margin the copy never reaches. */
	z-index: 3;
	pointer-events: none;
}

/* The flare: a small hot core with a bloom, sitting up and to the right of the
   dial — where the hero's own gradient is brightest, so the two read as one
   light rather than two. */
.rpg-ml-agenda .sundial .dflare {
	position: absolute;
	right: -14%;
	top: -22%;
	width: 62%;
	height: 62%;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(255, 236, 200, .85) 0 6%, rgba(226, 138, 78, .38) 22%, rgba(180, 70, 40, .16) 46%, rgba(180, 70, 40, 0) 72%);
	filter: blur(1px);
}

/* and its two streaks — a lens flare, not a sun */
.rpg-ml-agenda .sundial .dflare::before,
.rpg-ml-agenda .sundial .dflare::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 190%;
	height: 2px;
	margin: -1px 0 0 -95%;
	background: linear-gradient(90deg, rgba(255, 214, 150, 0), rgba(255, 214, 150, .34) 50%, rgba(255, 214, 150, 0));
}

.rpg-ml-agenda .sundial .dflare::after { transform: rotate(90deg); }

/* The plate. A brass disc seen from above, warmer on the flare's side. */
.rpg-ml-agenda .sundial .dplate {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(200, 162, 74, .34);
	background:
		radial-gradient(120% 120% at 76% 12%, rgba(226, 160, 90, .16), rgba(28, 58, 48, 0) 62%),
		radial-gradient(circle at 50% 50%, rgba(240, 226, 195, .07), rgba(20, 40, 32, .16) 74%);
	box-shadow: inset 0 0 34px rgba(0, 0, 0, .35);
}

/* the inner ring the marks sit outside of */
.rpg-ml-agenda .sundial .dring {
	position: absolute;
	inset: 21%;
	border-radius: 50%;
	border: 1px dashed rgba(200, 162, 74, .22);
}

/* Twelve hour marks. Each is rotated out to the rim by --a and then its glyph
   is counter-rotated, so the symbols stay upright the way an engraver would
   cut them — a ring of glyphs each tipped to its own angle reads as a wheel of
   fortune, not as a dial. */
.rpg-ml-agenda .sundial .dmark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	display: grid;
	place-items: center;
	transform: rotate(var(--a)) translateY(-102px);
}

.rpg-ml-agenda .sundial .dmark i {
	font-style: normal;
	font-size: 13px;
	line-height: 1;
	color: rgba(226, 199, 140, .62);
	transform: rotate(calc(var(--a) * -1));
}

/* THE SHADOW. A wedge from the centre to the rim, wider and fainter at the
   far end — which is what a real gnomon's shadow does, and what stops this
   reading as a clock hand. Its angle is --dial-now, written by PHP and
   corrected by ml-agenda.js; the transition is what makes a poke a sweep. */
.rpg-ml-agenda .sundial .dshadow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 108px;
	margin-left: -13px;
	transform-origin: 50% 0;
	/* +180° because this wedge hangs DOWNWARDS from the centre while mark 0 is
	   drawn UPWARDS: at rotate(0) the two were pointing at opposite sides of
	   the plate, so the dial read six hours out. A shadow falls ON the hour it
	   is telling — that is the whole mechanism of a sundial — so the offset
	   belongs here rather than in the angle PHP and JS both compute. */
	transform: rotate(calc(var(--dial-now, 0deg) + 180deg));
	background: linear-gradient(rgba(10, 22, 17, .72), rgba(10, 22, 17, .34) 58%, rgba(10, 22, 17, 0));
	clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
	filter: blur(1.5px);
	transition: transform 1.1s cubic-bezier(.3, .8, .25, 1);
}

/* THE GNOMON — the only thing here a pointer can hit. It is a button with a
   generous square target around a thin blade: the blade is 10px wide and a
   10px click target is not a control. */
.rpg-ml-agenda .sundial .dgnomon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	margin: -40px 0 0 -27px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
	display: grid;
	place-items: end center;
	z-index: 2;
}

.rpg-ml-agenda .sundial .dblade {
	width: 12px;
	height: 46px;
	background: linear-gradient(100deg, #e6c98a, #b28f4a 46%, #7d6330);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	transition: transform .2s var(--ease-out), filter .2s;
}

.rpg-ml-agenda .sundial .dgnomon:hover .dblade { transform: scale(1.12); filter: brightness(1.1); }
.rpg-ml-agenda .sundial .dgnomon:active .dblade { transform: scale(.96); }
.rpg-ml-agenda .sundial .dgnomon:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* the nudge the blade gives when it is poked */
.rpg-ml-agenda .sundial .dgnomon.tipped .dblade { animation: rpg-dial-tip .55s var(--ease-out); }

@keyframes rpg-dial-tip {
	0% { transform: rotate(0) }
	30% { transform: rotate(-7deg) }
	62% { transform: rotate(4deg) }
	100% { transform: rotate(0) }
}

/* The caption. Hidden until the dial has something to say, then a line of
   mono under the plate — it is also the button's live region, so it must be
   in the accessibility tree at all times and is never display:none. */
.rpg-ml-agenda .sundial .dcap {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 10px;
	width: 260px;
	text-align: center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-hi);
	opacity: 0;
	transition: opacity .3s;
}

.rpg-ml-agenda .sundial.said .dcap { opacity: .95; }

/* The row the dial points at. A brass wash and a rule down its left edge for
   a few seconds — enough to find it, not enough to leave the page looking
   like something is selected. */
.rpg-ml-agenda .ev.dialflash {
	animation: rpg-dial-flash 2.6s ease-out;
}

@keyframes rpg-dial-flash {
	0%, 62% { background-color: rgba(200, 162, 74, .16); box-shadow: inset 3px 0 0 var(--gold-hi) }
	100% { background-color: transparent; box-shadow: inset 3px 0 0 rgba(200, 162, 74, 0) }
}

@media (max-width: 1080px) {
	/* Below this the hero copy's 56ch measure reaches the dial. It shrinks and
	   steps back rather than disappearing — it is the page's one piece of
	   character and a phone is where most of this agenda is read. */
	.rpg-ml-agenda .sundial { width: 168px; height: 168px; right: 3%; opacity: .8; }
	.rpg-ml-agenda .sundial .dmark { transform: rotate(var(--a)) translateY(-70px); }
	.rpg-ml-agenda .sundial .dmark i { font-size: 11px; }
	.rpg-ml-agenda .sundial .dshadow { height: 74px; }
}

@media (max-width: 760px) {
	/* On a phone the copy runs the full width, so a dial anywhere inside the
	   hero crosses the paragraph — and a dashed ring and a row of glyphs
	   through a sentence costs more legibility than the character is worth.
	   It retreats to the top-right CORNER, mostly off-canvas, at the height of
	   the short headline rather than the four-line lede: a slice of engraved
	   brass in the corner of the sky, which is all a phone has room for.

	   And it hands its pointer events back. An invisible 54px button sitting
	   over a paragraph is exactly the trap the shop hero's general store was
	   fixed for, and here the button would be over the dial's own faint arc
	   with nothing to show for a tap. */
	.rpg-ml-agenda .sundial {
		top: -28%;
		right: -26%;
		width: 176px;
		height: 176px;
		opacity: .38;
		transform: none;
	}

	.rpg-ml-agenda .sundial .dmark { transform: rotate(var(--a)) translateY(-73px); }
	.rpg-ml-agenda .sundial .dshadow { height: 78px; }
	.rpg-ml-agenda .sundial .dgnomon { pointer-events: none; }
	.rpg-ml-agenda .sundial .dcap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* The dial still reads the right hour and still answers a poke — what goes
	   is the sweep, the tip and the flash's fade. The shadow jumps to its new
	   angle instead of travelling to it. */
	.rpg-ml-agenda .sundial .dshadow,
	.rpg-ml-agenda .sundial .dblade,
	.rpg-ml-agenda .sundial .dcap { transition: none; }
	.rpg-ml-agenda .sundial .dgnomon.tipped .dblade { animation: none; }
	.rpg-ml-agenda .ev.dialflash { animation: none; background-color: rgba(200, 162, 74, .16); box-shadow: inset 3px 0 0 var(--gold-hi); }
}

.rpg-ml-agenda .evlist {
	max-width: var(--wrap);
	margin: auto;
	padding: 30px 26px;
}

/* ------------------------------------------- MONTHS AND FILTERS (1.3.0)
   The shop archive's chip rows, in the agenda's colours: same 118px label
   column, same pill, same "on" state, so the two "narrow this list" controls on
   the site are recognisably one control. */

.rpg-ml-agenda .evfilters { margin: 0 0 18px; }

.rpg-ml-agenda .evrow {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-bottom: 8px;
}

.rpg-ml-agenda .evrow .lb {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brass-ink);
	font-weight: 700;
	flex: 0 0 66px;
	padding-top: 12px;
}

.rpg-ml-agenda .evrow .chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }

.rpg-ml-agenda .evrow .chip {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	/* Real links to real URLs, so a real tap target. */
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
}

.rpg-ml-agenda .evrow .chip:hover { border-color: var(--brass); }
.rpg-ml-agenda .evrow .chip.on { background: var(--forest); color: #f3ead6; border-color: var(--forest); }
.rpg-ml-agenda .evrow .chip .n { font-family: var(--mono); font-size: 10.5px; opacity: .7; }

.rpg-ml-agenda .evcount {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	margin: 10px 0 0;
}

/* `.ev` sets `display:grid`, and a class selector beats the user-agent
   `[hidden]{display:none}` — so the filter's `row.hidden = true` marked the
   rows and changed nothing on screen. Every element the filter hides needs
   this, which is why it is stated once for the whole page. */
.rpg-ml-agenda [hidden] { display: none !important; }

.rpg-ml-agenda .evnone {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 28px 24px;
	text-align: center;
	font-family: var(--book);
	font-style: italic;
	color: var(--muted);
}

/* The row. `evbody` is a wrapper the prototype does without — its third column
   is a bare <div> — but a named class is what lets the mobile grid move the
   cover above it without also moving the title. */
.rpg-ml-agenda .ev {
	display: grid;
	grid-template-columns: 96px 150px 1fr auto;
	gap: 16px;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
	transition: transform .18s, box-shadow .18s;
	overflow: hidden;
}

.rpg-ml-agenda .ev:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(60, 45, 20, .12);
}

.rpg-ml-agenda .ev .cov {
	width: 150px;
	height: 96px;
	border-radius: 9px;
	overflow: hidden;
	/* The gradient is the empty state, not a placeholder for a missing file:
	   several real events have no featured image and a grey box would read as
	   a broken one. */
	background: linear-gradient(150deg, #26483a, #12231c);
	flex: 0 0 auto;
}

.rpg-ml-agenda .ev .cov img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.rpg-ml-agenda .ev:hover .cov img { transform: scale(1.06); }

.rpg-ml-agenda .ev .date {
	text-align: center;
	background: var(--forest);
	color: #f3ead6;
	border-radius: 10px;
	padding: 10px;
}

.rpg-ml-agenda .ev .date .d {
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

/* "SEP · SAT" is ONE label, not three words to be laid out.
   Round 22, from a real phone: in the 80px tile the line broke after the
   middot and the weekday dropped to a second row, which pushed the time out
   of the tile's rhythm and read as a rendering fault — because it is one.
   The prototype has the same 80px track and the same .1em tracking, so this
   is inherited rather than a porting slip, and it is a DELIBERATE DEVIATION
   from the reference: a date that has to be reassembled by the reader is not
   the design working.
   `nowrap` states the intent; the mobile track is widened to match in the
   media query below, because forbidding the wrap without giving the label
   room would trade a wrapped line for a clipped one. */
.rpg-ml-agenda .ev .date .m {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-hi);
	white-space: nowrap;
}

.rpg-ml-agenda .ev .date .t {
	font-family: var(--mono);
	font-size: 10px;
	color: #c6cabb;
	margin-top: 3px;
}

.rpg-ml-agenda .ev h3 { font-size: 20px; }
.rpg-ml-agenda .ev h3 a { color: inherit; text-decoration: none; }
.rpg-ml-agenda .ev h3 a:hover { text-decoration: underline; }

.rpg-ml-agenda .ev p {
	font-size: 13px;
	color: var(--muted);
	margin-top: 3px;
	max-width: 60ch;
}

/* THE SEATS LINE (1.15.0, round 55) — how many chairs are left, under the
   blurb. The right-hand column has always said what a seat COSTS and never how
   many there are, so "is there room on Thursday?" meant opening the event.

   Mono at 12px and not the 11px the status column uses: 12px is the floor this
   round set for mono anywhere on the site (see the shelves indexes), and this
   is a number a reader acts on. `--muted` on `--card` measures 5.9:1.

   `.is-last` at two seats or fewer, in the wine the sold-out label and every
   low-stock badge on the site already use — the shop has one colour for
   "hurry", and 8.0:1 on this ground. */
.rpg-ml-agenda .ev .evleft {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--muted);
	margin-top: 6px;
	max-width: none;
}

.rpg-ml-agenda .ev .evleft.is-last {
	color: var(--wine);
	font-weight: 700;
}

.rpg-ml-agenda .ev .status {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	text-align: right;
}

/* The status is a link in the real page — every one of these states is
   somewhere you can go — where the prototype draws plain text. */
.rpg-ml-agenda .ev .status a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	/* 44px tap target on a row whose label is 11px. */
	padding: 12px 0;
}

.rpg-ml-agenda .ev .status a:hover { text-decoration: underline; }
.rpg-ml-agenda .ev .sold { color: var(--wine); }
.rpg-ml-agenda .ev .free { color: #3d7d1f; }

.rpg-ml-agenda .evpager {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: center;
	margin-top: 22px;
}

.rpg-ml-agenda .evpager-count {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
}

.rpg-ml-agenda .evempty {
	text-align: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 46px 24px;
}

.rpg-ml-agenda .evempty h2 { font-size: 24px; }
.rpg-ml-agenda .evempty p { color: var(--muted); margin-top: 8px; }

.rpg-ml-agenda .evempty-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* --- the compass band (round 28 item 4) ---------------------------------
   The free answer to "I can't make these times", above the paid one. Kept on
   parchment with a brass rule rather than given a slab of its own: two dark
   full-width bands stacked at the foot of the page read as one long footer,
   and the private-session CTA below is the one that has to keep its weight. */
.rpg-ml-agenda .lfgband {
	position: relative;
	background: var(--paper-2, #f2e9d6);
	border-top: 1px solid var(--line);
}

.rpg-ml-agenda .lfgband .eyebrow { color: var(--brass-ink); }
.rpg-ml-agenda .lfgband h2 { color: var(--forest); }
.rpg-ml-agenda .lfgband .sechead .k { max-width: 62ch; }

.rpg-ml-agenda .playband {
	position: relative;
	overflow: hidden;
	background: var(--forest);
	color: #f2ead6;
	border-top: 1px solid #0a1c14;
}

.rpg-ml-agenda .playband .sec { position: relative; z-index: 2; }
.rpg-ml-agenda .playband .eyebrow { color: var(--gold-hi); }
.rpg-ml-agenda .playband .sechead .k { color: #c6cabb; }
.rpg-ml-agenda .playband h2 { color: #f2ead6; }

@media (max-width: 760px) {
	/* The label goes back to its own line, so the chips get the full width. */
	.rpg-ml-agenda .evrow { flex-wrap: wrap; }
	.rpg-ml-agenda .evrow .lb { flex: 0 0 100%; padding-top: 0; }
	/* 88px, not the reference's 80: the tile has to hold "SEP · WED" — nine
	   monospace characters at 10px with .1em tracking, 64px — inside 10px of
	   padding a side. 80px left 60px and the label wrapped. Measured, not
	   guessed, and it costs the body column 8px on a 320px screen. */
	.rpg-ml-agenda .ev { grid-template-columns: 88px 1fr; }
	.rpg-ml-agenda .ev .cov {
		grid-column: 1 / -1;
		order: -1;
		width: 100%;
		height: 130px;
	}
	.rpg-ml-agenda .ev .status {
		grid-column: 2;
		text-align: left;
	}
}

@media (max-width: 560px) {
	.rpg-ml-agenda .evhero { padding-block: 38px 32px; }
	.rpg-ml-agenda .evlist { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.rpg-ml-agenda .ev,
	.rpg-ml-agenda .ev .cov img { transition: none; }
	.rpg-ml-agenda .ev:hover { transform: none; }
	.rpg-ml-agenda .ev:hover .cov img { transform: none; }
}

/* ══════════════════════════════════════════ THE CALENDAR'S CONTROLS (r10)
   Kevin, round 10: *"The menu says Calendar but the page says 'The agenda' …
   ADD: a SEARCH FIELD (filter events by title/system, live-filter), and per-row
   quick actions where Event Tickets allows: 'Book +/-' (qty stepper +
   add-to-cart) or 'Join wait list' button for sold-out rows — easy access
   without opening each event. Keep month/kind filter rows."*

   Both controls are real forms first (see the template and includes/ml-agenda.php
   for why), so everything here dresses markup that already works with
   JavaScript switched off. */

/* --------------------------------------------------------------- THE SEARCH
   Sits above the chip rows and reads as the same family: card ground, hairline
   border, brass on focus. The magnifier is a character rather than an icon
   font — one glyph, no request, and it inherits the colour of the box. */
.rpg-ml-agenda .evsearch {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.rpg-ml-agenda .evsearch-in {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 320px;
	min-width: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: border-color var(--dur), box-shadow var(--dur);
}

.rpg-ml-agenda .evsearch-in:focus-within {
	border-color: var(--brass);
	box-shadow: 0 0 0 3px rgba(172, 135, 72, .16);
}

.rpg-ml-agenda .evsearch-icon {
	flex: 0 0 auto;
	padding: 0 4px 0 16px;
	font-size: 14px;
	line-height: 1;
	opacity: .55;
	filter: grayscale(1);
}

.rpg-ml-agenda .evsearch input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	padding: 12px 16px 12px 8px;
	font-family: var(--sans);
	font-size: 14.5px;
	color: var(--ink);
	min-height: 44px;
}

.rpg-ml-agenda .evsearch input[type="search"]::placeholder {
	color: var(--muted);
	font-style: italic;
	font-family: var(--book);
}

/* Chrome's own clear button is a grey cross in the middle of a parchment pill;
   the form's "Clear" link is the one that also drops the parameter. */
.rpg-ml-agenda .evsearch input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.rpg-ml-agenda .evsearch .btn { flex: 0 0 auto; }

.rpg-ml-agenda .evsearch-clear {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brass-ink);
	border-bottom: 1px solid rgba(172, 135, 72, .4);
	align-self: center;
}

.rpg-ml-agenda .evsearch-clear:hover { color: var(--gold); }

/* ---------------------------------------------------------- THE QUICK ACTION
   The status column is the row's fourth track and it was one line of mono. It
   is now a small stack: the price and the state on top, the control under it —
   in that order, because a Book button with no price above it is a button
   nobody presses. */
.rpg-ml-agenda .ev .status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.rpg-ml-agenda .ev .evbook {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rpg-ml-agenda .ev .evqty {
	display: inline-flex;
	align-items: center;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}

.rpg-ml-agenda .ev .evqty-b {
	width: 32px;
	height: 38px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--forest);
	background: none;
	border: 0;
	cursor: pointer;
	transition: background var(--dur), color var(--dur);
}

.rpg-ml-agenda .ev .evqty-b:hover { background: rgba(28, 58, 48, .08); }
.rpg-ml-agenda .ev .evqty-b:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* The number: no spinners, because the two buttons ARE the spinner and a
   browser's own arrows inside a 34px pill are unhittable. */
.rpg-ml-agenda .ev .evqty input[type="number"] {
	width: 34px;
	border: 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-agenda .ev .evqty input[type="number"]::-webkit-outer-spin-button,
.rpg-ml-agenda .ev .evqty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.rpg-ml-agenda .ev .evbook-go { white-space: nowrap; }

/* ------------------------------------------------- THE WAIT-LIST BUTTON
   Kevin, round 59: *"the wait list is still displeasing as a design"* — at
   360px the control read as a full-width wine box with its label jammed
   against the left border, the first glyph sitting under the rule.

   ONE fact explains every symptom, and measuring the cascade is what found
   it: `.rpg-ml-agenda .ev .status a` above (three classes AND a type
   selector, 0-3-1) outranks both `.btn.sm` (0-2-0) and the old `.evwait`
   rule (0-3-0). So the button inherited the status LINE's `padding: 12px 0`
   — zero side padding, hence the clipped glyph — and kept
   `display: inline-block`, which is why the mobile rule's
   `justify-content: center` did nothing at all: there is no flex box to
   centre anything in. On desktop the same loss pinned the label to the
   RIGHT edge instead, because the status column is `text-align: right`.
   The fault was never a `text-indent` or a stray margin; it was a rule
   written to style a text link doing it to a button.

   So the button states itself at a specificity that wins (`a.evwait` inside
   `.status` is 0-4-1) and borrows nothing from `.btn` it cannot afford to
   lose. It is a SECONDARY control by design: the primary action on a
   sold-out row is to read the row, and a gold button would promise a seat
   the row has just said does not exist. */
.rpg-ml-agenda .ev .status a.evwait {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	/* 16px of side padding is the brief's, and it is also the smallest gap
	   at which the arrow glyph stops touching the border at 360. */
	padding: 10px 16px;
	border: 1px solid var(--wine);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--wine);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s var(--ease-out);
}

/* `.status a:hover` underlines every state link; a button is not a link that
   underlines, so this says so at a specificity that holds. */
.rpg-ml-agenda .ev .status a.evwait:hover,
.rpg-ml-agenda .ev .status a.evwait:focus-visible {
	background: rgba(122, 42, 46, .08);
	text-decoration: none;
}

.rpg-ml-agenda .ev .status a.evwait:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ MOBILE
   At this width the row is already stacked, so the status column stops hugging
   the right edge and the control goes full width — a 38px pill and a gold
   button pushed into a corner is the one thing on this page that has to be
   easy to hit with a thumb. */
@media (max-width: 900px) {
	.rpg-ml-agenda .ev .status { align-items: flex-start; }
}

@media (max-width: 560px) {
	.rpg-ml-agenda .evsearch { gap: 8px; }
	.rpg-ml-agenda .evsearch-in { flex: 1 1 100%; }
	.rpg-ml-agenda .ev .evbook { width: 100%; }
	.rpg-ml-agenda .ev .evbook-go { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.rpg-ml-agenda .evsearch-in,
	.rpg-ml-agenda .ev .evqty-b { transition: none; }
}

/* ------------------------------------------------- THE BOOKING'S ANSWER
   ROUND 31. WooCommerce's notices, printed on this page for the first time
   (includes/ml-notices.php) — a refused booking used to reload the page and
   say nothing at all, and so did a successful one.

   Dressed here rather than left in Woo's own skin because these are the only
   Woo notices this page will ever show, and a green WooCommerce banner in the
   middle of the Calendar reads as a plugin leaking through. Error is wine,
   success is forest, both on parchment with the brass rule the rest of the
   page uses. `.woocommerce-error` carries a UA list style that has nowhere to
   put a marker here.

   NOT `display:none` on anything: every one of these exists to be read. */
.rpg-ml-agenda .evnotices,
.rpg-ml-event .evnotices {
	margin: 0 0 22px;
}

.rpg-ml-agenda .evnotices .woocommerce-message,
.rpg-ml-agenda .evnotices .woocommerce-error,
.rpg-ml-agenda .evnotices .woocommerce-info,
.rpg-ml-event .evnotices .woocommerce-message,
.rpg-ml-event .evnotices .woocommerce-error,
.rpg-ml-event .evnotices .woocommerce-info {
	list-style: none;
	margin: 0 0 10px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: 10px;
	background: var(--card);
	font-family: var(--book);
	color: var(--ink);
}

.rpg-ml-agenda .evnotices .woocommerce-error,
.rpg-ml-event .evnotices .woocommerce-error {
	border-left-color: var(--wine);
}

.rpg-ml-agenda .evnotices .woocommerce-message,
.rpg-ml-event .evnotices .woocommerce-message {
	border-left-color: var(--forest, #1e7a46);
}

.rpg-ml-agenda .evnotices li,
.rpg-ml-event .evnotices li {
	list-style: none;
}

.rpg-ml-agenda .evnotices a,
.rpg-ml-event .evnotices a {
	color: var(--wine);
}


/* THE BOOKING IN FLIGHT (1.17.0, round 55). ml-book.js adds `.is-booking` to
   the form while the add-to-cart request is out. Without a cue the gold button
   does nothing visible for the length of a round trip, which reads as a button
   that did not work and invites a second click — and the drawer opening is the
   only other feedback there is. `aria-busy` on the button carries the same fact
   to a screen reader; this is its visual half. */
.rpg-ml-agenda .evbook.is-booking .evbook-go,
.nubook.is-booking .btn {
	opacity: .62;
	cursor: progress;
}

/* ======================================================================
   ROUND 56 — THE AGENDA CARD ON A PHONE (docs/deploys/briefs/MOBILE-SWEEP.md §7)
   At 360 the date tile sat beside a 190px text column, so titles ran to three
   or four lines and the blurb read as a strip. Now the card is a stack:
   the cover full width, the date as a pill on the title's row, the blurb and
   the seats line full width, and the call to action a full-width button.

   `display:contents` on `.evbody` is what makes that possible without new
   markup: its h3, blurb and seats line become the grid's own items, so the
   date pill can share a row with the title while the blurb spans both
   columns. The wrapper stays in the DOM (ml-tickets.js reads within it). */
@media (max-width: 600px) {
	.rpg-ml-agenda .ev {
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		row-gap: 10px;
		align-items: center;
		padding: 12px;
	}
	.rpg-ml-agenda .ev .cov { grid-column: 1 / -1; order: -1; width: 100%; height: 150px; }
	.rpg-ml-agenda .ev .evbody { display: contents; }
	.rpg-ml-agenda .ev .date {
		grid-column: 1;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 7px 10px;
		border-radius: 10px;
		min-width: 64px;
	}
	.rpg-ml-agenda .ev .date .d { font-size: 20px; }
	.rpg-ml-agenda .ev .date .m,
	.rpg-ml-agenda .ev .date .t { font-size: 11px; letter-spacing: .06em; }
	.rpg-ml-agenda .ev h3 { grid-column: 2; font-size: 18px; line-height: 1.2; margin: 0; }
	.rpg-ml-agenda .ev .evbody > p:not(.evleft) { grid-column: 1 / -1; max-width: none; margin: 0; font-size: 14px; line-height: 1.5; }
	.rpg-ml-agenda .ev .evleft { grid-column: 1 / -1; margin: 0; }
	.rpg-ml-agenda .ev .status { grid-column: 1 / -1; align-items: stretch; text-align: left; gap: 8px; }
	.rpg-ml-agenda .ev .status > a:first-child { padding: 4px 0; font-size: 12px; }
	/* An RSVP row has no form: its one link IS the action, so it is the
	   button. A paid row keeps its price line above the Book control. */
	.rpg-ml-agenda .ev .status.free > a:only-child {
		display: flex; align-items: center; justify-content: center; min-height: 44px;
		padding: 10px 14px; border-radius: 999px; background: var(--forest); color: #f3ead6;
		font-family: var(--sans); font-size: 14px;
	}
	/* Full width of the stacked card. The breakpoint is 600, not the brief's
	   560, because 600 is where the card BECOMES a stack and the status
	   column goes full width: a button that turned full width 40px later
	   would leave a 560–600 band with a stretched column and a shrunk
	   control, which is the same mismatch this round is fixing. */
	.rpg-ml-agenda .ev .status a.evwait { width: 100%; }
	.rpg-ml-agenda .ev .evbook { width: 100%; }
	.rpg-ml-agenda .ev .evbook-go { flex: 1; justify-content: center; min-height: 44px; }
}

/* ---- round 56 §9: type floor and 40px targets on the agenda ---------------- */
.rpg-ml-agenda .evrow .lb,
.rpg-ml-agenda .evrow .chip .n,
.rpg-ml-agenda .ev .date .m,
.rpg-ml-agenda .ev .date .t { font-size: 11px; }
@media (max-width: 600px) {
	.rpg-ml-agenda .evrow .chip { min-height: 40px; }
	.rpg-ml-agenda .ev .evqty-b { width: 40px; height: 40px; }
	/* The price line above a Book control is a link to the event. */
	.rpg-ml-agenda .ev .status > a:first-child:not(:only-child) { display: flex; align-items: center; min-height: 40px; padding: 0; }
}
@media (max-width: 600px) {
	/* Every row's state line is a 40px link — a sold-out row in the event page's
	   "more from the agenda" band has no Wait list beside it. */
	.rpg-ml-agenda .ev .status > a:first-child { display: flex; align-items: center; min-height: 40px; padding: 0; }
}