/***********************************************************************
 *          c_yui_node.css
 *
 *      Layout of C_YUI_NODE — deliberately thin: the projections are
 *      C_YUI_NAV renders and bring their own styling (cards, tabs,
 *      backbar…), so all this file owns is the vertical stack
 *      chrome / body and the nesting that lets a deep branch scroll.
 *
 *      No colours beyond Bulma variables, and no transitions (house
 *      rule): a level change appears instantly.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

.NODE_VIEW {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
}

/*--- chrome: the parent's projection while a child is showing ---*/
.NODE_CHROME {
    flex: 0 0 auto;
}
.NODE_CHROME:empty {
    display: none;
}

/*--- body: content, index projection, or the active child ---*/
.NODE_BODY {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.NODE_CONTENT {
    flex: 0 0 auto;
}

/*  A LINK node is the other case: its viewer IS the page, so it takes
 *  the remaining height and is BOUNDED by it — the box the stage gives
 *  a view the shell mounts, which is the whole promise of a link ("a
 *  viewer cannot tell whether the shell mounted it or a node did").
 *
 *  Sized by content, as above, it overflows its host instead of
 *  shrinking, and a viewer that MEASURES its own box to size a canvas
 *  (C_G6_NODES_TREE and its ResizeObserver) then grows the box it just
 *  measured: observe → setSize → bigger box → observe. That gclass
 *  documents "setSize does not change the observed box, so there is no
 *  feedback loop", and it is right — as long as somebody bounds the
 *  height. Under a link, that somebody is this rule. */
.NODE_CONTENT_LINK {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/*  The index projection (a card grid, a list…) is the page when this
 *  node is the tip: it takes the remaining height and scrolls. */
.NODE_INDEX {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/*  A node whose index projection targets a ZONE (the root, painting
 *  the rail) leaves this empty — an empty flex child would still eat
 *  the body's height. */
.NODE_INDEX:empty {
    display: none;
}

/*  A node with BOTH content and children: the content keeps its
 *  natural height and the projection sits under it. */
.NODE_CONTENT + .NODE_INDEX {
    border-top: 1px solid var(--bulma-border-weak, #dbdbdb);
}

/*  The active child's own NODE_VIEW nests here — min-height:0 all the
 *  way down or an inner overflow-y never gets a bounded height. */
.NODE_CHILD {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.NODE_EMPTY {
    padding: 1rem;
    color: var(--bulma-text-weak, #7a7a7a);
}