/* LoudMemories — concert page. Page-only rules; the design system, chrome and
   the bootstrap-JS shim live in core/css/lm-base.css. */

:root {
	--h1: 1.8125rem;
	--hero-photo-h: 14.5rem;
	--rate-cols: 1fr;
}
@media (min-width: 480px) {
	:root { --h1: 2.25rem; --hero-photo-h: 16rem; }
}
@media (min-width: 768px) {
	:root {
		--h1: 2.75rem;
		--hero-photo-h: 17.5rem;
		--rate-cols: 1.06fr 0.94fr;
	}
}
@media (min-width: 1024px) { :root { --h1: 3.5rem; --hero-photo-h: 18.75rem; } }
@media (min-width: 1280px) { :root { --h1: 3.75rem; } }

@media (min-width: 734px) {.lm-stub-vert {display: initial;}}
@media (max-width: 733px) {.lm-stub-vert {display: none;} .lm-stub {display: none;}}
@media (max-width: 491px) {.lm-stub {display: flex;}}

/* --------------------------------------------------- hero: detail column

   The ticket shell, perforations and coupons live in core/css/lm-base.css;
   only what is written on this ticket is page-specific. */

.cc-detail {
	flex: 1 1 18.75rem;
	min-width: 0;
	padding: clamp(1.375rem, 5vw, 2.125rem) clamp(1.125rem, 3.6vw, 2.25rem);
}
.cc-admit {
	font-family: var(--lm-mono);
	font-size: 0.7188rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-ink);
	opacity: .9;
}
.cc-detail h1 {
	font-family: var(--lm-sans);
	font-size: var(--h1);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lm-ink);
	margin: 8px 0 4px;
	line-height: 1.02;
}
.cc-detail h1 a { color: inherit; }
.cc-detail h1 a:hover { color: var(--lm-green-lt); }
.cc-venue {
	font-family: var(--lm-sans);
	font-size: 1.125rem;
	color: var(--lm-ink);
	margin: 0 0 2px;
}
.cc-venue a { color: inherit; }
.cc-venue a:hover { color: var(--lm-green-lt); }
.cc-place { font-family: var(--lm-mono); font-size: 0.8125rem; color: var(--lm-ink); opacity: .85; }
.cc-date { font-family: var(--lm-mono); font-size: 0.9375rem; color: var(--lm-ink); margin-top: 14px; }
.cc-cancelled {
	margin-top: 14px;
	font-family: var(--lm-sans);
	font-size: 0.8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-red);
}
.cc-lead {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lm-ink);
	opacity: .92;
	text-wrap: pretty;
}
.cc-lead a { color: var(--lm-on-gold); }
.cc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ------------------------------------------------------------------- rate */

