/*
 * c-panel — lo mínimo para los tres modos (js/c-panel.js). El modo lo elige
 * el theme con --mode en el panel; lo visual lo pone cada theme.
 *
 *   .c-panel { --mode: inline; }                               por defecto
 *   @media (width < 48rem) { .c-panel { --mode: drawer; } }    ejemplo
 *
 * Lado del cajón: data-side="start" en el panel (por defecto, a la derecha).
 */
@layer components {
	.c-panel { --mode: inline; padding: 0; border: 0; }

	/* inline: sin caja propia; sus hijos se ubican como si el <dialog> no estuviera */
	.c-panel[data-mode="inline"][open] { display: contents; }
	[data-js="panel"][data-mode="inline"],
	.c-panel[data-mode="inline"] [data-js="panel-close"],
	.c-panel[data-mode="inline"] .c-panel__header--controls { display: none; }

	/* Modos por defecto de los paneles de la base; un theme los cambia en su CSS.
	   Buscador del header: modal. Menú principal: en su lugar, y cajón en
	   pantallas angostas. */
	.c-panel--search { --mode: modal; }
	@media (width < 48rem) { .c-topmenu__panel { --mode: drawer; } }

	/* drawer y modal */
	.c-panel:modal {
		overflow: auto;
		padding: var(--space-m, 1.5rem);
		background: var(--color-surface, Canvas);
		color: var(--color-fg, CanvasText);
	}
	.c-panel::backdrop { background: var(--color-backdrop, rgb(0 0 0 / 0.5)); }
	html:has(.c-panel:modal) { overflow: hidden; }

	.c-panel[data-mode="modal"]:modal {
		margin: auto;
		max-inline-size: min(40rem, 100vw - 2rem);
		max-block-size: calc(100dvh - 2rem);
	}
	.c-panel[data-mode="drawer"]:modal {
		margin: 0;
		inset-block: 0;
		inset-inline: auto 0;
		inline-size: min(24rem, 100vw - 3rem);
		block-size: 100dvh;
		max-block-size: none;
	}
	.c-panel[data-mode="drawer"][data-side="start"]:modal { inset-inline: 0 auto; }

	.c-panel__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-s, 1rem);
	}

	@media (prefers-reduced-motion: no-preference) {
		.c-panel[data-mode="drawer"]:modal { transition: translate var(--duration, 0.25s) var(--easing, ease); }
		@starting-style { .c-panel[data-mode="drawer"]:modal { translate: 100% 0; } }
		@starting-style { .c-panel[data-mode="drawer"][data-side="start"]:modal { translate: -100% 0; } }
	}
}

/* castillo: el buscador del header es un modal ancho, con el campo grande */
@layer components {
	.c-panel--search[data-mode="modal"]:modal { overflow: visible; inline-size: min(46rem, 100vw - 2rem); max-inline-size: none; padding: var(--space-l) var(--space-xl) var(--space-xl); margin-block-start: 12vh; }
	.c-panel--search .c-panel__header { justify-content: flex-end; margin-block-end: var(--space-s); }
	.c-panel--search .c-form__input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.c-panel--search .c-form__control { inline-size: 100%; min-block-size: 3.5rem; border: 0; border-block-end: 1px solid var(--color-strong); font-family: var(--font-heading); font-size: var(--step-3); padding-inline: 0; }
	.c-panel--search .c-form__control:focus-visible { outline: none; border-block-end-color: var(--color-accent); }
	.c-panel--search button[type="submit"] { border: 0; border-block-end: 1px solid var(--color-strong); border-radius: 0; background: none; font-size: var(--step-2); padding-inline: var(--space-s); cursor: pointer; }
}