/* =========================================================================
   ICCHK Events — chamber theme skin
   =========================================================================

   Written against icchk-events 2.0.0. Nothing here is a bug fix; it is a
   re-skin that makes the plugin look like it belongs on icchk.org.hk rather
   than like a generic events plugin.

   HOW TO USE — either one:

     A) Append this file to the bottom of assets/css/events.css.
     B) Ship it as assets/css/events-theme.css and register it after the
        base sheet:

          wp_register_style(
              'icchk-ev-theme',
              ICCHK_EV_URL . 'assets/css/events-theme.css',
              array( 'icchk-ev-events' ),
              ICCHK_EV_VERSION
          );

   Either way it must load AFTER events.css. Everything below relies on
   source order at equal specificity — there is not one !important in here,
   matching the base sheet's own rule.

   WHAT IT DOES NOT TOUCH
   Dark mode, the calendar container queries, print styles, the scanner, and
   the JS-free tab mechanism are all left alone.

   READ FROM THE SITE, NOT PICKED BY EYE
   Every value below comes from the Elementor kit (post ID 5) and the Astra
   settings stored in the database:

     Accent      #F9722F   orange   <- the site's PRIMARY accent
     Accent 2    #1872F2   blue     <- what the plugin already uses
     Hover       #EA6421
     Button      linear-gradient(90deg, #FFB347 0%, #FF7E00 100%) @ 5px
     Cards       15px radius, shadow rgba(24,114,242,0.18), hover -3px
     Pills       25px radius, #F9722F1A tint inactive, solid when active
     Type        Montserrat (headings 700, body 300-400)

   Worth being precise about this: the plugin's #1872f2 is NOT wrong. It is
   an exact match for the kit's "Accent 2". What the plugin is missing is the
   orange — the site's actual primary accent — and the blue-tinted shadow
   that everything else on the site casts. That is why it reads as adjacent
   to the brand rather than part of it.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------
   Re-declared on .icchk-ev, the same host the base sheet uses, so this wins
   on source order. A :root block would NOT work — a local declaration always
   beats an inherited one.

   Two-colour system, mirroring how the site already behaves:
     blue   = identity and navigation (dates, links, pills, "today")
     orange = action (every button that does something)
   ---------------------------------------------------------------------- */

.icchk-ev {
	/*
	 * Left at #1872f2 deliberately — it is already an exact match for the
	 * kit's "Accent 2", the blue used across the site's headers and links.
	 */
	--icchk-ev-accent: #1872f2;
	--icchk-ev-on-accent: #ffffff;

	/*
	 * The site's PRIMARY accent, which the plugin had no equivalent for.
	 * Buttons on this site are a gold-to-orange gradient, not a flat fill.
	 */
	--icchk-ev-action: #f9722f;
	--icchk-ev-action-grad: linear-gradient(90deg, #ffb347 0%, #ff7e00 100%);
	--icchk-ev-action-grad-hover: linear-gradient(90deg, #ffb347 0%, #d96b00 100%);
	--icchk-ev-action-tint: #f9722f1a;
	--icchk-ev-on-action: #ffffff;

	/* Warmer ink than the stock blue-greys, to sit with Montserrat. */
	--icchk-ev-text: #12161d;
	--icchk-ev-muted: #59616e;
	--icchk-ev-faint: #8a919c;

	--icchk-ev-surface: #ffffff;
	--icchk-ev-surface-sunken: #f6f7f9;
	--icchk-ev-surface-hover: #fafbfc;

	--icchk-ev-border: #e4e7ec;
	--icchk-ev-border-soft: #f0f2f5;

	/*
	 * The site's shape vocabulary, by frequency in the compiled Elementor
	 * CSS: 15px on cards and panels (37 uses), 5px on buttons (19), 25px on
	 * pills and tabs (4). The plugin's 14px/9px/999px was close but never
	 * quite landed on any of them.
	 */
	--icchk-ev-radius: 15px;
	--icchk-ev-radius-sm: 5px;
	--icchk-ev-radius-xs: 4px;
	--icchk-ev-radius-pill: 25px;
	--icchk-ev-gap: 23px;

	/*
	 * The site's signature: every card on icchk.org.hk casts a BLUE-tinted
	 * shadow derived from #1872F2, not a neutral grey one. 28 occurrences of
	 * the resting value, 22 of the hover value. Matching this does more for
	 * "belonging" than the colours do.
	 */
	--icchk-ev-shadow-1: 0 0 10px 0 rgba(24, 114, 242, 0.12);
	--icchk-ev-shadow-2: 0 0 10px 0 rgba(24, 114, 242, 0.18);
	--icchk-ev-shadow-3: 0 8px 15px 4px rgba(24, 114, 242, 0.25);
}


/* -------------------------------------------------------------------------
   2. The event card
   -------------------------------------------------------------------------
   The single biggest problem on the live page: with no featured image the
   media block still reserved a 16/9 box — about 215px of empty grey, more
   than half the card's height — with the date stamp adrift in the middle
   of it.

   The stamp cannot simply be moved out: in event-card.php it is a child of
   the .icchk-ev-card__media anchor, so removing the media removes the date
   with it. Instead the placeholder collapses to a band just tall enough to
   seat the stamp properly.
   ---------------------------------------------------------------------- */

/* Cards in a row should end level regardless of how much text each carries. */
.icchk-ev-grid .icchk-ev-card {
	display: flex;
	flex-direction: column;
}

.icchk-ev-card {
	border-color: var(--icchk-ev-border);
	transition:
		transform var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease),
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-card:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 28%, var(--icchk-ev-border));
}