.cc-rate-grid {
	display: grid;
	grid-template-columns: var(--rate-cols);
	gap: clamp(0.875rem, 2.4vw, 1.375rem);
	align-items: start;
}
.cc-rate-q {
	margin: 0;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.cc-rate-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.cc-rate-opt {
	flex: 1 1 6.5rem;
	min-width: 6rem;
	min-height: 2.75rem;
	padding: 11px 12px;
	border-radius: 2px;
	cursor: pointer;
	text-align: left;
	background: transparent;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
	transition: border-color .16s, background .16s, color .16s;
}
.cc-rate-opt:hover { border-color: var(--lm-green-lt); }
.cc-rate-opt b {
	display: block;
	font-family: var(--lm-mono);
	font-size: 0.9375rem;
	font-weight: 700;
}
.cc-rate-opt span {
	display: block;
	margin-top: 5px;
	font-family: var(--lm-sans);
	font-size: 0.6563rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.25;
}
/* concert-js toggles .concert-rating-active on the chosen level. */
.cc-rate-opt.concert-rating-active {
	background: rgba(var(--lm-green-dk-rgb), .5);
	border-color: var(--lm-green-lt);
	color: var(--lm-on-green);
}
.cc-rate-readout {
	margin: 15px 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lm-ink);
	text-wrap: pretty;
}
.cc-rate-note {
	margin: 16px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	line-height: 1.6;
	color: var(--lm-muted);
}
.cc-crowd-score { display: flex; align-items: flex-end; gap: 12px; margin-top: 9px; }
.cc-crowd-score b {
	font-family: var(--lm-sans);
	font-size: clamp(2.5rem, 9vw, 3.5rem);
	font-weight: 700;
	line-height: .85;
	color: var(--lm-green-lt);
}
.cc-crowd-score span { font-family: var(--lm-mono); font-size: 0.6875rem; line-height: 1.5; color: var(--lm-muted); }
.cc-dist {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cc-dist li { display: flex; align-items: center; gap: 11px; }
.cc-dist-label {
	flex: 0 0 6.25rem;
	font-family: var(--lm-sans);
	font-size: 0.6563rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.cc-dist-track {
	flex: 1 1 auto;
	min-width: 0;
	height: 0.375rem;
	background: rgba(var(--lm-ink-rgb), .07);
	border-radius: 2px;
	overflow: hidden;
	display: block;
}
.cc-dist-track i { display: block; height: 100%; background: var(--lm-green); }
/* The level you picked is called out in gold against the crowd's green. */
.cc-dist li.is-mine .cc-dist-track i { background: var(--lm-gold); }
.cc-dist li.is-mine .cc-dist-label { color: var(--lm-on-gold); }
.cc-dist-count { flex: 0 0 auto; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }


/* -------------------------------------------------------------- tour strip */

.cc-tour {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 18px;
	align-items: stretch;
}
.cc-tour-stop {
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: 16px 18px;
	transition: border-color .16s;
	color: inherit;
	display: block;
}
.cc-tour-stop:hover { border-color: rgba(var(--lm-ink-rgb), .3); color: inherit; }
.cc-tour-stop .cc-tour-dir {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.cc-tour-stop .is-next { justify-content: flex-end; }
.cc-tour-stop strong {
	display: block;
	font-family: var(--lm-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--lm-ink);
	margin: 6px 0 2px;
}
.cc-tour-stop small { font-size: 0.7813rem; color: var(--lm-muted); font-family: var(--lm-mono); }
.cc-tour-here {
	background: rgba(var(--lm-green-dk-rgb), .32);
	border: 1px solid rgba(var(--lm-green-lt-rgb), .5);
	border-radius: 3px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 4px;
}
.cc-tour-here span:first-child {
	font-family: var(--lm-mono);
	font-size: 0.5938rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}
.cc-tour-here b { font-family: var(--lm-mono); font-size: 1.625rem; font-weight: 700; color: var(--lm-ink); line-height: 1; }
.cc-tour-here small { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }
.cc-tour-bar {
	margin-top: 8px;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: rgba(var(--lm-ink-rgb), .1);
	overflow: hidden;
}
.cc-tour-bar i { display: block; height: 100%; background: var(--lm-green); }

/* ---------------------------------------------------------------- setlist */

.cc-setlist { background: var(--lm-panel); border: 1px solid var(--lm-line); border-radius: 4px; overflow: hidden; }
.cc-setlist-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	align-items: center;
	padding: 16px clamp(0.875rem, 3vw, 1.375rem);
	border-bottom: 1px dashed var(--lm-line-strong);
	background: var(--lm-panel-2);
	font-family: var(--lm-sans);
	font-size: 0.75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.cc-setlist-head b { font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-green-lt); font-weight: 400; text-transform: none; letter-spacing: normal; }
.cc-setlist-body { padding: 8px clamp(0.875rem, 3vw, 1.375rem); }
.cc-setlist-body ol, .cc-setlist-body ul { margin: 0; padding: 0; list-style: none; }
.cc-setlist-body li {
	display: flex;
	gap: 16px;
	padding: 11px 8px;
	margin: 0 -8px;
	border-radius: 2px;
	border-bottom: 1px solid var(--lm-line);
	align-items: baseline;
	transition: background .14s;
}
.cc-setlist-body li:hover { background: var(--lm-panel-2); }
.cc-setlist-body li:last-child { border-bottom: 0; }
.cc-setlist-body li .cc-song-no { font-family: var(--lm-mono); color: var(--lm-muted); font-size: 0.8125rem; width: 24px; flex: 0 0 24px; }
.cc-setlist-body li .cc-song { font-family: var(--lm-sans); font-size: 0.9375rem; color: var(--lm-ink); letter-spacing: .01em; }
/* No margin: the markup puts a space before it, which is also what keeps
   "Show Intro (tape)" from reading as one word to a screen reader. */
.cc-setlist-body li small { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }
.cc-encore { margin-top: 6px; padding-top: 14px; border-top: 2px dashed var(--lm-line-strong); }
.cc-encore > span {
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
	margin-bottom: 4px;
	display: block;
}
.cc-setlist-empty { padding: 18px clamp(0.875rem, 3vw, 1.375rem); color: var(--lm-muted); font-size: 0.9375rem; }

.cc-alsoon {
	margin: 18px 0 10px;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	letter-spacing: .04em;
	color: var(--lm-muted);
}

/* ----------------------------------------------------------------- lineup */

.cc-lineup { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cc-lineup > li {
	flex: 1 1 20rem;
	min-width: 0;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: 18px 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.cc-lineup figure { margin: 0; flex: 0 0 52px; }
.cc-lineup figure img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--lm-panel-2);
	border: 1px solid var(--lm-line-strong);
}
.cc-lineup-info { min-width: 0; }
.cc-lineup-tag {
	font-family: var(--lm-mono);
	font-size: 0.6563rem;
	color: var(--lm-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 6px;
	display: block;
}
.cc-lineup-tag.is-headliner { color: var(--lm-green-lt); }
.cc-lineup-name { font-family: var(--lm-sans); font-size: 0.9375rem; color: var(--lm-ink); margin: 0 0 4px; display: block; }
.cc-lineup-name:hover { color: var(--lm-green-lt); }
.cc-lineup-desc { font-size: 0.8125rem; color: var(--lm-muted); line-height: 1.5; }
.cc-lineup-acts { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-family: var(--lm-mono); font-size: 0.75rem; }
.cc-lineup-acts .add, .cc-lineup-acts .added { cursor: pointer; color: var(--lm-muted); }
.cc-lineup-acts .added { color: var(--lm-green-lt); }

/* ------------------------------------------------------- venue, map, stay */

/* .cc-venue-grid/.cc-venue-card/.cc-venue-body/.cc-venue-link/.cc-stay moved
   to lm-base.css as .lm-place-grid/.lm-place-map/.lm-facts/.lm-stay - venue
   and festival each had their own version of the same section and none of
   the three agreed, which is what "Venue" and "Find accommodation nearby"
   share with the other two pages now. */

/* The leaflet marker + popup, retuned for the dark palette. */
.leaflet-popup-content { margin: 12px; line-height: 1.5; font-family: var(--lm-mono); font-size: 0.75rem; }
.leaflet-popup-content h3 { font-family: var(--lm-sans); font-size: 0.9375rem; margin: 0 0 8px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--lm-panel-2); color: var(--lm-ink); }
.leaflet-container a.leaflet-popup-close-button { color: var(--lm-muted); }

/* ------------------------------------------------- nearby / upcoming rows */

.cc-rows { margin: 0; padding: 0; list-style: none; }
.cc-row {
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
	padding: 14px 12px;
	margin: 0 -12px;
	border-radius: 3px;
	border-bottom: 1px solid var(--lm-line);
	transition: background .16s;
}
.cc-row:hover { background: rgba(var(--lm-panel-rgb), .8); color: inherit; }
.cc-row-title { font-family: var(--lm-sans); font-size: 0.9063rem; color: var(--lm-ink); min-width: 0; }
.cc-row-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	color: var(--lm-muted);
}
.cc-row-meta i { color: var(--lm-gold); font-style: normal; }

/* ------------------------------------------- countdown, weather, friends */

.cc-countdown { text-align: center; }
.cc-countdown .widget-Countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 4vw, 2rem);
	font-family: var(--lm-mono);
	color: var(--lm-ink);
}
.cc-countdown .countdown-amount {
	display: block;
	font-family: var(--lm-sans);
	font-size: clamp(1.75rem, 8vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lm-green-lt);
}
.cc-countdown .countdown-period {
	display: block;
	margin-top: 4px;
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.cc-calendar { margin-top: 14px; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }

.weatherData ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.weatherData li {
	flex: 1 1 12rem;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: 14px 16px;
	font-family: var(--lm-mono);
	font-size: 0.8125rem;
	color: var(--lm-muted);
}

.cc-friends-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cc-friends-field { margin-bottom: 14px; }
.cc-friends-field label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	color: var(--lm-muted);
}
.cc-friends-field input[type="text"], .cc-friends-field input[type="email"] {
	width: 100%;
	max-width: 26rem;
	background: var(--lm-bg);
	border: 1px solid var(--lm-line-strong);
	border-radius: 2px;
	color: var(--lm-ink);
	font-family: var(--lm-serif);
	font-size: 1rem;
	padding: 12px 13px;
}
/* The field and the button that sends it, side by side and the same height.
   The button used to sit straight under the field with nothing between
   them, a green block glued to the box's bottom edge; on a phone the row
   wraps and the button takes the whole width under it, with a gap. */
