/*
 * AWARDS.CSS
 * The awards on the front end: the ballot (.jm-ballot); the Awards page (.jm-results) and its two-part view
 * (.jm-awardsview: the pages and the chat, also in the pop-up) with the charts (.jm-chart); the Awards feed
 * (.jm-awardsfeed); award badges (.jm-badge); and the
 * awards builder for group owners (.jm-manage, /manage/{competition}/).
 * First looks, phone first; the styling pass will finish them (the old journey/tile leaflet is the reference).
 */


/* ============================================================
 * 1. THE BALLOT: one question at a time
 * ============================================================ */

.jm-ballot { max-width: 720px; }

.jm-ballot__intro { color: var(--jm-colour-text-soft); }

.jm-ballot__step {
	margin: 0 0 var(--jm-space-4);
	padding: 0;
	border: 0;
}

.jm-ballot__count {
	margin: 0;
	font-size: var(--jm-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-colour-text-soft);
}

.jm-ballot__question {
	margin: var(--jm-space-1) 0 var(--jm-space-2);
	font-size: var(--jm-text-l);
	font-weight: 700;
	color: var(--jm-colour-heading);
}

.jm-ballot__hint { margin: 0 0 var(--jm-space-3); font-size: var(--jm-text-s); color: var(--jm-colour-text-soft); }

/* Mixes: a grid of covers; the picked one is ringed in the action colour. */
.jm-ballot__mixes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jm-space-3);
}

@media (min-width: 700px) {
	.jm-ballot__mixes { grid-template-columns: repeat(3, 1fr); }
}

.jm-ballot__mix {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--jm-space-1);
	cursor: pointer;
}

.jm-ballot__mix input,
.jm-ballot__song input { position: absolute; opacity: 0; pointer-events: none; }

.jm-ballot__mix img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--jm-radius-s);
	box-shadow: var(--jm-shadow-1);
	outline: 3px solid transparent;
	outline-offset: 2px;
	transition: outline-color var(--jm-motion-time) var(--jm-ease-out), transform var(--jm-motion-time) var(--jm-ease-out);
}

.jm-ballot__mix input:checked + img { outline-color: var(--jm-colour-action); transform: scale(0.97); }
.jm-ballot__mix input:focus-visible + img { outline-color: var(--jm-colour-accent-3); }

.jm-ballot__mix span,
.jm-ballot__song span { display: flex; flex-direction: column; line-height: 1.3; }
.jm-ballot__mix small,
.jm-ballot__song small { color: var(--jm-colour-text-soft); font-size: var(--jm-text-xs); }

/* Songs: a list of rows; ticked rows light up. */
.jm-ballot__songs { display: flex; flex-direction: column; gap: var(--jm-space-2); }

.jm-ballot__song {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--jm-space-3);
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 1px solid var(--jm-colour-line);
	border-radius: var(--jm-radius-m);
	cursor: pointer;
}

.jm-ballot__song::before {
	content: "♡";
	font-size: var(--jm-text-l);
	color: var(--jm-colour-text-soft);
}

.jm-ballot__song:has(input:checked) { border-color: var(--jm-colour-action); background: var(--jm-colour-header); }
.jm-ballot__song:has(input:checked)::before { content: "♥"; color: var(--jm-colour-action); }
.jm-ballot__song:has(input:disabled) { opacity: 0.45; cursor: default; }

.jm-ballot__nav {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	gap: var(--jm-space-2);
	padding: var(--jm-space-3) 0;
	background: var(--jm-colour-background);
}

.jm-ballot__nav [hidden] { display: none; }
.jm-ballot__nav [data-jm-save],
.jm-ballot__nav [data-jm-next] { margin-left: auto; }


/* ============================================================
 * 2. THE RESULTS PAGE: pages of charts (one at a time, Back / Next); the placeholder while hidden
 * ============================================================ */

.jm-results__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--jm-space-2); }
.jm-results__nav[hidden] { display: none; }
.jm-results__nav [hidden] { visibility: hidden; display: inline-flex; } /* keeps Next on the right when Back is gone */

.jm-results { max-width: 820px; }

.jm-results__page {
	margin: 0 0 var(--jm-space-5);
	padding: var(--jm-space-4);
	background: var(--jm-colour-header);
	border-radius: var(--jm-radius-block);
	box-shadow: var(--jm-shadow-1);
}

.jm-results__heading { margin-top: 0; }
.jm-results__text { color: var(--jm-colour-text-soft); }
.jm-results__staff { font-size: var(--jm-text-s); }