/*
 * No image: collapse the reserved 16/9 box to a brand band.
 * :has() is doing the work — the base sheet already uses :has(img) for the
 * scrim, so this is consistent with how the file thinks.
 */
.icchk-ev-card__media:has(.icchk-ev-card__placeholder) {
	aspect-ratio: auto;
	height: 88px;
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--icchk-ev-accent) 10%, #fff) 0%,
			color-mix(in srgb, var(--icchk-ev-accent) 4%, #fff) 100%
		);
	border-bottom: 1px solid var(--icchk-ev-border-soft);
}

.icchk-ev-card__placeholder {
	background: none;
}

/*
 * With the band short, the stamp becomes the whole point of that space —
 * so it stops being a small floating chip and becomes the anchor.
 */
.icchk-ev-card__media:has(.icchk-ev-card__placeholder) .icchk-ev-card__stamp {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
	border: 1px solid var(--icchk-ev-border);
}

.icchk-ev-card__stamp {
	border-radius: var(--icchk-ev-radius-sm);
	padding: 7px 12px;
}

/*
 * The stamp day inherits --icchk-ev-accent, which an event can override
 * inline with its own colour. A light event colour (measured one at
 * rgb(26,255,186)) then renders near-invisible on the white stamp.
 * Mixing toward black keeps the event's hue but guarantees it stays legible
 * whatever colour someone picks. 55% measures at about 4.2:1 on white for a
 * bright green — past the 3:1 WCAG AA threshold for large bold text, where
 * the raw colour measured about 1.4:1.
 */
.icchk-ev-card__stamp-day {
	color: color-mix(in srgb, var(--icchk-ev-accent) 55%, #000);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Same problem on the meta dot. */
.icchk-ev-card__when::before {
	background: color-mix(in srgb, var(--icchk-ev-accent) 62%, #000);
}

.icchk-ev-card__stamp-month {
	color: var(--icchk-ev-muted);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
}

.icchk-ev-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 7px;
	padding: 18px 20px 20px;
}

/*
 * Title over date. On the live page the date was accent-blue and the same
 * visual weight as the title, so the two competed and the date read as a
 * link. Title gets the weight; the date drops to muted supporting text.
 */
.icchk-ev-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.015em;
	color: var(--icchk-ev-text);
}

.icchk-ev-card__title a {
	color: inherit;
	text-decoration: none;
}

.icchk-ev-card__title a:hover {
	color: var(--icchk-ev-accent);
}

.icchk-ev-card__when {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--icchk-ev-muted);
}

/* A small clock mark, so the two meta lines are scannable without icons
   in the markup — there are none to work with. */
.icchk-ev-card__when::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--icchk-ev-accent);
	vertical-align: 0.12em;
}

.icchk-ev-card__where {
	margin: 0;
	font-size: 13px;
	color: var(--icchk-ev-faint);
}

.icchk-ev-card__excerpt {
	margin: 2px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--icchk-ev-muted);
}

/* Push the footer down so cards of unequal text still align at the bottom. */
.icchk-ev-card__foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--icchk-ev-border-soft);
	align-items: center;
}

/* The base template always emits __foot, even with price and button both
   off. Without this you get a stray rule and 16px of dead space. */
.icchk-ev-card__foot:empty {
	display: none;
}

.icchk-ev-card__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--icchk-ev-text);
	letter-spacing: -0.01em;
}

.icchk-ev-card__terms .icchk-ev-pill {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------
   Orange, 5px, to match the site's own buttons exactly.

   The selector list below is element-qualified on purpose. The base sheet
   escalates to `.icchk-ev a.icchk-ev-button` (0,2,1) to out-rank Astra and
   Elementor; a bare `.icchk-ev-button` here would lose to it.

   Note this deliberately breaks the button away from --icchk-ev-accent.
   Per-event colours set inline still tint dates, pills and the stamp, but
   the call to action stays chamber orange everywhere — which is what stops
   the green event on the live page from having an unreadable pale button.
   ---------------------------------------------------------------------- */

.icchk-ev .icchk-ev-button,
.icchk-ev a.icchk-ev-button,
.icchk-ev button.icchk-ev-button,
.icchk-ev input.icchk-ev-button {
	background: var(--icchk-ev-action-grad);
	color: var(--icchk-ev-on-action);
	border: none;
	border-radius: var(--icchk-ev-radius-sm);
	font-weight: 700;
	letter-spacing: 0.005em;
	box-shadow: none;
}

.icchk-ev a.icchk-ev-button:hover:not(:disabled):not(.is-busy),
.icchk-ev button.icchk-ev-button:hover:not(:disabled):not(.is-busy),
.icchk-ev input.icchk-ev-button:hover:not(:disabled):not(.is-busy) {
	background: var(--icchk-ev-action-grad-hover);
	color: var(--icchk-ev-on-action);
	box-shadow: 0 4px 12px -3px rgba(249, 114, 47, 0.34);
}

/*
 * ---------------------------------------------------------------------
 * ACCESSIBILITY NOTE — please read before shipping
 * ---------------------------------------------------------------------
 * White text on this orange measures 2.81:1. WCAG AA wants 4.5:1 for text
 * this size (it only counts as "large" above 18.66px bold, and these
 * buttons are 13-15px).
 *
 * This is NOT introduced here. It is the chamber's existing button colour,
 * reproduced faithfully because the brief was to match the site — the
 * Dashboard button in the site header has exactly the same problem today.
 *
 * Fixing it properly is a brand decision, not a CSS one, so it is left as
 * the site has it. If you do want to fix it, either line below passes:
 *
 *   // darker orange, white text -> 4.6:1
 *   background: linear-gradient(90deg, #d9540f 0%, #c2410c 100%);
 *
 *   // keep the bright gradient, switch to dark ink -> 8.9:1
 *   color: #2b1400;
 *
 * Everything else in this stylesheet measures clean:
 *   card title 18.1:1   date 6.3:1   event stamp 4.2-10.2:1
 * ---------------------------------------------------------------------
 */

/* Ghost/outline stays blue — it is a navigation affordance, not an action. */
.icchk-ev .icchk-ev-button--ghost,
.icchk-ev a.icchk-ev-button--ghost,
.icchk-ev button.icchk-ev-button--ghost {
	background: transparent;
	color: var(--icchk-ev-accent);
	border: 1px solid color-mix(in srgb, var(--icchk-ev-accent) 32%, transparent);
	box-shadow: none;
}

.icchk-ev a.icchk-ev-button--ghost:hover:not(:disabled),
.icchk-ev button.icchk-ev-button--ghost:hover:not(:disabled) {
	background: color-mix(in srgb, var(--icchk-ev-accent) 7%, transparent);
	color: var(--icchk-ev-accent);
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 48%, transparent);
	box-shadow: none;
}