.cc-friends-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; max-width: 36rem; }
.cc-friends-row input[type="text"], .cc-friends-row input[type="email"] { flex: 1 1 14rem; width: auto; max-width: none; min-width: 0; }
.cc-friends-row .lm-btn { flex: 0 0 auto; }
@media (max-width: 30rem) {
	.cc-friends-row .lm-btn { flex-basis: 100%; }
}
/* The companion list, and the search results above it. Both come from
   content/concert/ajax/, which used to answer with a six-column bootstrap
   table for one and a col-md-4 grid for the other. */

.cc-buddies { margin: 0; padding: 0; list-style: none; }
.cc-buddies.is-search { margin-top: 12px; }
.cc-buddies-head {
	margin: 22px 0 8px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.cc-buddy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lm-line);
}
.cc-buddy-no { font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }
.cc-buddy-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.cc-buddy-avatar.is-blank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lm-panel-2);
	border: 1px dashed var(--lm-line-strong);
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	color: var(--lm-muted);
}
.cc-buddy-body { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-buddy-name { font-family: var(--lm-sans); font-size: 0.9375rem; color: var(--lm-ink); }
a.cc-buddy-name:hover { color: var(--lm-green-lt); }
.cc-buddy-meta,
.cc-buddy-note { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }
.cc-buddy-note { color: var(--lm-gold); text-transform: uppercase; letter-spacing: .06em; }
.cc-buddy-score { font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }
.cc-buddy-acts { display: flex; gap: 8px; flex: none; }
.cc-buddy-act {
	background: none;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	color: var(--lm-muted);
	cursor: pointer;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	min-height: 44px;
	padding: 0 12px;
	transition: border-color .16s, color .16s;
}
.cc-buddy-act.is-on:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.cc-buddy-act.is-off:hover { border-color: var(--lm-red); color: var(--lm-red); }

/* --------------------------------------------------------- review composer */

.cc-composer label {
	display: block;
	margin-bottom: 9px;
	font-family: var(--lm-sans);
	font-size: 0.8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.cc-composer textarea {
	width: 100%;
	background: var(--lm-bg);
	border: 1px solid var(--lm-line-strong);
	border-radius: 2px;
	color: var(--lm-ink);
	font-family: var(--lm-serif);
	font-size: 1rem;
	line-height: 1.6;
	padding: 12px 13px;
	resize: vertical;
	min-height: 9rem;
}
.cc-composer-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 11px;
}
/* The note beside the Share button, and only that — a child selector rather
   than a descendant one. It was written when the note was the only span in
   the foot, so putting one inside the button reached it too: measured, the
   button's own label came out mono grey at 1.22:1 on the green instead of
   --lm-on-accent at 7.38. lm-base.css holds the button's labels to the
   button's own type as well, so neither rule is the only thing stopping it. */
.cc-composer-foot > span { font-family: var(--lm-mono); font-size: 0.625rem; letter-spacing: .06em; color: var(--lm-muted); }
.cc-composer-note { margin: 11px 0 0; font-family: var(--lm-mono); font-size: 0.625rem; line-height: 1.6; color: var(--lm-muted); }

/* The signed-out call to action. A guest gets the same five rating buttons a
   member does - one tap is the whole ask - but each opens the modal that takes
   a score and a review together and needs no account, with that score already
   picked. (They once opened the login modal, and were replaced by a single
   button; the button stays, below them, for whoever wants to write first.) */
.cc-guest-lead {
	margin: 13px 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--lm-ink);
	text-wrap: pretty;
}
.cc-guest-lead b { color: var(--lm-gold); }
.cc-guest-go {
	margin-top: 15px;
	width: 100%;
	min-height: 3rem;
	font-size: 1rem;
}
.cc-guest-note {
	margin: 12px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	line-height: 1.7;
	color: var(--lm-muted);
}
.cc-guest-note b { color: var(--lm-ink); font-weight: 700; }
.cc-composer-lineup { margin-top: 16px; font-size: 0.875rem; color: var(--lm-muted); }
.cc-composer-lineup ul { margin: 8px 0 0; padding: 0 0 0 1.25rem; }
.cc-composer-lineup li { margin: 4px 0; }