/* "Wrapped": each page a full-height card in its own colour, big type, arriving with a little rise (Nick, 21 Oct). */
.jm-results--wrapped .jm-results__page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 70vh;
	cursor: pointer;
	background: linear-gradient(160deg, var(--jm-wrap-a, var(--jm-colour-accent-4)), var(--jm-wrap-b, var(--jm-colour-dark-1)));
	animation: jm-wrap-in var(--jm-motion-time-leaflet) var(--jm-ease-silk) both;
}

.jm-results--wrapped .jm-results__page:nth-child(5n+1) { --jm-wrap-a: var(--jm-colour-scale-3); }
.jm-results--wrapped .jm-results__page:nth-child(5n+2) { --jm-wrap-a: var(--jm-colour-accent-3); }
.jm-results--wrapped .jm-results__page:nth-child(5n+3) { --jm-wrap-a: var(--jm-colour-scale-1); }
.jm-results--wrapped .jm-results__page:nth-child(5n+4) { --jm-wrap-a: var(--jm-colour-accent-2); }
.jm-results--wrapped .jm-results__page:nth-child(5n+5) { --jm-wrap-a: var(--jm-colour-scale-5); }
.jm-results--wrapped .jm-chart__title,
.jm-results--wrapped .jm-results__heading { font-size: var(--jm-text-xl); color: var(--jm-colour-text); }

/* A page that isn't the current one (the pager sets hidden; the flex above would otherwise keep it showing). */
.jm-results__page[hidden] { display: none; }

@keyframes jm-wrap-in {
	from { opacity: 0; transform: translateY(var(--jm-motion-rise)) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jm-results--wrapped .jm-results__page { animation: none; }
}

/* "Your year in mixes": one big number, one line, per fact. */
.jm-you { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--jm-space-4); }
.jm-you li { display: flex; flex-direction: column; }
.jm-you__big { font-size: calc(var(--jm-text-xl) * 1.6); font-weight: 700; line-height: 1; color: var(--jm-colour-action); }
.jm-you__text { font-size: var(--jm-text-m); }

/* The greyed-out placeholder (Brief D14): three blank podium bars. */
.jm-results__soon {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: end;
	gap: var(--jm-space-3);
	max-width: 420px;
	margin: var(--jm-space-5) auto;
	text-align: center;
}

.jm-results__soon span {
	display: block;
	height: 90px;
	border-radius: var(--jm-radius-s) var(--jm-radius-s) 0 0;
	background: var(--jm-colour-surface);
	opacity: 0.5;
}

.jm-results__soon span:nth-child(2) { height: 140px; }
.jm-results__soon p { grid-column: 1 / -1; color: var(--jm-colour-text-soft); }


/* ============================================================
 * 3. CHARTS (every chart template draws with these classes)
 * ============================================================ */

.jm-chart { margin: 0 0 var(--jm-space-4); }
.jm-chart__title { margin: 0 0 var(--jm-space-3); font-size: var(--jm-text-l); color: var(--jm-colour-heading); }
.jm-chart__badge { margin-left: var(--jm-space-2); padding: 0 var(--jm-space-2); border-radius: var(--jm-radius-button); background: var(--jm-colour-surface); font-size: var(--jm-text-xxs); }
.jm-chart__empty { color: var(--jm-colour-text-soft); }
.jm-chart__num { font-weight: 700; color: var(--jm-colour-action); white-space: nowrap; }
.jm-chart__sub { margin: calc(-1 * var(--jm-space-2)) 0 var(--jm-space-2); font-size: var(--jm-text-s); color: var(--jm-colour-text-soft); }
.jm-chart__rank { width: 1.5em; flex: none; font-weight: 700; text-align: right; color: var(--jm-colour-text-soft); }

.jm-chart__cover { width: 56px; height: 56px; object-fit: cover; border-radius: var(--jm-radius-s); flex: none; }
.jm-chart__cover--none { display: inline-block; background: var(--jm-colour-surface); }

.jm-chart__list { margin: 0; padding: 0; list-style: none; }
.jm-chart__list li { display: flex; align-items: center; gap: var(--jm-space-3); padding: var(--jm-space-2) 0; border-bottom: 1px solid var(--jm-colour-line); }
.jm-chart__list li > span:first-of-type { flex: 1; }
.jm-chart__list small { color: var(--jm-colour-text-soft); }