.icchk-ev .icchk-ev-button--small,
.icchk-ev a.icchk-ev-button--small {
	font-size: 13px;
	padding: 9px 16px;
}


/* -------------------------------------------------------------------------
   4. Single event page
   ---------------------------------------------------------------------- */

.icchk-ev-event__title {
	letter-spacing: -0.028em;
	line-height: 1.12;
	font-weight: 800;
}

.icchk-ev-event__when {
	color: var(--icchk-ev-muted);
	font-weight: 600;
}

/*
 * The facts row is the most-read part of the page — date, time, venue,
 * price. Lifting it onto its own card separates it from the prose instead
 * of leaving it as another grey band.
 */
.icchk-ev-event__facts {
	background: var(--icchk-ev-surface);
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-single__label {
	color: var(--icchk-ev-text);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.icchk-ev-single__value,
.icchk-ev-single__time,
.icchk-ev-single__venue-name {
	color: var(--icchk-ev-text);
	font-weight: 600;
}

.icchk-ev-single__price {
	color: var(--icchk-ev-text);
	/* Reads as one of the four facts, not as a headline above them. */
	font-weight: 600;
	letter-spacing: -0.01em;
}


/* -------------------------------------------------------------------------
   5. Forms — RSVP, tickets, waiting list
   -------------------------------------------------------------------------
   Element-qualified for the same specificity reason as the buttons: the
   base sheet uses `.icchk-ev .icchk-ev-field select` (0,2,1).
   ---------------------------------------------------------------------- */

.icchk-ev .icchk-ev-form {
	border-radius: var(--icchk-ev-radius);
	border-color: var(--icchk-ev-border);
}

.icchk-ev .icchk-ev-field input[type="text"],
.icchk-ev .icchk-ev-field input[type="email"],
.icchk-ev .icchk-ev-field input[type="tel"],
.icchk-ev .icchk-ev-field input[type="number"],
.icchk-ev .icchk-ev-field input[type="url"],
.icchk-ev .icchk-ev-field input[type="date"],
.icchk-ev .icchk-ev-field select,
.icchk-ev .icchk-ev-field textarea {
	border-radius: var(--icchk-ev-radius-sm);
	border-color: var(--icchk-ev-border);
	box-shadow: none;
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-field input:focus,
.icchk-ev .icchk-ev-field select:focus,
.icchk-ev .icchk-ev-field textarea:focus {
	border-color: var(--icchk-ev-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--icchk-ev-accent) 15%, transparent);
	outline: none;
}

.icchk-ev-field > label,
.icchk-ev-field__legend {
	font-weight: 600;
	color: var(--icchk-ev-text);
}

.icchk-ev-choice span {
	border-radius: var(--icchk-ev-radius-sm);
	font-weight: 600;
}

.icchk-ev-ticket-row {
	border-radius: var(--icchk-ev-radius-sm);
	border-color: var(--icchk-ev-border);
}

.icchk-ev-ticket-row:hover:not(.is-unavailable) {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 34%, var(--icchk-ev-border));
}

.icchk-ev-summary__line--total {
	font-weight: 800;
	color: var(--icchk-ev-text);
}


/* -------------------------------------------------------------------------
   6. Tickets in My Events
   -------------------------------------------------------------------------
   These are the one thing a member actually shows at the door, so they get
   a printed-ticket read: a coloured spine on the left and the QR clearly
   separated from the detail.
   ---------------------------------------------------------------------- */

.icchk-ev-ticket-card {
	border-radius: var(--icchk-ev-radius);
	border-left: 3px solid var(--icchk-ev-accent);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-ticket-card__qr {
	border-radius: var(--icchk-ev-radius-sm);
	border: 1px solid var(--icchk-ev-border-soft);
	padding: 10px;
}

.icchk-ev-ticket-row__meta code {
	font-size: 12.5px;
	letter-spacing: 0.06em;
	background: var(--icchk-ev-surface-sunken);
	border: 1px solid var(--icchk-ev-border-soft);
	border-radius: var(--icchk-ev-radius-xs);
	padding: 3px 7px;
	color: var(--icchk-ev-text);
}


/* -------------------------------------------------------------------------
   7. Calendar
   ---------------------------------------------------------------------- */

.icchk-ev-calendar {
	border-radius: var(--icchk-ev-radius);
}

.icchk-ev-calendar__title {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--icchk-ev-text);
}

.icchk-ev-calendar__weekday {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--icchk-ev-faint);
}