/* ------------------------------------------------- claiming a guest review

   Shown the instant a review written without an account lands, which is the
   one moment somebody who is not a member is certain to be paying attention -
   they have just typed a paragraph about a night out.

   Gold rather than green, and that is this site's own vocabulary rather than a
   preference. Green is the primary action colour and there is a green button
   sitting inside this panel; gold is what the site means by "yours" everywhere
   else - the link colour, the eyebrow, the subject of a memory card - and this
   panel is entirely about something becoming yours.

   Three tokens, not one used three times: --lm-gold on the border, --lm-gold-dk
   behind, --lm-on-gold in front. Drawing all three from --lm-gold is the
   mistake this codebase has now made four times, and every time the wash lifts
   the ground towards the ink and the text falls under the bar. All three flip
   with the theme by construction - on light, gold-dk is the pale tint and
   on-gold the dark text on it - so there is no light override to write.

   --lm-muted is redeclared on the container for the same reason
   .lm-ticket.is-green has to: the page's grey is chosen against the page, and
   a wash is a different ground. Declaring it here rather than colouring the
   one child that fails today is what stops the next child being found by
   somebody else. */
.cc-claim {
	--lm-muted: var(--lm-on-gold);
	margin: 18px 0 0;
	padding: clamp(0.875rem, 3vw, 1.25rem);
	border: 1px solid var(--lm-gold);
	border-radius: 3px;
	background: var(--lm-gold-dk);
	color: var(--lm-on-gold);
}
.cc-claim-eyebrow {
	margin: 0 0 6px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-on-gold);
}
.cc-claim-h {
	margin: 0 0 8px;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: clamp(1.125rem, 3.5vw, 1.375rem);
	line-height: 1.2;
	color: var(--lm-on-gold);
}
.cc-claim-body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--lm-on-gold); }
.cc-claim-body b { font-weight: 700; }
.cc-claim-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cc-claim-note {
	margin: 12px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	line-height: 1.7;
	color: var(--lm-on-gold);
}

