/* Bibliothèque — styles des pages publiques de la bibliothèque, que le serveur rend depuis la base :
   natures de l'accueil, nature et faits d'un objet, parties et nœuds d'un module, items de contenu,
   renvois, listes d'objets, plan et objectifs d'un cours. Le premier bloc porte la base de chaque
   composant, le second l'axe de fonction d'un nœud. Le fil d'Ariane est le composant du canon.
   Décisions : _direction/FD3_applications/kernevia/design/conteneurs-et-donnees.md, navigation.md,
   structures-de-page.md. */

@layer components {
    .drawing {
        --drawing-scale: 1.5;
    }

    .facts {
        margin-top: var(--canon-space-5);
    }
    .part {
        margin-top: var(--canon-space-10);
    }
    .part > * + *,
    .node > .node,
    .plan > li + li,
    .goals-item + .goals-item {
        margin-top: var(--canon-space-5);
    }
    .node > * + *,
    .goals-item > * + * {
        margin-top: var(--canon-space-3);
    }
    .node > .formula {
        margin-top: 0;
    }
    .node-kind {
        margin-right: var(--canon-space-2);
    }
    .formula {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .drawing {
        display: flex;
        justify-content: center;
    }
    .drawing svg {
        width: min(100%, calc(var(--drawing-width) * var(--drawing-scale)));
        height: auto;
    }
    .natures {
        padding-left: 0;
    }
    .natures {
        margin-top: var(--canon-space-10);
    }
    .natures-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--canon-space-3);
    }
    .natures-item + .natures-item {
        margin-top: var(--canon-space-5);
    }
    .plan,
    .goals {
        padding-left: 0;
    }
    .plan .plan {
        margin-top: var(--canon-space-3);
        padding-left: var(--canon-space-5);
    }
    .plan-title + * {
        margin-top: var(--canon-space-2);
    }
    .plan-number {
        margin-right: var(--canon-space-2);
    }
    @media (min-width: 800px) {
    }


    .node-kind,
    .node-note,
    .plan-number,
    .goals-note,
    .natures-count {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-body);
    }
    .node-kind,
    .node-note,
    .goals-note,
    .natures-count {
        color: var(--canon-theme-muted);
    }
    .natures,
    .plan,
    .goals {
        list-style: none;
    }
    .node-kind {
        font-weight: var(--canon-weight-title);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .formula {
        text-align: center;
    }
    .reference {
        text-decoration-style: dotted;
        text-decoration-thickness: 1px;
    }
    .reference:hover {
        text-decoration-style: solid;
    }
    .plan-number {
        color: var(--canon-theme-muted);
        font-variant-numeric: tabular-nums;
    }
}

@layer components {
    .node--statement,
    .node--caution {
        padding-left: var(--canon-space-5);
    }
    .node--illustration > .drawing {
        padding: var(--canon-space-3) 0;
    }

    .node--statement {
        border-left: var(--local-width-accent) solid var(--local-color-identity-accent);
    }
    .node--caution {
        border-left: var(--local-width-accent) solid var(--canon-theme-warning);
    }

    .node--argument .node-kind {
        font-style: italic;
        letter-spacing: 0;
        text-transform: none;
    }
    .node--comment {
        font-size: var(--canon-size-body);
    }
    .node--caution .node-kind {
        color: var(--canon-theme-warning);
    }
    .node--call {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-body);
    }
}