.icchk-ev-calendar__event {
	border-radius: var(--icchk-ev-radius-xs);
	font-weight: 600;
}


/* -------------------------------------------------------------------------
   8. Pills, badges, notices
   -------------------------------------------------------------------------
   Modelled on the filter tabs already running on the chamber's /event/ page:
   25px radius, orange at 10% when resting, solid orange when active. Reusing
   that pattern is what will make the new pages read as the same family as
   the old ones rather than as a replacement.
   ---------------------------------------------------------------------- */

.icchk-ev-pill {
	background: var(--icchk-ev-action-tint);
	border: 1px solid color-mix(in srgb, var(--icchk-ev-action) 45%, transparent);
	border-radius: var(--icchk-ev-radius-pill);
	color: color-mix(in srgb, var(--icchk-ev-action) 82%, #000);
	font-weight: 600;
	transition:
		background var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

a.icchk-ev-pill:hover {
	background: var(--icchk-ev-action);
	border-color: var(--icchk-ev-action);
	color: var(--icchk-ev-on-action);
}

.icchk-ev-badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.icchk-ev-notice {
	border-radius: var(--icchk-ev-radius-sm);
}


/* -------------------------------------------------------------------------
   9. Two small fixes found while reading the base sheet
   -------------------------------------------------------------------------
   Both are one-line corrections in events.css. Patched here so the skin is
   self-contained, but they are worth fixing at source.
   ---------------------------------------------------------------------- */

/*
 * events.css:2789 reads `var(--icchk-ev-success, #0f9d63)`, but no
 * --icchk-ev-success token is ever declared — the real one is
 * --icchk-ev-positive. The rule therefore always falls back to the literal
 * and ignores the palette. Declaring the alias makes it track again.
 */
.icchk-ev {
	--icchk-ev-success: var(--icchk-ev-positive);
}

/*
 * events.css:2246 hardcodes `border-radius: 14px` on the scanner viewfinder
 * — the old value of --icchk-ev-radius. Now that the token is 12px the two
 * had silently drifted apart.
 */
.icchk-ev-scan-frame {
	border-radius: var(--icchk-ev-radius);
}


/* -------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------
   The site lifts cards -3px on hover and deepens the blue shadow. Matching
   that exactly is a small thing that does a lot of the "same site" work.
   ---------------------------------------------------------------------- */

.icchk-ev-card:hover,
.icchk-ev-ticket-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--icchk-ev-shadow-3);
}

@media (prefers-reduced-motion: reduce) {
	.icchk-ev-card,
	.icchk-ev-ticket-card,
	.icchk-ev .icchk-ev-button,
	.icchk-ev a.icchk-ev-button {
		transition: none;
	}

	.icchk-ev-card:hover,
	.icchk-ev-ticket-card:hover {
		transform: none;
	}
}


/* =========================================================================
   PART TWO — the five pages
   =========================================================================
   Everything above re-skinned the shared furniture. This half rebuilds the
   components that were still reading as unstyled defaults: tables, the
   month calendar, empty states, the check-in console and the ticket stub.
   ========================================================================= */


/* -------------------------------------------------------------------------
   11. Tables — My registrations, Manage Events, Attendees
   -------------------------------------------------------------------------
   The red grid on the live site is not the plugin's. Astra ships

       table, td, th { border: 1px solid var(--ast-border-color); }

   in main.min.css, and on this site --ast-border-color resolves to the
   chamber red #ed1c24. The plugin never overrides it, so every cell got a
   red box. Astra's rule is element-level (0,0,1), so anything class-scoped
   below beats it comfortably.

   Rebuilt as a proper data table: one hairline per row, no vertical rules,
   a quiet header, hover feedback, and the action links promoted to real
   buttons.
   ---------------------------------------------------------------------- */

.icchk-ev-scroll {
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
	overflow: hidden;
	overflow-x: auto;
}

.icchk-ev-table {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	background: transparent;
	margin: 0;
}

/* Kill Astra's cell grid outright. */
.icchk-ev .icchk-ev-table th,
.icchk-ev .icchk-ev-table td {
	border: 0;
	border-bottom: 1px solid var(--icchk-ev-border-soft);
	background: transparent;
	vertical-align: middle;
}