/* -------------------------------------------------------- expanded panels */

#selectedContent { display: none; }
#selectedContent .closeSelectedContent {
	cursor: pointer;
	font-family: var(--lm-sans);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-gold);
}
.cc-source { margin-top: var(--lm-sec-gap); text-align: right; }
.cc-source img { opacity: .55; }
.cc-source img:hover { opacity: 1; }

/* -------------------------------------------------------- other */

.lm-panel {
	overflow: hidden;
}
/* ------------------------------------ clearing up after a rating is withdrawn

   The modal that asks whether the night, and the festival edition it belongs
   to, should come out of the journal along with the score. It is a question
   about somebody's memory, so it is drawn quietly: nothing is preselected and
   the way out is as plain as the way through.

   Everything is scoped to the modal's id rather than written as .uc-*, because
   lm-base.css styles ".modal-body label" as a form field caption — small, grey,
   uppercase and display:block. A checkbox row is not that, and at one class
   these rules lost to it, taking the flex layout with them. */
#unrateCleanup .uc-lead {
	margin: 0 0 16px;
	font-family: var(--lm-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--lm-ink);
}
#unrateCleanup .uc-opts { display: flex; flex-direction: column; gap: 10px; }
#unrateCleanup .uc-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	background: var(--lm-panel-2);
	font-family: var(--lm-serif);
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lm-ink);
	cursor: pointer;
}
#unrateCleanup .uc-opt:hover { border-color: var(--lm-green-lt); }
#unrateCleanup .uc-opt input { flex: 0 0 auto; width: auto; margin: 4px 0 0; }
#unrateCleanup .uc-opt b { font-weight: 600; color: var(--lm-green-lt); }
#unrateCleanup .uc-opt[hidden] { display: none; }
#unrateCleanup .uc-note {
	margin: 14px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--lm-muted);
}
#unrateCleanup .uc-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* The day of the show: a line in the countdown's place, as large as its
   figures were. */
.cc-today {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: clamp(1.375rem, 5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}