/***********************************************************************
 *          shell_route_map.css
 *
 *      Styling for the site-map (route-tree) viewer in shell_route_map.js.
 *      A monospaced, indented tree; theme-aware via Bulma variables;
 *      and @media print rules (scoped by body.routemap-printing) so the
 *      Print button prints only the tree.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
.ROUTEMAP_BODY {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}
/*  In the resizable window, fill the window body so the tree grows/shrinks
 *  with it (the WINDOW_BODY is is-flex-grow-1 with a definite height). */
.yui-window-body .ROUTEMAP_BODY {
    height: 100%;
}
.ROUTEMAP_SEARCH_ROW {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ROUTEMAP_SEARCH_CTRL {
    max-width: 22rem;
    flex: 1 1 auto;
}
.ROUTEMAP_COUNT {
    display: inline-flex;
    gap: 0.25rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.ROUTEMAP_COUNT_N {
    font-weight: 600;
}
/*  Highlight a row that itself matches the filter. */
.ROUTEMAP_MATCH {
    background: var(--bulma-warning-light, #fff6d9) !important;
}
[data-theme="dark"] .ROUTEMAP_MATCH {
    background: rgba(255, 221, 87, 0.20) !important;
}
.ROUTEMAP_MATCH .ROUTEMAP_NAME,
.ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
    color: var(--bulma-text-strong, #363636);
}
[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_NAME,
[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
    color: #1a1a1a;
}
.ROUTEMAP_TREE {
    font-family: var(--bulma-family-monospace, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    overflow: auto;
    min-height: 6rem;
    /*  Modal fallback: cap and scroll. In the window the rule below
     *  makes it flex-fill instead. */
    flex: 0 1 auto;
    max-height: 68vh;
    border: 1px solid var(--bulma-border-weak, #dbdbdb);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--bulma-scheme-main, #fff);
}
/*  In the window: grow to fill the remaining height (after the filter
 *  and print row) and scroll internally. */
.yui-window-body .ROUTEMAP_TREE {
    flex: 1 1 auto;
    max-height: none;
}
/*  FOUR characters per level, house rule: the tree is read as
 *  indentation and it has to be the same four everywhere (the JSON
 *  viewer, the raw dumps, this map).  `ch` follows the row's own
 *  monospace font, so the guides stay aligned with the routes. */
.ROUTEMAP_UL {
    list-style: none;
    margin: 0;
    padding-left: 4ch;
    /*  The guide is what makes the depth READABLE — at four levels the
     *  eye follows the line, not the offset.  Dotted at 1px in the weak
     *  border colour was almost invisible against the panel; solid, in
     *  the stronger border shade, still reads as chrome but can be
     *  followed.  Both shades are Bulma vars, so it re-shades itself in
     *  the dark theme instead of turning into a black hairline. */
    border-left: 1px solid var(--bulma-border-hover, #8c8c8c);
}
.ROUTEMAP_ROOT {
    padding-left: 0;
    border-left: none;
}
.ROUTEMAP_LI {
    margin: 0.05rem 0;
}
.ROUTEMAP_ROW {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.05rem 0.25rem;
    border-radius: 0.25rem;
}
.ROUTEMAP_ICON {
    font-size: 0.95rem;
    color: var(--bulma-text-weak, #7a7a7a);
}
a.ROUTEMAP_LINK {
    text-decoration: none;
    color: inherit;
}
a.ROUTEMAP_LINK:hover {
    background: var(--bulma-background, #f5f5f5);
}
a.ROUTEMAP_LINK .ROUTEMAP_NAME {
    font-weight: 600;
    color: var(--bulma-text, inherit);
}
.ROUTEMAP_NAME {
    color: var(--bulma-text, inherit);
}
.ROUTEMAP_ROUTE {
    background: transparent;
    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
    padding: 0;
    font-size: 0.8rem;
}
/*  Implementing GClass pill (teal) — distinct from route (blue) and
 *  event (grey). */
.ROUTEMAP_GCLASS {
    font-family: var(--bulma-family-monospace, monospace);
    font-size: 0.7rem;
    padding: 0.02rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--bulma-link-light, #eff1fa);
    color: var(--bulma-link-dark, #3850b7);
    white-space: nowrap;
}
[data-theme="dark"] .ROUTEMAP_GCLASS {
    background: rgba(120, 150, 255, 0.16);
    color: #aab8ff;
}

/*  Action event badge — explicit colours (not Bulma's is-light tag) so it
 *  stays legible in dark mode. */
.ROUTEMAP_EVENT {
    font-family: var(--bulma-family-monospace, monospace);
    font-size: 0.72rem;
    padding: 0.02rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--bulma-background, #f0f0f0);
    color: var(--bulma-text-strong, #363636);
    border: 1px solid var(--bulma-border-weak, #dbdbdb);
    white-space: nowrap;
}
[data-theme="dark"] .ROUTEMAP_EVENT {
    background: rgba(255, 255, 255, 0.10);
    color: #e6e6e6;
    border-color: rgba(255, 255, 255, 0.20);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ROUTEMAP_EVENT {
        background: rgba(255, 255, 255, 0.10);
        color: #e6e6e6;
        border-color: rgba(255, 255, 255, 0.20);
    }
}
/*  "You are here" — the row of the route the user is currently on. */
.ROUTEMAP_CURRENT {
    background: var(--bulma-link-light, #eff1fa) !important;
    outline: 1px solid var(--bulma-link, #485fc7);
}
[data-theme="dark"] .ROUTEMAP_CURRENT {
    background: rgba(120, 150, 255, 0.16) !important;
    outline-color: rgba(120, 150, 255, 0.55);
}
/*  On the row you are ON, the route leaves the blue.
 *
 *  The tint that marks the row and the ink of a route are the SAME
 *  HUE, so the ink lands on its own colour: 3.95:1 in light (the row
 *  is a saturated `--bulma-link-light`) and 4.42 in dark. The row is
 *  already marked by that tint and its outline, so the blue says
 *  nothing there -- and the NAME beside it has always been written
 *  in the text colour, at 5.89 and 6.59. The route joins it.  */
.ROUTEMAP_CURRENT .ROUTEMAP_ROUTE {
    color: var(--bulma-text, #2e333d);
}
/*--- reference row: this route's subtree is drawn where the nav owns
 *    it, so the copy reachable from a drawer or the account menu is a
 *    live link without the repeated branch.  Quiet on purpose: it is a
 *    footnote, not a second structure. ---*/
.ROUTEMAP_REFS_TOGGLE {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--bulma-text-weak, #7a7a7a);
}

.ROUTEMAP_REF {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    padding: 0.02rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bulma-border-weak, #dbdbdb);
    color: var(--bulma-text-weak, #7a7a7a);
    white-space: nowrap;
}
.ROUTEMAP_ROW.ROUTEMAP_IS_REF .ROUTEMAP_NAME {
    font-weight: 400;
}

.ROUTEMAP_HERE {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.02rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--bulma-link, #485fc7);
    color: var(--bulma-link-invert, #fff);
    white-space: nowrap;
}
.ROUTEMAP_STRUCT .ROUTEMAP_NAME {
    color: var(--bulma-text-weak, #7a7a7a);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.78rem;
    font-weight: 700;
}
.ROUTEMAP_HINT {
    color: var(--bulma-text-weak, #7a7a7a);
}
.ROUTEMAP_ACTIONS {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/*  Print only the tree. On print the button clones the tree into
 *  `.routemap-print-area` (off-screen) and sets body.routemap-printing;
 *  everything else is hidden regardless of where the window/modal lives. */
.routemap-print-area {
    display: none;
}
@media print {
    body.routemap-printing > *:not(.routemap-print-area) {
        display: none !important;
    }
    body.routemap-printing .routemap-print-area {
        display: block !important;
    }
    .routemap-print-area .ROUTEMAP_TREE {
        max-height: none;
        border: none;
        overflow: visible;
        font-size: 10pt;
    }
    .routemap-print-area .ROUTEMAP_ROUTE,
    .routemap-print-area .ROUTEMAP_NAME {
        color: #000 !important;
    }
    .routemap-print-area .ROUTEMAP_EVENT {
        background: transparent !important;
        color: #000 !important;
        border-color: #999 !important;
    }
}