/***********************************************************************
 *          c_yui_json.css
 *
 *      Styling for C_YUI_JSON (lazy tree + raw text + hosted graph).
 *      Monospace tree, type-coloured leaves, dark-aware.
 *      No transitions/animations by design (lib-yui convention).
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

/*
 *  Light values are darker than a naive orange/blue because they have to
 *  be READ, on the card and on the graph view's match chip alike.  The
 *  ceiling is a fact of the colour, not of the surface: `#FF8C00`, which
 *  these came from, is mid-luminance and reaches at most 2.33:1 against
 *  ANY background that exists.  The graph view carries the same two
 *  palettes (`c_yui_json_graph.js`), so one document says green with the
 *  same green in all three views.
 */
.C_YUI_JSON {
    --json-string: #006000;
    --json-number: #b5330b;
    --json-boolean: #8C4D00;
    --json-null: #4359C6;
    --json-key: var(--bulma-text-strong, #1a1a1a);
    --json-row-hover: rgba(0, 0, 0, 0.05);
    --json-guide: #b5b5b5;
}

:root[data-theme="dark"] .C_YUI_JSON,
.C_YUI_JSON[data-theme="dark"] {
    --json-string: #7ec87e;
    --json-number: #ff8a65;
    --json-boolean: #ffb74d;
    --json-null: #90a4f4;
    --json-key: var(--bulma-text-strong, #e6e6e6);
    --json-row-hover: rgba(255, 255, 255, 0.06);
    --json-guide: #5a5a5a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .C_YUI_JSON {
        --json-string: #7ec87e;
        --json-number: #ff8a65;
        --json-boolean: #ffb74d;
        --json-null: #90a4f4;
        --json-key: var(--bulma-text-strong, #e6e6e6);
        --json-row-hover: rgba(255, 255, 255, 0.06);
        --json-guide: #5a5a5a;
    }
}

.C_YUI_JSON .JSON_TOOLBAR {
    border-bottom: 1px solid var(--bulma-border-weak, #e0e0e0);
}

/*
 *  Who YIELDS when the toolbar runs out of room — and how far.
 *
 *  The search box yields, and the buttons keep their size: a button
 *  pushed past the edge is harder to reach than a narrower input.  But
 *  it yields down to a FLOOR, not to nothing.  Letting it shrink freely
 *  did make everything fit on a phone, and the result was worse than
 *  the overflow it cured: the box collapsed to 58px — the magnifier and
 *  no room to read what you typed — and, because nothing overflowed any
 *  more, `yui_toolbar` stopped offering its scroll arrows, so the row
 *  had no way to show you anything else either.
 *
 *  With the floor the toolbar overflows again on a narrow screen, which
 *  is the state yui_toolbar is built for: the container is
 *  `overflow-x: auto` and the arrows appear.
 */
/*  Neither section shrinks below its content.  With `min-width: 0` here
 *  the left section shrank to 70px while the search box inside it kept
 *  its floor — so the input was painted UNDERNEATH the buttons, and the
 *  container, whose own children all fitted, reported no overflow to
 *  scroll.  Sized to content, the container overflows honestly. */
.C_YUI_JSON .yui-horizontal-toolbar-section.left,
.C_YUI_JSON .yui-horizontal-toolbar-section.right {
    flex: 0 0 auto;
}

.C_YUI_JSON .JSON_SEARCH_CONTROL {
    flex: 1 1 auto;
    min-width: 11rem;
}

.C_YUI_JSON .JSON_TREE {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1em;
    line-height: 1.5;
    padding: 0.25rem 0;
}

.C_YUI_JSON .JSON_ROW {
    display: flex;
    align-items: flex-start;
    white-space: pre;
    padding-right: 0.5rem;
    /*  Depth guides.  The rows are SIBLINGS with growing padding, not
     *  nested boxes, so there is no element to hang a border-left on:
     *  the guides are painted as a repeating gradient across the row's
     *  own indentation, one line per ancestor level.  The tile is
     *  parked at the first level's column and its WIDTH is set per row
     *  (row_indent), so a row only ever draws the levels above it.
     *  Four characters, like every other indentation. */
    background-image: repeating-linear-gradient(
        to right,
        var(--json-guide) 0 1px,
        transparent 1px 4ch
    );
    background-position: 0.4ch 0;
    background-repeat: no-repeat;
}

/*  background-COLOR, never the `background` shorthand: the shorthand
 *  resets background-image and the depth guides vanish under the
 *  cursor, on the one row the reader is looking at. */
.C_YUI_JSON .JSON_ROW:hover {
    background-color: var(--json-row-hover);
}

.C_YUI_JSON .JSON_ROW_BODY {
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
}

/*
 *  Toggle affordance: a fixed-width gutter so keys align across depths.
 *  The chevron is rotated 90deg when open (static transform, no
 *  transition — animation is disabled by convention).
 */
.C_YUI_JSON .JSON_TOGGLE {
    flex: 0 0 auto;
    width: 1.2em;
    text-align: center;
    color: var(--bulma-text-weak, #7a7a7a);
    cursor: default;
    user-select: none;
}

.C_YUI_JSON .JSON_CONTAINER,
.C_YUI_JSON .JSON_COLLAPSED {
    cursor: pointer;
}

.C_YUI_JSON .JSON_CONTAINER .JSON_TOGGLE i {
    display: inline-block;
    font-size: 0.85em;
}

.C_YUI_JSON .JSON_TOGGLE.is-open i {
    transform: rotate(90deg);
}

.C_YUI_JSON .JSON_TOGGLE_REMOTE i {
    font-size: 0.8em;
    color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));
}

.C_YUI_JSON .JSON_KEY {
    color: var(--json-key);
    font-weight: 600;
}

.C_YUI_JSON .JSON_PUNCT {
    color: var(--bulma-text-weak, #7a7a7a);
}

.C_YUI_JSON .JSON_TYPE_STRING  { color: var(--json-string); }
.C_YUI_JSON .JSON_TYPE_NUMBER  { color: var(--json-number); }
.C_YUI_JSON .JSON_TYPE_BOOLEAN { color: var(--json-boolean); }
.C_YUI_JSON .JSON_TYPE_NULL    { color: var(--json-null); font-style: italic; }

/*
 *  The id a container row carries beside its size.  It is a VALUE, so
 *  it takes the string colour and follows the theme with it; what sets
 *  it apart from the values under it is the WEIGHT, not a colour of its
 *  own -- a sixth colour in a row that already carries five would be
 *  one more thing to decode, for a field whose whole job is to be read
 *  at a glance while scrolling.
 */
.C_YUI_JSON .JSON_SUMMARY_ID {
    color: var(--json-string);
    font-weight: 600;
}

.C_YUI_JSON .JSON_STUB {
    color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));
    font-weight: 600;
}

.C_YUI_JSON .JSON_COLLAPSED.is-pending {
    cursor: progress;
    opacity: 0.7;
}

/*
 *  Text view: the same document as a raw dump, monospace like the tree.
 */
.C_YUI_JSON .JSON_TEXT {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1em;
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
}

.C_YUI_JSON .JSON_TEXT_BODY {
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    /*  `pre`, NOT `pre-wrap`: the indentation IS the structure here, and
     *  a wrapped continuation line restarts at column 0 and lies about
     *  the depth of everything under it — on a phone that is most of the
     *  document.  Long lines scroll sideways inside .JSON_TEXT (which
     *  owns the overflow), never on the page body. */
    white-space: pre;
    /*  And the <pre> must GROW to its longest line: as a plain block it
     *  takes the container's width, its text spills out of a box that
     *  reports no overflow, and .JSON_TEXT gets no scroll range to
     *  offer — the tail of every long line is simply unreachable.
     *  `min-width: 100%` keeps it filling the container when the
     *  document is narrower. */
    width: max-content;
    min-width: 100%;
    /*  The dump is there to be read AND taken: a plain <pre> in some
     *  host stylesheets is unselectable chrome. */
    user-select: text;
}

/*
 *  Graph view: the hosted C_YUI_JSON_GRAPH fills the body.  No
 *  overflow here — G6 owns its viewport and pans inside it; a scroller
 *  on this box would compete with the canvas for the same drag.
 */
/*
 *  The graph body carries a DEFINITE height, and that is the whole
 *  trick.  The tree and the text push their own height; a canvas
 *  pushes NOTHING, so in a host that does not constrain the viewer the
 *  chain of `height:100%` down to G6's container resolved against auto
 *  and the graph came up 1061x2 — a hairline.
 *
 *  It has to be `height`, not `min-height`: a percentage height does
 *  not resolve against a box whose size comes from a minimum, so
 *  `min-height` here left the container at 4px (its two borders).
 *  Measured both ways in the browser.
 *
 *  `flex: 1 1 auto` keeps this a FLOOR and not a cage: in a host that
 *  does constrain the viewer — a modal, a C_YUI_WINDOW — the item
 *  grows past it and the graph follows the host.
 */
.C_YUI_JSON .JSON_GRAPH {
    height: 24rem;
}

.C_YUI_JSON .JSON_GRAPH > .C_YUI_JSON_GRAPH {
    height: 100%;
}

/*
 *  The view switch.  Bulma's `.buttons` gives every child a
 *  margin-bottom for the rows it expects to wrap; this strip never
 *  wraps, so that margin is only a gap that pushes the toolbar taller.
 */
.C_YUI_JSON .JSON_VIEW_SWITCH {
    margin-bottom: 0;
}

.C_YUI_JSON .JSON_VIEW_SWITCH .button {
    margin-bottom: 0;
}

/*  The current view is marked with `selected_state` (`yui_toolbar.css`):
 *  the library's one way of saying WHICH segment of a selector is
 *  chosen. This switch used to write that fill here itself -- the right
 *  idea in the wrong place, since the same question is answered by the
 *  graph's node modes, the map's modes and the period's granularities.
 *  `z-index` is all that is left, so the marked button's border wins
 *  over its neighbours' in the `has-addons` group.  */
.C_YUI_JSON .JSON_VIEW_MODE.selected_state {
    z-index: 1;
}

/*
 *  Disable any transition a host stylesheet might inject.
 */
.C_YUI_JSON * {
    transition: none !important;
}