.jm-chart__table { width: 100%; border-collapse: collapse; }
.jm-chart__table th, .jm-chart__table td { padding: var(--jm-space-2); text-align: left; border-bottom: 1px solid var(--jm-colour-line); }
.jm-chart__table th { font-weight: 500; color: var(--jm-colour-text-soft); }

.jm-chart__person { display: inline-flex; align-items: center; gap: var(--jm-space-2); }
.jm-chart__person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Podium: champion in the middle, taller. */
.jm-podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--jm-space-3); text-align: center; }
.jm-podium__place { display: flex; flex-direction: column; align-items: center; gap: var(--jm-space-1); width: 30%; }
.jm-podium__place img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: var(--jm-shadow-1); }
.jm-podium__place.is-first img { width: 96px; height: 96px; }
.jm-podium__place small { color: var(--jm-colour-text-soft); font-size: var(--jm-text-xs); }
.jm-podium__bar { display: block; width: 100%; margin-top: var(--jm-space-2); padding: var(--jm-space-4) 0 var(--jm-space-2); border-radius: var(--jm-radius-s) var(--jm-radius-s) 0 0; background: var(--jm-colour-accent-2); color: var(--jm-colour-action-text); font-size: var(--jm-text-xs); font-weight: 700; }
.jm-podium__place.is-first .jm-podium__bar { padding-top: var(--jm-space-6); }

/* A single winner: big cover, the award, the mix and its maker. */
.jm-winner { display: flex; align-items: center; gap: var(--jm-space-4); }
.jm-winner .jm-chart__cover { width: 45%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; box-shadow: var(--jm-shadow-2); }
.jm-winner__text { display: flex; flex-direction: column; gap: var(--jm-space-1); }
.jm-winner__text strong { font-size: var(--jm-text-l); }
.jm-winner__text small { color: var(--jm-colour-text-soft); }
.jm-winner__award { font-size: var(--jm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jm-colour-action); }


/* ============================================================
 * 4. (moved) The Vote and Awards blocks now live in the Sticky Bar: 20-components/sticky-bar.css.
 * ============================================================ */


/* ============================================================
 * 5. AWARD BADGES on covers (a picture when assets/stickers/{award}-{place}.svg exists, else a small label)
 * ============================================================ */

.jm-badges { position: absolute; top: var(--jm-space-2); left: var(--jm-space-2); z-index: 2; display: flex; flex-direction: column; gap: var(--jm-space-1); pointer-events: none; }
.jm-badge { padding: 2px var(--jm-space-2); border-radius: var(--jm-radius-button); background: var(--jm-colour-accent-2); color: var(--jm-colour-action-text); font-size: var(--jm-text-xxs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--jm-shadow-1); }
.jm-badge--2 { background: var(--jm-colour-light-2); }
.jm-badge--img { width: 48px; height: 48px; padding: 0; background: none; box-shadow: none; }

/* On the leaflet's cover: the same corner as on a card. In the cover pop-up: a row under the maker's name. */
.jm-badges--cover { top: var(--jm-space-3); left: var(--jm-space-3); }
.jm-badges--pop { position: static; flex-direction: row; flex-wrap: wrap; margin: 0 0 var(--jm-space-4); }
.jm-badges--pop .jm-badge--img { width: 64px; height: 64px; }


/* ============================================================
 * 6. THE AWARDS VIEW: two parts, like the leaflet (Nick, 21 Oct)
 * Desktop: the pages on the left, the chat on the right (it stays in view). Phones: the pages, and the chat as a panel
 * at the bottom that slides up (the handle) and can stay open while paging. Also the pop-up, the feed and the reveal.
 * ============================================================ */

.jm-results--view { max-width: none; }

.jm-awardsview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	align-items: start;
	gap: var(--jm-space-4);
	max-width: 1200px;
	margin: 0 auto;
}

.jm-awardsview--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.jm-awardsview__main { min-width: 0; }

.jm-awardsview__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jm-space-2);
	margin: 0 0 var(--jm-space-3);
}

.jm-awardsview__title { margin: 0; font-size: var(--jm-text-l); }
.jm-awardsview__close { display: none; }

/* Pager dots along the top: the current page is a short bar. Tap one to jump. */
.jm-awardsview__dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.jm-awardsview__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--jm-colour-line);
	cursor: pointer;
	transition: width var(--jm-motion-time) var(--jm-ease-out), background var(--jm-motion-time);
}

