/*
 * Pult-Woche auf der Wochenplan-Seite (Schritt 6, Thema 7): Tages-Tasten Mo–So als Pult-Tasten (gewählt = blau) über
 * einem Pult je Tag. Kanalzüge und Details kommen aus studio-pult.css. Markup: inc/week.php.
 */

.studio-week {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	max-width: 1200px;
	margin-block: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--60, 2.5rem);
}

/* Ohne JS stehen alle Tage untereinander */
.studio-week:not(:has([data-week="tabs"]:not([hidden]))) .studio-week__day + .studio-week__day { margin-top: 1.5rem; }
.studio-week [hidden] { display: none !important; }

.studio-week__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
	padding: 5px;
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	background: oklch(13% 0.015 245);
}

.studio-week__key {
	display: grid;
	place-content: center;
	min-height: 52px;
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-s);
	background: linear-gradient(oklch(100% 0 0 / 0.06), transparent 50%), var(--studio-surface-3);
	color: var(--studio-text);
	font: 800 var(--studio-step-0) / 1.15 var(--studio-font-text);
	box-shadow: inset 0 -3px 0 oklch(0% 0 0 / 0.35);
	cursor: pointer;
}

.studio-week__key small { color: var(--studio-text-2); font-size: 0.72rem; font-weight: 600; }
.studio-week__key:hover { border-color: var(--studio-brand); }
.studio-week__key:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }
.studio-week__key:disabled { opacity: 0.4; cursor: default; }

.studio-week__key[aria-selected="true"] {
	border-color: var(--studio-brand);
	background: var(--studio-brand);
	color: var(--studio-on-brand);
	box-shadow: inset 0 2px 4px oklch(0% 0 0 / 0.3);
}

.studio-week__key[aria-selected="true"] small { color: var(--studio-on-brand); }

.studio-week__date { color: var(--studio-text-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Das Pult der Startseite setzt Breite und Rand selbst; in der Woche füllt es die Spalte */
main#main-page .studio-week .studio-pult { width: auto; max-width: none; margin: 0; }

@media (max-width: 640px) {
	.studio-week__key { min-height: 46px; font-size: 0.85rem; }
}