/* Variantes de bouton propres à System — les commandes du schéma et des sections : parcours, principe,
   nœud, poignée ; styles exploration, nœud, poignée. Un bloc par axe (edition-css.md, § Écriture d'une
   feuille) ; une variante monte au modèle canonique le jour où une deuxième app l'emploie. */

@layer components {
    .button--structure-route,
    .button--structure-principle {
        width: 100%;
        display: flex;
    }
    .button--structure-route {
        justify-content: flex-start;
        gap: 16px;
        padding: 22px 0;
    }
    .button--structure-principle {
        align-items: stretch;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
    }
    .button--structure-node {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 16px 34px 16px 18px;
    }
    .button--structure-handle {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        padding: 0;
    }
    .button--structure-handle span {
        width: 12px;
        height: 18px;
    }
    @media (max-width: 600px) {
        .button--structure-handle {
            width: 44px;
            height: 44px;
        }
    }

    .button--structure-route,
    .button--structure-principle,
    .button--structure-node,
    .button--structure-handle {
        -webkit-tap-highlight-color: transparent;
    }
    .button--structure-node {
        border-radius: 8px;
    }
    .button--structure-handle {
        border-radius: 6px;
    }
    .button--structure-handle span {
        background: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 1.5px) 0 0 / 6px 6px;
    }

    .button--structure-route,
    .button--structure-principle,
    .button--structure-node {
        text-align: left;
    }

    .button--structure-route,
    .button--structure-principle,
    .button--structure-node,
    .button--structure-handle {
        cursor: pointer;
    }
    .button--structure-handle {
        touch-action: none;
        cursor: grab;
    }
}

@layer components {
    .button--style-explore {
        border: 0;
        background: transparent;
    }
    .button--style-node {
        border: 1px solid var(--immersion-node-line);
        background: linear-gradient(125deg, var(--immersion-node-tint), var(--immersion-canvas) 80%);
    }
    .button--style-handle {
        background: transparent;
        border: 0;
    }
    .button--style-node:hover,
    .button--style-node[aria-pressed="true"] {
        border-color: var(--node-color);
        box-shadow: 0 0 24px color-mix(in srgb, var(--node-color) 16%, transparent), inset 0 0 18px color-mix(in srgb, var(--node-color) 5%, transparent);
    }
    .button--style-handle:hover,
    .button--style-handle:focus-visible {
        background: var(--immersion-glass-tint);
    }
    .button--style-explore:disabled,
    .button--style-node:disabled {
        opacity: 1;
    }

    .button--style-explore,
    .button--style-node {
        color: var(--immersion-ink);
    }
    .button--style-handle {
        color: var(--immersion-muted);
    }
    .button--style-explore:hover,
    .button--style-explore[aria-pressed="true"] {
        color: var(--immersion-action);
    }
    .button--style-handle:hover,
    .button--style-handle:focus-visible {
        color: var(--immersion-ink);
    }

    .button--style-node {
        transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .button--style-explore:disabled,
    .button--style-node:disabled {
        cursor: default;
    }
    @media (prefers-reduced-motion: reduce) {
        .button--style-node {
            transition: none;
        }
    }
}