/*
 * c-tree — árbol de una jerarquía (archivo › fondos › secciones › series) en un panel.
 *
 *   <nav class="c-tree" id="collection-tree" data-state="open">   (lo abre y cierra un c-collapse)
 *     <button class="c-tree__close" data-js="collapse" aria-controls="collection-tree">…</button>
 *     <ul class="c-tree__list c-tree__list--root">
 *       <li class="c-tree__item c-tree__item--branch">
 *         <button class="c-tree__toggle" data-js="collapse" aria-expanded="true" aria-controls="ctree-ID">
 *           <span class="u-if-closed">expand</span><span class="u-if-open">collapse</span></button>
 *         <span class="c-tree__label"><a class="c-tree__link">…</a> <span class="c-tree__count">(n)</span></span>
 *         <ul class="c-tree__list" id="ctree-ID" data-state="open">…</ul>
 *       </li>
 *       <li class="c-tree__item"><span class="c-tree__label">…</span></li>     (hoja)
 *   (en PHP: theme_collection_tree(), ver helper_functions/collection_tree.php)
 *
 * La base es una lista anidada común y el botón de cada rama es un <button>
 * nativo: expand / collapse. Un theme lo convierte en lo que quiera desde CSS
 * (ver css/recipes/tree-guides.css: recuadro, líneas guía y +/−).
 *
 * El panel y todas las ramas salen abiertos del servidor: sin JS se ve el árbol
 * entero. El panel (.c-tree) y las ramas fuera del camino actual
 * (c-tree__list--rest) declaran --initial-state: closed, y c-collapse los cierra
 * al cargar. Un theme que quiera las ramas abiertas pone --initial-state: open.
 * Las ramas diferidas (data-tree-url) salen cerradas y las carga js/c-tree.js.
 */
@layer components {
	/* el panel y las ramas fuera del camino salen abiertos del servidor; c-collapse los cierra al cargar */
	.c-tree { --initial-state: closed; }
	/* las custom properties se heredan: sin este corte, el closed del panel cerraría también el camino */
	.c-tree__list { --initial-state: none; }
	.c-tree__list--rest { --initial-state: closed; }
	/* el botón de cada rama queda nativo (se ve como botón); el theme lo restyla */
	.c-tree__close, .c-breadcrumb__tree {
		padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
	}
	.c-tree__current { font-weight: bold; }
	.c-tree__list[aria-busy="true"] { cursor: progress; }
}

/* castillo: lista con filetes finos; ramas con un chevrón dorado como botón,
   la unidad actual marcada con el punto dorado; cantidades chicas. */
@layer components {
	.c-tree { font-size: var(--step--1); }
	.c-tree__list { margin: 0; padding: 0; list-style: none; }
	.c-tree__list .c-tree__list { margin-inline-start: 0.65rem; padding-inline-start: 0.85rem; border-inline-start: 1px solid var(--color-rule); }
	.c-tree__item { position: relative; padding-block: 0.2rem; }
	.c-tree__item:not(.c-tree__item--branch) > .c-tree__label { padding-inline-start: 1.6rem; display: inline-block; }
	.c-tree__toggle {
		display: inline-grid;
		place-items: center;
		inline-size: 1.4rem;
		block-size: 1.4rem;
		margin-inline-end: 0.2rem;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		vertical-align: -0.3rem;
	}
	.c-tree__toggle > span:not(.u-visually-hidden) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
	.c-tree__toggle::before {
		content: "";
		inline-size: 0.45rem;
		aspect-ratio: 1;
		border-inline-end: 1.5px solid var(--color-accent);
		border-block-end: 1.5px solid var(--color-accent);
		rotate: -45deg;
		transition: rotate var(--duration) var(--easing);
	}
	.c-tree__toggle[aria-expanded="true"]::before { rotate: 45deg; }
	.c-tree__link { color: var(--color-fg); text-decoration: none; }
	.c-tree__link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
	.c-tree__current, [aria-current="page"].c-tree__link { font-weight: 600; color: var(--color-strong); }
	.c-tree__current::after, [aria-current="page"].c-tree__link::after {
		content: "";
		display: inline-block;
		inline-size: 0.35em;
		aspect-ratio: 1;
		margin-inline-start: 0.4em;
		border-radius: 50%;
		background: var(--color-accent);
		vertical-align: 0.15em;
	}
	.c-tree__count { color: var(--color-muted); font-size: var(--step--2); }
	.c-tree__close { display: inline-flex; align-items: center; gap: 0.3em; margin-block-end: var(--space-xs); color: var(--color-muted); font-size: var(--step--2); }

	/* ruta */
	.c-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.5em; font-size: var(--step--1); color: var(--color-muted); }
	.c-breadcrumb a { color: inherit; text-decoration: none; }
	.c-breadcrumb a:hover { color: var(--color-strong); text-decoration: underline; }
	.c-breadcrumb a:last-of-type { color: var(--color-strong); }
	.c-breadcrumb__sep { color: var(--color-rule); }
	.c-breadcrumb__tree {
		display: inline-grid;
		place-items: center;
		inline-size: 2.25rem;
		aspect-ratio: 1;
		margin-inline-end: 0.3em;
		border: 1px solid var(--color-rule) !important;
		border-radius: 50%;
		color: var(--color-strong);
	}
}