/* ==========================================================================
   /buttons — Kit 01: the cue-light panel
   Stand-by, go, hold: a stage manager's button box. Accent: tungsten gold.
   ========================================================================== */

body.kr-tool--buttons {
	--kr-acc: #e9ad5c;
	--kr-acc-l: #f6c785;
	--kr-k1: "KIT 01 · CUE PANEL";
	--kr-k2: "RACK 02 · BUTTON PRESETS";
}

/* ---------- Hero equipment: cue-light panel ---------- */
.kr-visual--buttons { container-type: inline-size; direction: ltr; }
.kr-visual--buttons .krb-rig { position: absolute; inset: 15cqw 4cqw 17cqw; perspective: 1500px; }
.kr-visual--buttons .krb-panel {
	position: absolute;
	inset: 0;
	padding: 4.4cqw 13cqw 4cqw 5cqw;
	border-radius: 4cqw;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #2c2520 0%, #1c1714 46%, #141110 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 236, 214, .18),
		inset 0 -2px 0 rgba(0, 0, 0, .6),
		inset 0 0 0 1.2cqw #181411,
		inset 0 0 0 1.4cqw rgba(255, 236, 214, .07),
		0 5cqw 9cqw -3cqw rgba(0, 0, 0, .85),
		0 0 0 1px rgba(0, 0, 0, .7);
	transform: rotateX(11deg) rotateY(15deg) rotate(-2.5deg);
	transform-origin: 50% 60%;
}
.kr-visual--buttons .krb-screw { position: absolute; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9b8f84, #3d3530 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .8); }
.kr-visual--buttons .krb-screw::after { content: ""; position: absolute; inset: 45% 15%; background: rgba(0, 0, 0, .55); transform: rotate(35deg); }
.kr-visual--buttons .krb-screw--tl { top: 2.4cqw; left: 2.4cqw; }
.kr-visual--buttons .krb-screw--tr { top: 2.4cqw; right: 2.4cqw; }
.kr-visual--buttons .krb-screw--bl { bottom: 2.4cqw; left: 2.4cqw; }
.kr-visual--buttons .krb-screw--br { bottom: 2.4cqw; right: 2.4cqw; }
.kr-visual--buttons .krb-plate {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 6cqw;
	padding: 0 2.4cqw;
	border-radius: 1cqw;
	background: linear-gradient(180deg, #0f0c0a, #0b0908);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 236, 214, .08);
	color: #b9aa9a;
	font: 700 1.8cqw/1 var(--mono);
	letter-spacing: .22em;
}
.kr-visual--buttons .krb-plate__ch { color: var(--kr-acc); }
.kr-visual--buttons .krb-cues { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4.6cqw; }
.kr-visual--buttons .krb-cue { display: grid; justify-items: center; gap: 2cqw; }
.kr-visual--buttons .krb-cue b { color: #8f8174; font: 700 1.8cqw/1 var(--mono); letter-spacing: .2em; }
.kr-visual--buttons .krb-cap {
	position: relative;
	display: block;
	width: 15cqw;
	height: 15cqw;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, var(--cap-hi), var(--cap) 58%, var(--cap-lo) 100%);
	box-shadow:
		0 0 0 1.3cqw #2b2420,
		0 0 0 1.6cqw rgba(255, 236, 214, .14),
		0 1.6cqw 2cqw -.6cqw rgba(0, 0, 0, .9),
		inset 0 -1cqw 1.6cqw rgba(0, 0, 0, .45);
	filter: brightness(.42) saturate(.6);
	transition: filter .3s;
}
.kr-visual--buttons .krb-cap::after { content: ""; position: absolute; inset: 14% 24% 52%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent); opacity: .6; }
.kr-visual--buttons .krb-cue--stby .krb-cap { --cap-hi: #ffe2a3; --cap: #f0a640; --cap-lo: #8a4f12; --glow: #f0a640; animation: krbStby 7s steps(1) infinite; }
.kr-visual--buttons .krb-cue--go .krb-cap { --cap-hi: #ffd8a8; --cap: #e7774f; --cap-lo: #8d2d1d; --glow: #e7774f; width: 18cqw; height: 18cqw; animation: krbGo 7s var(--ease-out) infinite; }
.kr-visual--buttons .krb-cue--hold .krb-cap { --cap-hi: #c8f1f4; --cap: #5aa7b2; --cap-lo: #1d4b52; --glow: #5aa7b2; animation: krbHold 7s ease-in-out infinite; }
.kr-visual--buttons .krb-cue--go { margin-top: -1.5cqw; }
.kr-visual--buttons .krb-cue--go b { color: var(--kr-acc-l); }
.kr-visual--buttons .krb-ripple { position: absolute; inset: -10%; border-radius: 50%; border: .5cqw solid rgba(255, 196, 140, .75); opacity: 0; animation: krbRipple 7s var(--ease-out) infinite; }
.kr-visual--buttons .krb-leds { display: flex; gap: 2.2cqw; margin: 4.4cqw 0 0 1cqw; }
.kr-visual--buttons .krb-leds i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #3a2a1d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); animation: krbLed 2.4s steps(1) infinite; }
.kr-visual--buttons .krb-leds i:nth-child(2) { animation-delay: .4s; }
.kr-visual--buttons .krb-leds i:nth-child(3) { animation-delay: .8s; }
.kr-visual--buttons .krb-leds i:nth-child(4) { animation-delay: 1.2s; }
.kr-visual--buttons .krb-leds i:nth-child(5) { animation-delay: 1.6s; }
.kr-visual--buttons .krb-leds i:nth-child(6) { animation-delay: 2s; }
.kr-visual--buttons .krb-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; margin-top: 2.2cqw; }
.kr-visual--buttons .krb-key {
	position: relative;
	height: 6.4cqw;
	border-radius: 1.1cqw;
	background: linear-gradient(180deg, #3a322c, #251f1b);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .16), 0 .6cqw 0 #0b0908, 0 1cqw 1.4cqw -.4cqw rgba(0, 0, 0, .9);
	animation: krbKey 6s ease-in-out infinite;
}
.kr-visual--buttons .krb-key::after { content: ""; position: absolute; inset: 34% 34%; border-radius: .4cqw; background: rgba(255, 236, 214, .22); }
.kr-visual--buttons .krb-key--b::after { border-radius: 50%; }
.kr-visual--buttons .krb-key--c::after { inset: 42% 26%; border-radius: 9px; }
.kr-visual--buttons .krb-key--d::after { inset: 30% 38%; background: var(--kr-acc); box-shadow: 0 0 1cqw var(--kr-acc); opacity: .8; }
.kr-visual--buttons .krb-key--e::after { inset: 36% 30%; border-radius: 1cqw; border: .35cqw solid rgba(255, 236, 214, .3); background: none; }
.kr-visual--buttons .krb-key--f::after { inset: 40% 28%; clip-path: polygon(0 50%, 60% 0, 60% 35%, 100% 35%, 100% 65%, 60% 65%, 60% 100%); }
.kr-visual--buttons .krb-key--b { animation-delay: 1s; }
.kr-visual--buttons .krb-key--c { animation-delay: 2s; }
.kr-visual--buttons .krb-key--d { animation-delay: 3s; }
.kr-visual--buttons .krb-key--e { animation-delay: 4s; }
.kr-visual--buttons .krb-key--f { animation-delay: 5s; }
.kr-visual--buttons .krb-fader { position: absolute; top: 13cqw; right: 4.6cqw; bottom: 5cqw; width: 4.4cqw; }
.kr-visual--buttons .krb-fader__track { position: absolute; top: 0; bottom: 0; left: 50%; width: .9cqw; margin-left: -.45cqw; border-radius: 1cqw; background: #070605; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 236, 214, .08); }
.kr-visual--buttons .krb-fader__knob {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
	height: 6cqw;
	border-radius: .8cqw;
	background: linear-gradient(180deg, #5a4f47, #2c2622 48%, #4a413b 52%, #2a2420);
	box-shadow: 0 1cqw 1.4cqw -.4cqw rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 236, 214, .2);
	animation: krbFader 9s ease-in-out infinite;
}
.kr-visual--buttons .krb-fader__knob::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; background: var(--kr-acc); box-shadow: 0 0 6px var(--kr-acc); }
.kr-visual--buttons .krb-cable { position: absolute; left: -3cqw; bottom: -14cqw; width: 34cqw; overflow: visible; }
.kr-visual--buttons .krb-cable path { stroke: #15110f; stroke-width: 3.2; stroke-linecap: round; }
.kr-visual--buttons .krb-cursor {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7cqw;
	height: 7cqw;
	fill: #fffaf3;
	stroke: #1a0d08;
	stroke-width: 1.2;
	filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .7));
	animation: krbCursor 7s var(--ease-out) infinite;
}
.kr-visual--buttons .krb-tape { top: 9cqw; left: 7cqw; font-size: 1.85cqw; transform: rotate(-5deg); }

@keyframes krbStby {
	0%, 6%, 14%, 22%, 30% { filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 2.4cqw var(--glow)); }
	3%, 10%, 18%, 26%, 36%, 100% { filter: brightness(.42) saturate(.6); }
}
@keyframes krbGo {
	0%, 38% { filter: brightness(.42) saturate(.6); transform: none; }
	41% { filter: brightness(1.15) saturate(1.15) drop-shadow(0 0 3.6cqw var(--glow)); transform: scale(.94) translateY(.4cqw); }
	46%, 82% { filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 3cqw var(--glow)); transform: none; }
	92%, 100% { filter: brightness(.42) saturate(.6); transform: none; }
}
@keyframes krbHold {
	0%, 100% { filter: brightness(.5) saturate(.7); }
	50% { filter: brightness(.82) saturate(.9) drop-shadow(0 0 1.6cqw var(--glow)); }
}
@keyframes krbRipple {
	0%, 40% { opacity: 0; transform: scale(.8); }
	42% { opacity: .9; transform: scale(.9); }
	62%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes krbCursor {
	0%, 12% { transform: translate(20cqw, 17cqw); opacity: 0; }
	20% { opacity: 1; }
	38% { transform: translate(-1.6cqw, -4.2cqw); }
	41% { transform: translate(-1.6cqw, -4.2cqw) scale(.86); }
	44%, 56% { transform: translate(-1.6cqw, -4.2cqw); opacity: 1; }
	74%, 100% { transform: translate(16cqw, 20cqw); opacity: 0; }
}
@keyframes krbLed { 0%, 16% { background: var(--kr-acc); box-shadow: 0 0 1.2cqw var(--kr-acc); } 17%, 100% { background: #3a2a1d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); } }
@keyframes krbKey { 0%, 10%, 100% { transform: none; } 4% { transform: translateY(.5cqw); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .1), 0 .1cqw 0 #0b0908; } }
@keyframes krbFader { 0%, 100% { top: 46%; } 35% { top: 12%; } 70% { top: 70%; } }

/* ---------- Tool: live preview = light table on a monitor ---------- */
body.kr-tool #site-top main.kr-page [data-button-preview] > p:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--text);
	font-size: 13px;
	font-weight: 800;
}
body.kr-tool #site-top main.kr-page [data-button-preview] > p:first-child::after {
	content: "LIVE";
	content: "LIVE" / "";
	margin-inline-start: auto;
	padding: 3px 7px 3px 18px;
	border: 1px solid rgba(255, 77, 79, .45);
	border-radius: 4px;
	background: radial-gradient(circle at 8px 50%, var(--rec) 0 3px, transparent 3.5px), rgba(255, 77, 79, .08);
	color: #ff8a8b;
	font: 700 9.5px/1 var(--mono);
	letter-spacing: .18em;
	direction: ltr;
}
body.kr-tool #site-top main.kr-page [data-button-preview] > div {
	min-height: 15rem;
	border: 0;
	border-radius: 14px;
	background:
		linear-gradient(rgba(42, 33, 27, .07) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(42, 33, 27, .07) 1px, transparent 1px) 0 0 / 24px 24px,
		radial-gradient(70% 90% at 50% 40%, #fbf9f5, #e9e4dc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 6px 18px rgba(0, 0, 0, .14), 0 0 0 6px #0b0908, 0 0 0 7px rgba(255, 236, 214, .08);
}

/* ---------- Presets: rental tags with a light-table window ---------- */
body.kr-tool #site-top main.kr-page button[data-button-preset] { gap: 14px; padding: 12px 12px 16px; text-align: start; }
body.kr-tool #site-top main.kr-page button[data-button-preset] > span:first-child {
	min-height: 5.4rem;
	border: 0;
	border-radius: 12px;
	background:
		linear-gradient(rgba(42, 33, 27, .06) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(42, 33, 27, .06) 1px, transparent 1px) 0 0 / 16px 16px,
		#ece7df;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 4px 10px rgba(0, 0, 0, .12);
}
body.kr-tool #site-top main.kr-page button[data-button-preset] > span:last-child { padding-inline: 4px; }
body.kr-tool #site-top main.kr-page button[data-button-preset] > span:last-child > span:first-child { color: var(--text); font-size: 14px; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
	.kr-visual--buttons .krb-cue--go .krb-cap { filter: brightness(1.05) drop-shadow(0 0 2cqw var(--glow)); }
	.kr-visual--buttons .krb-cursor { opacity: 0; }
}