/* ══════════════════════════════════════════════════════════════════════════════
   back-stack.css — the two dev-only surfaces that belong to global/back-stack.js.
   Loaded by BOTH layouts, like the JS: the admin _Layout and the Molla
   _Template1_layout. Neither rule is ever in the page for a member — the debug panel
   needs ?backdebug=1 and the button needs DevTools:BackTestButton.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── BackStack debug panel ────────────────────────────────────────────────────
   Only ever in the page when `?backdebug=1` (or localStorage.backDebug) is set, so this
   never reaches a member. Pinned bottom-left: the bottom-RIGHT corner is where the
   withdraw dome and the report FAB sit, and the point of this is to watch the stack
   while pressing exactly those. */
.bs-debug {
    position: fixed;
    z-index: 20000;   /* over a modal (1050) and its backdrop — it is watching them */
    bottom: 8px;
    left: 8px;
    max-width: 260px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(17, 24, 39, .92);
    color: #e5edf7;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    pointer-events: none;   /* never in the way of the thing being tested */
}
.bs-debug-head {
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    color: #7fd1ff;
    font-weight: 700;
}
.bs-debug-row  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-debug-row b { color: #ffd479; font-weight: 700; }
.bs-debug-none { color: #8b97a8; }

/* The dev-only on-screen back key. Rendered only when DevTools:BackTestButton is on, so it
   never reaches a member. Left edge and vertically centred, which is the one place nothing
   else claims: the dome and the report FAB own the bottom, the header owns the top, and the
   debug panel above owns bottom-left. 44px because a thumb needs it. */
.back-test-btn {
    position: fixed;
    z-index: 20001;   /* over the debug panel, which is itself over a modal */
    top: 60%;
    left: 10px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(17, 24, 39, .9);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transition: background .15s, transform .12s;
}
.back-test-btn:hover { background: #39f; }
/* ⚠ The centring translate has to be repeated here, or pressing it drops the button half its
   own height down the screen. */
.back-test-btn:active { transform: translateY(-50%) scale(.9); }

/* The rolling history trace under the stack — dimmer than the entries so the two read apart. */
.bs-debug-trace {
    color: #7fd1ff;
    font-size: 10px;
    white-space: nowrap;
    opacity: .85;
}