.icchk-ev .icchk-ev-table thead th {
	padding: 13px 18px;
	background: var(--icchk-ev-surface-sunken);
	border-bottom: 1px solid var(--icchk-ev-border);
	color: var(--icchk-ev-faint);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.icchk-ev .icchk-ev-table tbody td {
	padding: 15px 18px;
	color: var(--icchk-ev-text);
	line-height: 1.45;
}

/* The last row should meet the wrapper's rounded edge cleanly. */
.icchk-ev .icchk-ev-table tbody tr:last-child td {
	border-bottom: 0;
}

.icchk-ev-table tbody tr {
	transition: background var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-table tbody tr:hover td {
	background: color-mix(in srgb, var(--icchk-ev-accent) 3.5%, transparent);
}

/* First column is the record's name — give it the weight. */
.icchk-ev-table tbody td:first-child {
	font-weight: 600;
}

.icchk-ev-table tbody td:first-child a {
	color: var(--icchk-ev-text);
	text-decoration: none;
}

.icchk-ev-table tbody td:first-child a:hover {
	color: var(--icchk-ev-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dates and counts read better aligned and in tabular figures. */
.icchk-ev-table td {
	font-variant-numeric: tabular-nums;
}

/*
 * Action links in the last column were bare anchors, which on a table of
 * three verbs looked like body copy. Promoted to compact ghost buttons.
 */
.icchk-ev-table td:last-child {
	text-align: right;
	white-space: nowrap;
}

.icchk-ev-table td:last-child a:not(.icchk-ev-button) {
	display: inline-block;
	margin-left: 6px;
	padding: 6px 13px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	color: var(--icchk-ev-accent);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		background var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-table td:last-child a:not(.icchk-ev-button):hover {
	background: color-mix(in srgb, var(--icchk-ev-accent) 7%, transparent);
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 40%, transparent);
	text-decoration: none;
}

/*
 * Status words ("scheduled", "Attending") were plain text in their own
 * column. As pills they become scannable down the column.
 */
.icchk-ev-table tbody td.icchk-ev-status,
.icchk-ev-table tbody td[data-status] {
	font-size: 12.5px;
}

@media (max-width: 700px) {
	.icchk-ev-table thead th,
	.icchk-ev-table tbody td {
		padding: 12px 13px;
	}

	.icchk-ev-table td:last-child a:not(.icchk-ev-button) {
		margin: 3px 0 0 5px;
		padding: 5px 10px;
	}
}


/* -------------------------------------------------------------------------
   12. Month calendar
   -------------------------------------------------------------------------
   Brought closer to the shape people expect from a calendar: a defined
   header bar, real navigation buttons, tinted weekends, a today marker that
   reads without shouting, and event chips with enough contrast to survive
   whatever colour an organiser picks.

   The cells were also far taller than their content warranted — a month
   with two events ran well past a screen. Tightened to a sensible band.
   ---------------------------------------------------------------------- */

.icchk-ev-calendar {
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
	overflow: hidden;
}

.icchk-ev-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 16px 20px;
	background: var(--icchk-ev-surface-sunken);
	border-bottom: 1px solid var(--icchk-ev-border);
}

.icchk-ev-calendar__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--icchk-ev-text);
}

.icchk-ev-calendar__nav {
	display: flex;
	gap: 8px;
}

/* The prev/next controls are bare <button>s carrying a chevron character. */
.icchk-ev-calendar__nav button {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	color: var(--icchk-ev-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease),
		background var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-calendar__nav button:hover {
	background: color-mix(in srgb, var(--icchk-ev-accent) 7%, transparent);
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 42%, transparent);
	color: var(--icchk-ev-accent);
}

.icchk-ev-calendar__grid {
	border: 0;
}

.icchk-ev-calendar__weekday {
	padding: 11px 6px;
	background: var(--icchk-ev-surface);
	border-bottom: 1px solid var(--icchk-ev-border);
	color: var(--icchk-ev-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

/* The markup is <abbr title="M">M</abbr> — title and text are the same
   single letter, so the dotted underline and tooltip add nothing. */
.icchk-ev-calendar__weekday abbr {
	text-decoration: none;
	border: 0;
	cursor: default;
}

.icchk-ev-calendar__day {
	min-height: clamp(52px, 10cqi, 92px);
	padding: 7px;
	transition: background var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-calendar__day:hover {
	background: var(--icchk-ev-surface-hover);
}

/* Weekend tint — the convention that makes a month grid readable at a glance. */
.icchk-ev-calendar__day:nth-child(7n + 6),
.icchk-ev-calendar__day:nth-child(7n) {
	background: color-mix(in srgb, var(--icchk-ev-surface-sunken) 62%, transparent);
}

.icchk-ev-calendar__day.is-outside {
	background: var(--icchk-ev-surface-sunken);
}

.icchk-ev-calendar__day.is-outside .icchk-ev-calendar__daynum {
	color: var(--icchk-ev-faint);
	opacity: 0.55;
}

.icchk-ev-calendar__daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	margin-bottom: 3px;
	border-radius: var(--icchk-ev-radius-xs);
	font-size: 13px;
	font-weight: 600;
	color: var(--icchk-ev-text);
}

/*
 * Today. A filled circle was the only strong mark on the grid and pulled
 * the eye away from the actual events, so it steps back to a tinted chip
 * with a ring — present, but not the loudest thing on the page.
 */
.icchk-ev-calendar__day.is-today {
	background: color-mix(in srgb, var(--icchk-ev-accent) 5%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--icchk-ev-accent) 34%, transparent);
}

.icchk-ev-calendar__day.is-today .icchk-ev-calendar__daynum {
	background: var(--icchk-ev-accent);
	color: var(--icchk-ev-on-accent);
	font-weight: 700;
}

/*
 * Event chips. The colour comes from --icchk-ev-event-color, set inline per
 * event — one measured at #1affba, which as a background left the label
 * unreadable. Now the colour becomes a solid left spine and a faint wash,
 * so the text sits on near-white whatever is chosen.
 */
.icchk-ev-calendar__event {
	display: block;
	margin-top: 3px;
	padding: 4px 7px 4px 8px;
	border-radius: var(--icchk-ev-radius-xs);
	border-left: 3px solid var(--icchk-ev-event-color, var(--icchk-ev-accent));
	background: color-mix(in srgb, var(--icchk-ev-event-color, var(--icchk-ev-accent)) 12%, #fff);
	color: var(--icchk-ev-text);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-calendar__event:hover {
	background: color-mix(in srgb, var(--icchk-ev-event-color, var(--icchk-ev-accent)) 22%, #fff);
	text-decoration: none;
}

.icchk-ev-calendar__more {
	display: block;
	margin-top: 3px;
	padding: 2px 7px;
	color: var(--icchk-ev-muted);
	font-size: 11px;
	font-weight: 600;
}


/* -------------------------------------------------------------------------
   13. Empty states
   -------------------------------------------------------------------------
   Was a bare dashed box with one grey sentence. There is no icon in the
   markup — `.icchk-ev-empty` is a lone <p> — so the illustration is drawn
   with ::before as an inline SVG, which needs no new element and no image
   request.

   The dashed border is dropped: dashed reads as "drop something here", and
   an events list with nothing in it is a normal state, not a broken one.
   ---------------------------------------------------------------------- */

.icchk-ev-empty {
	position: relative;
	margin: 0;
	padding: 52px 28px 48px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background:
		radial-gradient(
			120% 90% at 50% -10%,
			color-mix(in srgb, var(--icchk-ev-accent) 7%, transparent) 0%,
			transparent 62%
		),
		var(--icchk-ev-surface);
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--icchk-ev-muted);
	text-wrap: balance;
}

/* A calendar mark, tinted to the accent, sitting above the message. */
.icchk-ev-empty::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 auto 16px;
	background-color: var(--icchk-ev-accent);
	opacity: 0.32;
	-webkit-mask: var(--icchk-ev-empty-icon) center / contain no-repeat;
	mask: var(--icchk-ev-empty-icon) center / contain no-repeat;
}

.icchk-ev {
	--icchk-ev-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Ccircle cx='12' cy='15' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* The token lives on .icchk-ev, but .icchk-ev-empty is written unprefixed in
   the base sheet and can render outside that wrapper — so give it a fallback
   of its own. */
.icchk-ev-empty {
	--icchk-ev-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Ccircle cx='12' cy='15' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* The editor-only variant keeps its amber warning colouring. */
.icchk-ev-empty.is-editor::before {
	background-color: var(--icchk-ev-warning);
}

/* The week widget uses a different class for the same job. */
.icchk-ev-agenda__meta:only-child {
	padding: 30px 20px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
	text-align: center;
	color: var(--icchk-ev-muted);
}


/* -------------------------------------------------------------------------
   14. Check-in console
   -------------------------------------------------------------------------
   This is a tool someone uses standing at a door, on a phone, often in a
   hurry. It was rendering as a small form pinned to the left of a wide page.

   Rebuilt as a centred console: big counters, an oversized code field, and
   — the important part — a result panel that actually tells you what
   happened.

   Note `[data-icchk-scanner]` carries no class, so the attribute is the only
   available hook.
   ---------------------------------------------------------------------- */

[data-icchk-scanner] {
	max-width: 620px;
	margin: 0 auto;
}

/*
 * The widget's own heading is a sibling of the scanner, not a child, so
 * centring the console left the title stranded at the page's left edge. Only
 * pulled in when a scanner is actually present — this heading class is shared
 * with widgets that are meant to be full width.
 */
.icchk-ev-single:has( [data-icchk-scanner] ) .icchk-ev-heading {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

/*
 * The date selector — "which door am I on tonight?"
 *
 * This is the first decision of a shift and the one that silently invalidates
 * every scan if it is wrong, yet it was rendering as a generic 42px field
 * floating above the counters, while the ticket-code box beside it got a 20px
 * monospace treatment. The weighting was backwards.
 *
 * Promoted to a labelled panel built the way the emails build a fact box —
 * filled, hairline border, rounded — with a control big enough to hit with a
 * thumb while holding a guest list.
 */
[data-icchk-scanner] > .icchk-ev-field {
	gap: 10px;
	margin-bottom: 18px;
	padding: 17px 20px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

/* The emails' section label: small, uppercase, quiet — it names the panel. */
[data-icchk-scanner] > .icchk-ev-field > label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--icchk-ev-faint);
}

/*
 * Element-qualified AND attribute-qualified: the base sheet's control rule is
 * `.icchk-ev .icchk-ev-field select` (0,2,1), so a plain attribute selector
 * would lose. This is (0,3,1) and wins outright rather than by source order.
 */
.icchk-ev .icchk-ev-field select[data-scan-event] {
	min-height: 52px;
	padding: 13px 46px 13px 16px;
	background-color: var(--icchk-ev-surface);
	background-position: right 17px center;
	background-size: 14px 9px;
	font-size: 16px;
	font-weight: 600;
	color: var(--icchk-ev-text);
	cursor: pointer;
}

/*
 * Option and optgroup styling is honoured by Firefox and by Chromium's newer
 * customisable select, and ignored by the native macOS/iOS pickers. Harmless
 * where it does not apply, and worth having where it does — the options are
 * grouped by event, so the group headings carry real meaning here.
 */
.icchk-ev .icchk-ev-field select[data-scan-event] optgroup {
	font-size: 13px;
	font-weight: 700;
	color: var(--icchk-ev-muted);
}

.icchk-ev .icchk-ev-field select[data-scan-event] option {
	font-size: 15px;
	font-weight: 400;
	color: var(--icchk-ev-text);
}

/*
 * The "Arrived 0 / 0" line was a caption. Promoted to a real counter, since
 * on the door it is the number you keep glancing at.
 */
[data-icchk-scanner] .icchk-ev-stat-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	padding: 18px 24px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--icchk-ev-faint);
}

[data-icchk-scanner] .icchk-ev-stat-line > span:last-child {
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--icchk-ev-muted);
	font-variant-numeric: tabular-nums;
}

[data-icchk-scanner] .icchk-ev-stat-line [data-scan-count] {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--icchk-ev-accent);
}

/* The console body. */
.icchk-ev-scan {
	padding: 26px;
	border-radius: var(--icchk-ev-radius);
}

/*
 * The code field. Monospace, large and centred — a ticket reference is a
 * string you check character by character, and a barcode gun types into it
 * at speed.
 */
.icchk-ev .icchk-ev-scan .icchk-ev-field input[type="text"] {
	padding: 18px 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.icchk-ev .icchk-ev-scan .icchk-ev-field input[type="text"]::placeholder {
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 400;
}

.icchk-ev-scan__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

/* Both actions are equal-weight decisions at the door — give them the room. */
.icchk-ev-scan__actions .icchk-ev-button,
.icchk-ev-scan__actions button.icchk-ev-button {
	flex: 1;
	justify-content: center;
	padding: 14px 18px;
	font-size: 15px;
}

/*
 * ---------------------------------------------------------------------
 * The result panel — the highest-value fix on this page
 * ---------------------------------------------------------------------
 * events.js sets `result.className = 'icchk-ev-scan-result is-' + status`,
 * with status being 'success' or 'warning'. NEITHER state is styled in the
 * base sheet, so a valid ticket and a rejected one render identically — the
 * same grey box. On a door that is a real operational problem, not a
 * cosmetic one.
 *
 * Colour is not the only signal: each state also gets its own mark, so it
 * still reads when colour is unavailable.
 * ---------------------------------------------------------------------
 */

.icchk-ev-scan-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px;
	padding: 26px 24px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	text-align: center;
}

.icchk-ev-scan-result::before {
	content: "";
	width: 42px;
	height: 42px;
	margin-bottom: 4px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 22px;
	font-weight: 700;
	line-height: 42px;
}

.icchk-ev-scan-result > strong {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.icchk-ev-scan-result .icchk-ev-scan-name {
	font-size: 17px;
	font-weight: 600;
	color: var(--icchk-ev-text);
}

.icchk-ev-scan-result > code {
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: var(--icchk-ev-radius-xs);
	background: color-mix(in srgb, var(--icchk-ev-text) 6%, transparent);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--icchk-ev-muted);
}

/* Admitted. */
.icchk-ev-scan-result.is-success {
	border-color: color-mix(in srgb, var(--icchk-ev-positive) 38%, transparent);
	background: color-mix(in srgb, var(--icchk-ev-positive) 8%, var(--icchk-ev-surface));
}

.icchk-ev-scan-result.is-success::before {
	content: "\2713";
	background: var(--icchk-ev-positive);
	color: #fff;
}

.icchk-ev-scan-result.is-success > strong {
	color: color-mix(in srgb, var(--icchk-ev-positive) 78%, #000);
}

/* Refused — already scanned, wrong event, unknown code, network failure. */
.icchk-ev-scan-result.is-warning {
	border-color: color-mix(in srgb, var(--icchk-ev-warning) 42%, transparent);
	background: color-mix(in srgb, var(--icchk-ev-warning) 9%, var(--icchk-ev-surface));
}

.icchk-ev-scan-result.is-warning::before {
	content: "\0021";
	background: var(--icchk-ev-warning);
	color: #fff;
}

.icchk-ev-scan-result.is-warning > strong {
	color: color-mix(in srgb, var(--icchk-ev-warning) 82%, #000);
}

.icchk-ev-scan-camera {
	margin-top: 16px;
	border-radius: var(--icchk-ev-radius);
	overflow: hidden;
}

@media (max-width: 600px) {
	.icchk-ev-scan__actions {
		flex-direction: column;
	}

	[data-icchk-scanner] .icchk-ev-stat-line {
		padding: 15px 18px;
	}
}


/* -------------------------------------------------------------------------
   15. Ticket stub — My tickets
   -------------------------------------------------------------------------
   Reworked to read like a real ticket: detail on the left, QR on the right,
   separated by a perforation.

   Two constraints from the markup. The QR is an inline <svg> generated with
   light => none, so it is TRANSPARENT — its container must stay white or the
   black modules stop scanning. And .icchk-ev-card__where holds the attendee
   name here, not a venue.
   ---------------------------------------------------------------------- */

.icchk-ev-ticket-card {
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.icchk-ev-ticket-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 22px 24px;
}

.icchk-ev-ticket-card__body .icchk-ev-card__where {
	font-size: 14px;
	font-weight: 600;
	color: var(--icchk-ev-text);
}

/* The perforation. */
.icchk-ev-ticket-card__qr {
	display: grid;
	place-items: center;
	padding: 20px 24px;
	border: 0;
	border-left: 2px dashed var(--icchk-ev-border);
	border-radius: 0;
	background: #ffffff;
}

.icchk-ev-ticket-card__qr svg {
	display: block;
}

@media (max-width: 600px) {
	.icchk-ev-ticket-card__qr {
		border-left: 0;
		border-top: 2px dashed var(--icchk-ev-border);
	}
}


/* -------------------------------------------------------------------------
   16. Section headings
   ---------------------------------------------------------------------- */

.icchk-ev-heading {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--icchk-ev-text);
}


/* -------------------------------------------------------------------------
   17. The thank-you page
   -------------------------------------------------------------------------
   The screen a buyer lands on coming back from Stripe. It carries six BEM
   class names — __title, __lead, __seats, __to, __ref — and until now not one
   of them was styled in either sheet. A confirmed payment rendered as bare
   theme defaults: an h3, a paragraph, and a bulleted list.

   Worse, the free-RSVP path *was* styled (.icchk-ev-notice--success), so the
   larger transaction got the poorer screen.

   Built here as the paper twin of order_confirmed.html — same anatomy, same
   reading order: mark, headline, lead, fact panel, reference, action. The
   values are the site's tokens rather than the email's literals so it sits on
   the page rather than looking pasted in from an inbox.

   Depends on the icchk-ev-thanks--paid / --pending / --failed modifier added
   in widgets/conversion/class-tickets-widget.php. Without it the block still
   styles correctly, it just cannot colour the outcome.
   ---------------------------------------------------------------------- */

.icchk-ev-thanks {
	max-width: 640px;
	margin: 0 auto 28px;
	padding: 34px 34px 30px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
	text-align: center;
}

/*
 * The outcome mark. Colour is never the only signal — each state carries its
 * own glyph, so the screen still reads for anyone who cannot separate the
 * green from the amber.
 */
.icchk-ev-thanks::before {
	content: "";
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	border-radius: 50%;
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.icchk-ev-thanks--paid::before {
	content: "\2713";
	background: var(--icchk-ev-positive);
}

.icchk-ev-thanks--failed::before {
	content: "\0021";
	background: var(--icchk-ev-warning);
}

/*
 * Pending is a wait, not an outcome, so it gets a ring rather than a verdict.
 * The spin is opt-in: a page that says "we are still confirming your payment"
 * is exactly the wrong place to ignore a reduced-motion preference.
 */
.icchk-ev-thanks--pending::before {
	background: transparent;
	border: 3px solid var(--icchk-ev-border);
	border-top-color: var(--icchk-ev-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.icchk-ev-thanks--pending::before {
		animation: icchk-ev-thanks-spin 900ms linear infinite;
	}
}

@keyframes icchk-ev-thanks-spin {
	to {
		transform: rotate(360deg);
	}
}

.icchk-ev .icchk-ev-thanks__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--icchk-ev-text);
}

.icchk-ev .icchk-ev-thanks__lead {
	margin: 0 auto 24px;
	max-width: 52ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--icchk-ev-muted);
}

/*
 * The seat list is the email's fact panel: filled, hairline-bordered, one row
 * per guest. Left-aligned inside the centred card, because these are values
 * to be read across, not a message to be taken in at a glance.
 */
.icchk-ev .icchk-ev-thanks__seats {
	margin: 0 0 20px;
	padding: 0;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface-sunken);
	list-style: none;
	text-align: left;
	overflow: hidden;
}