.jm-awardsview__dot[aria-current="true"] { width: 22px; background: var(--jm-colour-action); }

/* The chat (the leaflet's comment look, leaflet.css 7b). */
.jm-awardsview__chat {
	--jm-tone-bg: var(--jm-colour-text);
	position: sticky;
	top: calc(var(--jm-header-height) + var(--jm-space-3));
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--jm-header-height) - var(--jm-space-5));
	overflow: hidden;
	border-radius: var(--jm-radius-block);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-1);
}

.jm-awardsview__handle {
	display: flex;
	align-items: center;
	gap: var(--jm-space-2);
	width: 100%;
	padding: var(--jm-space-3) var(--jm-space-4);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--jm-text-s);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	cursor: default;
}

.jm-awardsview__chevron { display: none; margin-left: auto; transition: transform var(--jm-motion-time); }
.jm-awardsview__chatbody { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--jm-space-4); }
.jm-awardsview__chatbody .jm-comments { margin-bottom: var(--jm-space-2); }
.jm-awardsview__chat .jm-panel__empty { color: var(--jm-colour-text-soft); font-size: var(--jm-text-s); }

/* In the pop-up: a wide card; each part scrolls on its own. */
.jm-modal__card:has(.jm-awardsview) {
	width: min(1200px, 100%);
	height: 92vh;
	padding: var(--jm-space-4);
	overflow: hidden;
	background: var(--jm-colour-background);
	border-radius: var(--jm-radius-block);
}

.jm-modal__card .jm-awardsview { height: 100%; }
.jm-modal__card .jm-awardsview__main { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.jm-modal__card .jm-awardsview__chat { position: static; height: 100%; max-height: none; }
.jm-modal__card .jm-awardsview__close { display: block; position: static; margin-left: auto; }
.jm-modal__card .jm-results--wrapped .jm-results__page { min-height: 60vh; }

/* Phones: the pages, then the chat as a panel along the bottom. */
@media (max-width: 700px) {
	.jm-awardsview { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.jm-results--view .jm-awardsview { min-height: calc(100dvh - var(--jm-header-height)); }
	.jm-results--view .jm-awardsview__main { flex: 1; padding-bottom: var(--jm-space-4); }

	.jm-awardsview__chat {
		position: sticky;
		top: auto;
		bottom: 0;
		max-height: none;
		border-radius: var(--jm-radius-block) var(--jm-radius-block) 0 0;
		box-shadow: var(--jm-shadow-3);
	}

	.jm-awardsview__handle { cursor: pointer; }
	.jm-awardsview__chevron { display: inline; }
	.jm-awardsview__chat:not(.is-open) .jm-awardsview__chatbody,
	.jm-awardsview__chat:not(.is-open) .jm-comment-form { display: none; }
	.jm-awardsview__chat.is-open { max-height: 70dvh; }
	.jm-awardsview__chat.is-open .jm-awardsview__chevron { transform: rotate(180deg); }

	.jm-modal__card:has(.jm-awardsview) { height: 100dvh; padding: var(--jm-space-3) var(--jm-space-3) 0; border-radius: 0; }
	.jm-modal__card .jm-awardsview__main { flex: 1; min-height: 0; height: auto; }
	.jm-modal__card .jm-awardsview__chat { position: static; flex: none; height: auto; margin: 0 calc(-1 * var(--jm-space-3)); }
	.jm-modal__card .jm-awardsview__chat.is-open { max-height: 70dvh; }
}

/* Vote charts: the runner(s)-up, in one line under the winner (no places shown). */
.jm-chart__runners { margin: var(--jm-space-3) 0 0; font-size: var(--jm-text-s); }
.jm-chart__runners span { margin-right: var(--jm-space-2); font-size: var(--jm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jm-colour-action); }

/* A dashboard chart an owner hasn't chosen to peek at (boards.php 3). */
.jm-chart--hidden { padding: var(--jm-space-3); border: 1px dashed var(--jm-colour-line); opacity: 0.75; }

/* The owner's Reveal Charts button on the coming-soon screen. */
.jm-results__reveal { margin: var(--jm-space-4) 0 var(--jm-space-2); text-align: center; }

/* The Awards feed (/awards/): a simple list of blocks, newest first. */
.jm-awardsfeed { max-width: 720px; }
.jm-awardsfeed__list { display: flex; flex-direction: column; gap: var(--jm-space-3); margin: 0; padding: 0; list-style: none; }

.jm-awardsfeed__item {
	display: flex;
	align-items: center;
	gap: var(--jm-space-3);
	padding: var(--jm-space-3);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-1);
	color: var(--jm-colour-text);
	text-decoration: none;
}

.jm-awardsfeed__item:hover { box-shadow: var(--jm-shadow-2); }
.jm-awardsfeed__cover { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: var(--jm-radius-s); }
.jm-awardsfeed__cover--none { display: grid; place-items: center; background: var(--jm-colour-surface); color: var(--jm-colour-action); font-size: var(--jm-text-l); }
.jm-awardsfeed__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.jm-awardsfeed__text small { color: var(--jm-colour-text-soft); font-size: var(--jm-text-xs); }
.jm-awardsfeed__cta { font-size: var(--jm-text-s); font-weight: 700; color: var(--jm-colour-action); white-space: nowrap; }

@media (max-width: 500px) {
	.jm-awardsfeed__cta { display: none; }
}


/* ============================================================
 * 7. THE AWARDS BUILDER (/manage/{competition}/): the leaflet wizard's look, for the results page
 * Pages as cards; a dashed "+" between blocks; each block shows its name and ↑ ↓ above its drawing.
 * ============================================================ */

.jm-manage { max-width: 820px; }

.jm-manage .jm-steps { flex-wrap: wrap; gap: var(--jm-space-2) var(--jm-space-3); }
.jm-manage .jm-steps li { list-style: none; }
.jm-manage button.jm-steps__step { border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--jm-text-s); cursor: pointer; }
.jm-manage button.jm-steps__step.is-active { border-bottom-color: var(--jm-colour-heading); }

