/**
 * Cuivro Outils Musicaux - Styles propres au widget "Cuivro Métronome".
 *
 * L'habillage général (carte, bandeau, boutons, champs, curseurs, thèmes,
 * couleurs, mise en page téléphone / tablette et panneau « Réglages ») est défini
 * dans cuivro-common.css et partagé avec l'accordeur : ne restent ici que
 * l'afficheur du tempo, les points de la mesure, le pendule et le flash du mode
 * visuel, et les groupes d'options avancées.
 */

.advanced-metronome .cu-card {
	/* Le flash du mode visuel se place derrière le contenu, au-dessus du fond de la carte. */
	isolation: isolate;
}

/* Flash du mode visuel (animé en JavaScript, à chaque temps). */
.am-flash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cu-accent);
	opacity: 0;
	pointer-events: none;
}

/* Zone d'affichage : absorbe la hauteur disponible, les commandes restent collées en bas. */
.am-stage {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

/* Afficheur du tempo. */
.am-display {
	margin: 0;
	text-align: center;
}

.am-bpm-value {
	font-size: 84px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cu-text);
	transition: transform 0.08s ease-out, color 0.08s ease-out;
}

.am-bpm-value.am-pulse {
	transform: scale(1.06);
	color: var(--cu-accent);
}

.am-bpm-label {
	margin-top: 2px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cu-text-muted);
}

.am-tempo-name {
	min-height: 1.3em;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cu-accent-text);
}

/* Ligne de séance : temps écoulé ou restant, numéro de mesure. */
.am-session {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cu-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Pendule du mode visuel : l'angle est piloté par l'horloge audio. */
.am-pendulum {
	position: relative;
	width: 140px;
	height: 92px;
	margin: 8px 0 0;
}

.am-pendulum[hidden] {
	display: none;
}

.am-pendulum-pivot {
	position: absolute;
	left: 50%;
	top: 2px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--cu-text-muted);
}

.am-pendulum-rod {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 2px;
	height: 80px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--cu-text-muted);
	transform-origin: 50% 0;
	transform: rotate(var(--am-angle, 0deg));
}

.am-pendulum-weight {
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: var(--cu-accent);
	box-shadow: 0 2px 8px rgba(var(--cu-accent-rgb), 0.5);
}

/* Points de la mesure : un point par temps ; sa taille et son remplissage indiquent l'accent. */
.am-beats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 24px;
	margin: 16px 0 0;
}

.am-beat-dot {
	appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: var(--am-dot, 15px);
	height: var(--am-dot, 15px);
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--cu-control-border);
	border-radius: 50%;
	background: var(--cu-control-bg);
	transition: background var(--cu-transition), border-color var(--cu-transition), box-shadow 0.12s ease, transform 0.12s ease, width 0.15s ease, height 0.15s ease;
}

/* Zone de toucher agrandie (les points sont petits). */
button.am-beat-dot {
	cursor: pointer;
}

button.am-beat-dot::after {
	content: '';
	position: absolute;
	inset: -9px;
}

button.am-beat-dot:hover {
	border-color: var(--cu-accent);
}

button.am-beat-dot:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--cu-accent-rgb), 0.4);
}

.am-beat-dot[data-level='3'] {
	--am-dot: 20px;
	border-color: var(--cu-accent);
	background: var(--cu-accent-soft);
}

.am-beat-dot[data-level='2'] {
	--am-dot: 15px;
}

.am-beat-dot[data-level='1'] {
	--am-dot: 10px;
}

.am-beat-dot[data-level='0'] {
	--am-dot: 15px;
	border-style: dashed;
	background: transparent;
	opacity: 0.55;
}

.am-beat-dot.is-active {
	background: var(--cu-accent);
	border-color: var(--cu-accent);
	box-shadow: 0 0 12px 3px var(--cu-accent-glow);
	transform: scale(1.2);
}

.am-beat-dot[data-level='3'].is-active {
	background: var(--cu-accent-dark);
	border-color: var(--cu-accent-dark);
	box-shadow: 0 0 16px 5px rgba(var(--cu-accent-rgb), 0.65);
}

.am-beat-dot[data-level='0'].is-active {
	background: transparent;
	box-shadow: 0 0 0 2px var(--cu-accent);
}

/* Message d'état (séance terminée, etc.) : la zone n'occupe aucune place tant qu'il est vide. */
.am-status {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--cu-accent-text);
}

.am-status:empty {
	display: none;
}

/* Réglage du tempo : − / curseur / +. */
.am-tempo-controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.am-tempo-controls .am-tempo-slider {
	flex: 1;
	width: auto;
	min-width: 0;
}

.am-volume-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.am-volume-row .am-volume-slider {
	flex: 1;
	width: auto;
	min-width: 0;
}

.am-volume-value {
	min-width: 2.5em;
	font-size: 0.8rem;
	color: var(--cu-text-muted);
	text-align: right;
}

.am-transport {
	display: flex;
	flex: 0 0 auto;
	gap: 0.6rem;
}