/*
 * Each item is `<span>name</span> <code>number</code><span class="__to">email
 * </span>` with no wrapper, so the grid places them: name and code on the
 * first row, the email tucked under the name on the second.
 */
.icchk-ev .icchk-ev-thanks__seats li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 16px;
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid var(--icchk-ev-border-soft);
	font-size: 15px;
}

.icchk-ev .icchk-ev-thanks__seats li:last-child {
	border-bottom: 0;
}

.icchk-ev .icchk-ev-thanks__seats li > span:first-child {
	font-weight: 600;
	color: var(--icchk-ev-text);
}

/* The ticket number spans both rows, so it stays centred against the pair. */
.icchk-ev .icchk-ev-thanks__seats li > code {
	grid-column: 2;
	grid-row: 1 / -1;
	padding: 5px 11px;
	border-radius: var(--icchk-ev-radius-xs);
	background: var(--icchk-ev-surface);
	border: 1px solid var(--icchk-ev-border);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--icchk-ev-muted);
	white-space: nowrap;
}

.icchk-ev .icchk-ev-thanks__to {
	grid-column: 1;
	font-size: 13.5px;
	color: var(--icchk-ev-faint);
	overflow-wrap: anywhere;
}

/*
 * The booking reference. Reads as a labelled value, the way the emails print
 * it, rather than as a sentence with a code stuck on the end.
 */