.jm-manage__source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-2); font-size: var(--jm-text-s); }
.jm-manage__source .jm-chip { background: none; color: inherit; font: inherit; font-size: var(--jm-text-s); }
.jm-manage__source .jm-chip[hidden] { display: none; }
.jm-chip.is-on { border-color: var(--jm-colour-flavour); background: var(--jm-colour-flavour); color: var(--jm-colour-button-text); }
.jm-manage__source .jm-chip.is-on { background: var(--jm-colour-flavour); color: var(--jm-colour-button-text); }
.jm-manage__source .jm-link { margin-left: auto; }

.jm-manage__page { position: relative; }

.jm-manage__pagehead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 var(--jm-space-2);
	font-size: var(--jm-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-colour-text-soft);
}

.jm-manage__pagehead .jm-link { font-size: var(--jm-text-xs); letter-spacing: 0; text-transform: none; }
.jm-manage__empty { color: var(--jm-colour-text-soft); font-size: var(--jm-text-s); }

/* The "+" between blocks: a thin dashed line that grows on hover (same teal as the leaflet builder's slots). */
.jm-manage__add {
	display: block;
	width: 100%;
	margin: var(--jm-space-2) 0;
	padding: var(--jm-space-1) 0;
	border: 2px dashed color-mix(in srgb, var(--jm-colour-flavour) 55%, transparent);
	border-radius: var(--jm-radius-m);
	background: transparent;
	color: var(--jm-colour-flavour);
	font-size: var(--jm-text-l);
	line-height: 1;
	cursor: pointer;
	transition: background var(--jm-motion-time), border-color var(--jm-motion-time);
}

.jm-manage__add:hover,
.jm-manage__add:focus-visible { border-color: var(--jm-colour-flavour); background: color-mix(in srgb, var(--jm-colour-flavour) 12%, transparent); }

/* A block: tap to change it (outline on hover), its name and ↑ ↓ above. */
.jm-manage__block {
	padding: var(--jm-space-2) var(--jm-space-3) var(--jm-space-1);
	border: 1px solid transparent;
	border-radius: var(--jm-radius-m);
	cursor: pointer;
	transition: border-color var(--jm-motion-time);
}

.jm-manage__block:hover,
.jm-manage__block:focus-visible { border-color: var(--jm-colour-flavour); outline: none; }

.jm-manage__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jm-space-2);
	margin: 0 0 var(--jm-space-2);
	font-size: var(--jm-text-xs);
}

.jm-manage__name { font-weight: 700; color: var(--jm-colour-heading); }

.jm-manage__chip {
	padding: 0 var(--jm-space-2);
	border-radius: var(--jm-radius-button);
	background: var(--jm-colour-accent-2);
	color: var(--jm-colour-action-text);
}

.jm-manage__chip--soft { background: var(--jm-colour-surface); color: var(--jm-colour-text); }

