/*
 * 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; }
}