/* Rage Board — matches CLE: Rage on the Lake (Anton + VT323, hot pink on night blue), with roomier spacing. */
.rotl-poll, .rotl-board, .rotl-submit {
	--rotl-pink: #ff2277;
	--rotl-purple: #7b3cff;
	--rotl-ink: #e8e8ff;
	--rotl-dim: #a9a9cc;
	--rotl-bg: #050510;
	--rotl-panel: #0f0f26;
	--rotl-line: rgba(232, 232, 255, 0.14);
	--rotl-head: Anton, "Bebas Neue", Impact, sans-serif;
	--rotl-body: VT323, ui-monospace, monospace;
	color: var(--rotl-ink);
	font-family: var(--rotl-body);
	font-size: 20px;
	line-height: 1.4;
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}
.rotl-poll *, .rotl-board *, .rotl-submit * { box-sizing: border-box; }
/* Beat the block theme's constrained-layout width/margins. */
.is-layout-constrained > .rotl-poll, .is-layout-constrained > .rotl-submit { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
.is-layout-constrained > .rotl-board { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; }
.rotl-board h3, .rotl-board h4, .rotl-poll h3, .rotl-poll h4 { text-align: left; }
.rotl-card__title { color: var(--rotl-ink) !important; }

/* ---------- shared ---------- */
.rotl-btn {
	appearance: none;
	font-family: var(--rotl-head);
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rotl-bg);
	background: var(--rotl-pink);
	border: 2px solid var(--rotl-bg);
	box-shadow: 5px 5px 0 var(--rotl-purple);
	padding: 12px 34px;
	cursor: pointer;
	margin-top: 8px;
	transition: transform .08s, box-shadow .08s;
}
.rotl-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--rotl-purple); }
.rotl-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--rotl-purple); }
.rotl-btn:focus-visible { outline: 3px solid var(--rotl-ink); outline-offset: 3px; }
.rotl-btn[disabled] { opacity: .6; cursor: wait; }

.rotl-field { display: block; margin: 0 0 20px; }
.rotl-field__label { display: block; margin-bottom: 6px; color: var(--rotl-ink); }
.rotl-field__label em { font-style: normal; color: var(--rotl-dim); }
.rotl-field input, .rotl-field select, .rotl-field textarea {
	width: 100%;
	font: inherit;
	font-size: 20px;
	color: var(--rotl-ink);
	background: var(--rotl-bg);
	border: 2px solid var(--rotl-line);
	border-radius: 0;
	padding: 10px 12px;
}
.rotl-field input:focus, .rotl-field select:focus, .rotl-field textarea:focus { outline: none; border-color: var(--rotl-pink); }
.rotl-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; cursor: pointer; }
.rotl-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--rotl-pink); flex: none; }
.rotl-fine { color: var(--rotl-dim); font-size: 17px; margin: 16px 0 0; }
.rotl-note { color: var(--rotl-dim); margin: 0; }
.rotl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rotl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.rotl-banner {
	border-left: 4px solid var(--rotl-pink);
	background: rgba(255, 34, 119, .1);
	padding: 14px 16px;
	margin: 0 0 24px;
}
.rotl-banner.is-ok { border-color: #31e981; background: rgba(49, 233, 129, .09); }

/* ---------- poll ---------- */
.rotl-poll {
	background: var(--rotl-panel);
	border: 1px solid var(--rotl-line);
	padding: 40px 44px;
	margin-top: 32px;
	margin-bottom: 32px;
	scroll-margin-top: 100px;
}
.rotl-poll__q {
	font-family: var(--rotl-head);
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--rotl-ink);
	margin: 0 0 28px;
}
.rotl-poll__choices { border: 0; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.rotl-choice {
	display: flex; gap: 12px; align-items: center;
	padding: 12px 16px;
	border: 2px solid var(--rotl-line);
	cursor: pointer;
	transition: border-color .12s, background .12s;
}
.rotl-choice:hover { border-color: rgba(255, 34, 119, .6); }
.rotl-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--rotl-pink); flex: none; }
.rotl-choice:has(input:checked) { border-color: var(--rotl-pink); background: rgba(255, 34, 119, .08); }

.rotl-results { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rotl-line); }
.rotl-results__title {
	font-family: var(--rotl-head); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--rotl-dim); margin: 0 0 18px;
}
.rotl-results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rotl-bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "track track"; gap: 4px 12px; }
.rotl-bar__label { grid-area: label; }
.rotl-bar__val { grid-area: val; color: var(--rotl-dim); }
.rotl-bar__track { grid-area: track; height: 10px; background: rgba(232, 232, 255, .08); overflow: hidden; }
.rotl-bar__fill { display: block; height: 100%; background: var(--rotl-pink); transition: width .6s ease; }
.rotl-bar.is-lead .rotl-bar__label { color: var(--rotl-pink); }
.rotl-results__total { color: var(--rotl-dim); font-size: 17px; margin: 16px 0 0; }

/* ---------- board ---------- */
.rotl-board { max-width: 960px; }
.rotl-board__updated {
	display: inline-block; color: var(--rotl-dim); font-size: 18px;
	border: 1px solid var(--rotl-line); padding: 4px 12px; margin: 0 0 48px;
}
.rotl-board__section { margin: 0 0 72px; }
.rotl-board__section:last-child { margin-bottom: 0; }
.rotl-board__heading {
	font-family: var(--rotl-head);
	font-size: 30px; letter-spacing: .03em; text-transform: uppercase;
	color: var(--rotl-ink);
	margin: 0 0 24px;
	display: flex; align-items: center; gap: 14px;
}
.rotl-board__heading::before { content: ""; width: 12px; height: 12px; background: var(--rotl-pink); flex: none; }
.rotl-board__section--shipped .rotl-board__heading::before { background: #31e981; }
.rotl-board__section--planned .rotl-board__heading::before { background: var(--rotl-purple); }
.rotl-board__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.rotl-card { background: var(--rotl-panel); border: 1px solid var(--rotl-line); padding: 24px 24px 26px; }
.rotl-card__top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rotl-card__title {
	font-family: var(--rotl-head); font-size: 22px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase;
	color: var(--rotl-ink); margin: 0;
}
.rotl-card__desc { margin: 10px 0 0; color: var(--rotl-dim); font-size: 19px; }
.rotl-card__date { margin: 14px 0 0; color: var(--rotl-dim); font-size: 16px; }
.rotl-tag { color: var(--rotl-dim); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.rotl-pill {
	font-family: var(--rotl-head); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 10px; border: 1px solid currentColor; color: var(--rotl-pink);
}
.rotl-pill--testing { color: #ffd23f; }
.rotl-pill--shipped { color: #31e981; }
.rotl-pill--planned { color: #b593ff; }
.rotl-pill--considering { color: var(--rotl-dim); }

/* ---------- submit ---------- */
.rotl-submit { background: var(--rotl-panel); border: 1px solid var(--rotl-line); padding: 40px 44px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
	.rotl-poll, .rotl-board, .rotl-submit { font-size: 18px; }
	.rotl-poll, .rotl-submit { padding: 28px 20px; }
	.rotl-poll__q { font-size: 24px; margin-bottom: 22px; }
	.rotl-board__section { margin-bottom: 56px; }
	.rotl-board__heading { font-size: 26px; }
	.rotl-board__list { grid-template-columns: 1fr; gap: 14px; }
	.rotl-row { grid-template-columns: 1fr; }
	.rotl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.rotl-bar__fill, .rotl-btn, .rotl-choice { transition: none; }
}