.jm-manage__moves { display: flex; gap: var(--jm-space-1); margin-left: auto; }

.jm-manage__moves button {
	width: 30px;
	height: 30px;
	border: 1px solid var(--jm-colour-line);
	border-radius: 50%;
	background: var(--jm-colour-background);
	color: var(--jm-colour-text);
	cursor: pointer;
}

.jm-manage__moves button:disabled { opacity: 0.3; cursor: default; }
.jm-manage__view { pointer-events: none; }   /* the drawing is a preview; the tap goes to the block */
.jm-manage__view .jm-chart { margin-bottom: var(--jm-space-2); }
.jm-chart--locked { opacity: 0.6; }

.jm-manage__how { margin: 0 0 var(--jm-space-3); font-size: var(--jm-text-s); }
.jm-manage__how summary { cursor: pointer; color: var(--jm-colour-link); }

/* Ballot and Go live: simple cards. */
.jm-manage__card {
	margin: 0 0 var(--jm-space-4);
	padding: var(--jm-space-4);
	border-radius: var(--jm-radius-block);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-1);
}

.jm-manage__card h2 { margin-top: 0; font-size: var(--jm-text-l); }
.jm-manage__questions { margin: 0; padding-left: var(--jm-space-4); }
.jm-manage__questions li { margin: 0 0 var(--jm-space-2); }
.jm-manage__questions small { display: block; color: var(--jm-colour-text-soft); }
.jm-manage__date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-2); }
.jm-manage__date input[type="date"],
.jm-manage__date select {                      /* the same look as the other fields (field.css), side by side */
	width: auto;
	min-height: 46px;
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 1.5px solid var(--jm-colour-required);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
}
.jm-manage__card textarea { box-sizing: border-box; width: 100%; padding: var(--jm-space-2) var(--jm-space-3); border: 1.5px solid var(--jm-colour-required); border-radius: var(--jm-radius-m); background: var(--jm-colour-field); color: var(--jm-colour-text); font: inherit; }
.jm-manage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-2); margin-bottom: 0; }
.jm-manage__moment.is-done h2 { color: var(--jm-colour-flavour); }
.jm-manage [data-jm-m-notice] { position: sticky; top: var(--jm-space-2); z-index: 5; }

.jm-manage__tick { display: flex; align-items: center; gap: var(--jm-space-2); font-size: var(--jm-text-s); }
.jm-manage__date[hidden] { display: none; }

/* The builder's Dashboard step: each chart with its label (Always, Peek or Hidden). */
.jm-manage__dash { margin: 0 0 var(--jm-space-4); padding: var(--jm-space-3); border-radius: var(--jm-radius-block); background: var(--jm-colour-header); box-shadow: var(--jm-shadow-1); }
.jm-manage__dash > .jm-manage__chip { display: inline-block; margin: 0 0 var(--jm-space-2); font-size: var(--jm-text-xs); }


/* ============================================================
 * 8. THE FRONT-END CONTROL ROOM (/control-room/, jm-core control.php)
 * A group's listener link, then a block per competition (tap to open it), each with its entry link.
 * ============================================================ */

.jm-control { max-width: 820px; }
.jm-control__group { margin: 0 0 var(--jm-space-5); }

.jm-control__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jm-space-2);
	margin: 0 0 var(--jm-space-3);
	font-size: var(--jm-text-s);
}

.jm-control__label { font-size: var(--jm-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jm-colour-text-soft); }
.jm-control__state { font-size: var(--jm-text-xs); color: var(--jm-colour-action); }
.jm-control__buttons { display: inline-flex; flex-wrap: wrap; gap: var(--jm-space-3); }
.jm-control__link code { padding: 2px var(--jm-space-2); background: var(--jm-colour-surface); word-break: break-all; }
.jm-control__comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--jm-space-3); }

.jm-control__comp {
	padding: var(--jm-space-3);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-2);
}

.jm-control__comp .jm-control__link { margin: var(--jm-space-3) 0 0; }
.jm-control__open { display: flex; flex-direction: column; gap: var(--jm-space-1); color: var(--jm-colour-text); text-decoration: none; }
a.jm-control__open strong::after { content: " →"; color: var(--jm-colour-action); }
.jm-control__status { font-size: var(--jm-text-s); color: var(--jm-colour-action); }
.jm-control__next { font-size: var(--jm-text-xs); color: var(--jm-colour-text-soft); }