.am-transport .cu-btn {
	flex: 1;
	min-height: 60px;
	border-radius: 12px;
	font-size: 17px;
}

/* Rangée « Tap Tempo » + « Réglages » : uniquement sur téléphone (voir plus bas). */
.am-phone-row {
	display: none;
}

.am-tap-field {
	justify-content: flex-end;
}

.am-tap-field .cu-btn {
	min-height: 44px;
}

/* Bouton « Réglages » : le libellé sur une ligne, un résumé des réglages en dessous. */
.am-settings-open {
	flex: 1.5;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding: 4px 10px;
	line-height: 1.2;
}

.cu-settings-label {
	font-size: 14px;
	font-weight: 700;
}

.cu-settings-summary {
	max-width: 100%;
	overflow: hidden;
	font-size: 11px;
	font-weight: 400;
	color: var(--cu-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Options avancées. */
.am-group {
	padding-top: 12px;
	border-top: 1px solid var(--cu-control-border);
}

.am-group-title {
	margin-bottom: 0.5rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cu-text-muted);
}

.am-group .cu-controls {
	margin: 0.5rem 0 0;
}

.am-silent-field {
	justify-content: flex-end;
}

.am-hint {
	min-height: 1.2em;
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--cu-text-muted);
}

.am-hint.is-warning {
	color: var(--cu-accent-text);
	font-weight: 600;
}

.am-pitch-value {
	font-weight: 700;
	color: var(--cu-accent-text);
}

.cu-details-body .am-reset {
	align-self: start;
	justify-self: start;
}

/* Le mode visuel désactivé grise ses réglages. */
.advanced-metronome:not(.is-visual) .am-visual-fields,
.advanced-metronome:not(.is-trainer) .am-trainer-fields {
	opacity: 0.5;
}

.am-shortcuts {
	margin-top: 0.35rem;
}

/* Sans clavier physique (écran tactile), l'aide sur les raccourcis n'a pas d'objet. */
@media (hover: none) and (pointer: coarse) {
	.am-shortcuts {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Téléphone (outil de moins de 640 px)
 * ------------------------------------------------------------------------- */
@container cuivro (max-width: 639.98px) {
	.am-phone-row {
		display: flex;
		flex: 0 0 auto;
		gap: 10px;
	}

	.am-phone-row .am-tap-phone {
		flex: 1;
	}

	/* Les réglages de base sont dans le panneau : le Tap Tempo de la rangée du bas suffit. */
	.am-tap-wide {
		display: none;
	}

	.am-sound-field {
		grid-column: 1 / -1;
	}

	.am-pendulum {
		height: 78px;
	}

	.am-pendulum-rod {
		height: 66px;
	}

	.am-transport .cu-btn {
		min-height: 60px;
	}

	/* Écran peu haut (petit téléphone, paysage) : chiffres réduits, pendule masqué. */
	@media (max-height: 640px) {
		.am-bpm-value {
			font-size: clamp(3.5rem, 11svh, 5.25rem);
		}
	}

	@media (max-height: 600px) {
		.am-pendulum {
			display: none;
		}
	}
}

/* Colonne de réglages étroite (outil de 640 à 760 px) : signature et son occupent chacun toute la largeur. */
@container cuivro (min-width: 640px) and (max-width: 759.98px) {
	.am-signature-field,
	.am-sound-field {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Tablette et ordinateur (outil de 640 px ou plus)
 * ------------------------------------------------------------------------- */
@container cuivro (min-width: 640px) {
	.am-bpm-value {
		font-size: 96px;
	}

	.am-tempo-name {
		margin-top: 6px;
		font-size: 18px;
	}

	.am-stage {
		flex: 0 0 auto;
		padding: 8px 0;
	}

	.am-beats {
		margin-top: 18px;
	}

	.cu-settings > .cu-controls {
		align-items: end;
	}

	/* Trainer : Ajouter, Toutes les et Tempo cible sur trois colonnes. */
	.am-trainer-fields {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.am-trainer-fields .cu-field-wide {
		grid-column: auto;
	}
}

/* Couleurs de bordure réaffirmées face aux thèmes qui les imposent à toutes les balises (voir cuivro-common.css) :
   les points non modifiables sont des <span>, les groupes des <div>. */
.advanced-metronome .am-beat-dot {
	border-color: var(--cu-control-border);
}

.advanced-metronome .am-beat-dot[data-level='3'],
.advanced-metronome .am-beat-dot.is-active,
.advanced-metronome button.am-beat-dot:hover {
	border-color: var(--cu-accent);
}

.advanced-metronome .am-beat-dot[data-level='3'].is-active {
	border-color: var(--cu-accent-dark);
}

.advanced-metronome .am-group {
	border-color: var(--cu-control-border);
}

@media (prefers-reduced-motion: reduce) {
	.am-bpm-value,
	.am-beat-dot {
		transition: none;
	}

	.am-bpm-value.am-pulse {
		transform: none;
	}
}