.icchk-ev .icchk-ev-thanks__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--icchk-ev-faint);
}

.icchk-ev .icchk-ev-thanks__ref code {
	padding: 6px 13px;
	border-radius: var(--icchk-ev-radius-pill);
	background: var(--icchk-ev-action-tint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	color: color-mix(in srgb, var(--icchk-ev-action) 72%, #000);
}

/* The "See my tickets" action sits in an unclassed <p>. */
.icchk-ev .icchk-ev-thanks p:has(> .icchk-ev-button) {
	margin: 0;
}

.icchk-ev .icchk-ev-thanks .icchk-ev-button {
	padding: 13px 30px;
	font-size: 15px;
}

/* Outcome tinting, kept to the border so the card stays legible. */
.icchk-ev-thanks--paid {
	border-color: color-mix(in srgb, var(--icchk-ev-positive) 30%, var(--icchk-ev-border));
}

.icchk-ev-thanks--failed {
	border-color: color-mix(in srgb, var(--icchk-ev-warning) 34%, var(--icchk-ev-border));
}

/*
 * On a failure the basket is re-rendered directly beneath this card, so the
 * two need separating — otherwise "that did not go through" runs straight into
 * the form and reads as one block.
 */
.icchk-ev-thanks--failed,
.icchk-ev-thanks--pending {
	margin-bottom: 34px;
}

@media (max-width: 600px) {
	.icchk-ev-thanks {
		padding: 28px 20px 24px;
	}

	.icchk-ev .icchk-ev-thanks__title {
		font-size: 21px;
	}

	/*
	 * Below this width the number no longer fits beside a name, so the row
	 * stacks and the code returns to the flow.
	 */
	.icchk-ev .icchk-ev-thanks__seats li {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.icchk-ev .icchk-ev-thanks__seats li > code {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
}