/* THE LAB'S SIDEBAR (T2 round 24; U2's drawing, round 6b): the rail, its panel and the phone's bar. Loaded by
   templates/partials/_lab_rail.html only while QL_LAB_SIDEBAR is on (lab_sidebar.py); with it unset nothing here is
   on the page. The founder: the platform "looks like a chat machine", so the sidebar looks like the ribbon and the
   canvas (dense, quiet, a tool), and the assistant's column stays the only conversation.

   THE RAIL is the ribbon's own buttons on end. Its button values are Ribbon C's (templates/_controlpanel.html, scoped
   there to .control-panel-menubar .ribbon-content), repeated here for the rail and pinned equal to a ribbon button's
   in a real browser (wrapper/test_lab_rail_browser.py): the same frame, icon, label and the chosen button's pressed
   look (the ribbon's .active-module; here aria-pressed, since the ribbon's highlighter clears that class on every
   module swap). Everything that stood beside today's sidebar stands beside the rail: the ribbon, the lean view's bar,
   the page, the guest bar.

   THE PANEL opens BELOW the ribbon and pushes the page aside (the canvas narrows); it never covers the ribbon, so a
   person can build while it is open. Rows, not cards: names 13 px, figures 12 px in tabular digits, green only for
   live and for up.

   ON A PHONE (the lab's own test, partials/_phone_lab.html: html.ql-phone) the rail is the bar at the foot and the
   panel the sheet above it; the lab's frame stops above the bar, so the chat's typing box is never under it. */

:root { --qlr-w: 82px; --qlr-panel: 396px; --qlr-bar: calc(62px + env(safe-area-inset-bottom, 0px)); }

.ql-rail, .ql-rail-panel, .ql-rail-bar {
    box-sizing: border-box;
    font-family: var(--ql-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}
.ql-rail *, .ql-rail-panel *, .ql-rail-bar * { box-sizing: border-box; }
.ql-rail button, .ql-rail-panel button, .ql-rail-bar button { font: inherit; color: inherit; cursor: pointer; }
.ql-rail { display: none; }
.ql-rail-bar { display: none; }
.ql-rail-panel[hidden] { display: none !important; }

/* ── the rail (a computer and a tablet) ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    html:not(.ql-phone) .ql-rail {
        position: fixed; left: 0; top: 0; bottom: 0; width: var(--qlr-w); z-index: 9998;
        display: flex; flex-direction: column; align-items: center;
        background: linear-gradient(180deg, #111113, #0e0e10);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    /* everything that stood beside today's sidebar stands beside the rail, and beside the panel while it is open */
    html:not(.ql-phone) body.ql-rail-on { --sidebar-width: var(--qlr-w); }
    html:not(.ql-phone) body.ql-rail-on .control-panel-menubar,
    html:not(.ql-phone) body.ql-rail-on #ql-lean-bar { left: var(--qlr-w) !important; }
    html:not(.ql-phone) body.ql-rail-on .main-container,
    html:not(.ql-phone) body.ql-rail-on .articles-main,
    html:not(.ql-phone) body.ql-rail-on .article-main { margin-left: var(--qlr-w) !important; }
    html:not(.ql-phone) body.ql-rail-on.ql-rail-open .main-container,
    html:not(.ql-phone) body.ql-rail-on.ql-rail-open .articles-main,
    html:not(.ql-phone) body.ql-rail-on.ql-rail-open .article-main { margin-left: calc(var(--qlr-w) + var(--qlr-panel)) !important; }
    html:not(.ql-phone) body.ql-rail-on #ql-guest-bar,
    html:not(.ql-phone) body.ql-rail-on #cookieBanner { left: var(--qlr-w) !important; }
    html:not(.ql-phone) body.ql-rail-on.ql-rail-open #ql-guest-bar { left: calc(var(--qlr-w) + var(--qlr-panel)) !important; }
    /* the rail's head carries the mark, its foot Tell us; there is no sidebar left to open */
    html:not(.ql-phone) body.ql-rail-on #ql-lean-bar .ql-lean-menu,
    html:not(.ql-phone) body.ql-rail-on #ql-lean-bar .ql-lean-brand,
    html:not(.ql-phone) body.ql-rail-on #ql-lean-bar .ql-lean-btn[data-tell-us],
    html:not(.ql-phone) body.ql-rail-on .mobile-menu-btn { display: none !important; }
}

/* its head is the ribbon's row of tabs: the same dark band, the same height (the lean view's bar when lean) */
.ql-rail-home {
    width: 100%; height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
    background: #0c0c0e; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.ql-lean .ql-rail-home { height: 38px; background: linear-gradient(180deg, #14171c 0%, #0f1216 100%); border-bottom-color: rgba(255, 255, 255, 0.08); }
.ql-rail-home svg { display: block; width: 24px; height: 24px; }
.ql-rail-home:focus-visible { outline: 1px solid #3fae7f; outline-offset: -3px; }

/* its group names in the ribbon's own (Ribbon C's .ribbon-group-title) */
.ql-rail .ribbon-group-title {
    width: 100%; padding: 6px 0 3px; margin: 0; border: 0; text-align: center;
    font-family: var(--ql-font-display); font-size: 11.5px; font-weight: 500;
    letter-spacing: 0; text-transform: none; line-height: 14px; color: #6B7688;
}
.ql-rail-items { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ql-rail-sep { width: 40px; height: 1px; margin: 10px 0 2px; flex: none;
               background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent); }
.ql-rail-gap { flex: 1; }
.ql-rail-foot { padding-bottom: 12px; }

/* THE RIBBON'S BUTTON (Ribbon C, templates/_controlpanel.html): a framed button, one quiet white line icon, the name
   under it; the chosen one a shade lighter with a firmer edge */
.ql-rail .ribbon-item, .ql-rail-bar .ribbon-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 68px; min-width: 56px; max-width: 136px; padding: 4px 7px 3px; margin: 0;
    background: #161C26; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
    box-shadow: none; transform: none; text-decoration: none; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ql-rail .ribbon-item:hover, .ql-rail-bar .ribbon-item:hover {
    background: #1C2330; border-color: rgba(255, 255, 255, 0.24); box-shadow: none; transform: none;
}
.ql-rail .ribbon-item:active, .ql-rail-bar .ribbon-item:active { box-shadow: none; transform: none; }
.ql-rail .ribbon-item .ribbon-item-icon, .ql-rail .ribbon-item:hover .ribbon-item-icon,
.ql-rail-bar .ribbon-item .ribbon-item-icon, .ql-rail-bar .ribbon-item:hover .ribbon-item-icon {
    width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; filter: none; color: #FFFFFF !important;
    display: flex; align-items: center; justify-content: center;
}
.ql-rail .ribbon-item .ribbon-item-icon svg, .ql-rail-bar .ribbon-item .ribbon-item-icon svg {
    width: 16px; height: 16px; filter: none; stroke-width: 2.25;
}
.ql-rail .ribbon-item .ribbon-item-label, .ql-rail-bar .ribbon-item .ribbon-item-label {
    font-family: var(--ql-font-display); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0; line-height: 1.2; color: #C9D2DE; display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.ql-rail .ribbon-item:hover .ribbon-item-label, .ql-rail-bar .ribbon-item:hover .ribbon-item-label { color: #E8ECF2; }
.ql-rail .ribbon-item[aria-pressed="true"], .ql-rail-bar .ribbon-item[aria-pressed="true"] {
    background: #232B37; border-color: rgba(255, 255, 255, 0.34); box-shadow: none;
}
.ql-rail .ribbon-item[aria-pressed="true"] .ribbon-item-label,
.ql-rail-bar .ribbon-item[aria-pressed="true"] .ribbon-item-label { color: #FFFFFF; font-weight: 600; }
.ql-rail .ribbon-item:focus-visible, .ql-rail-bar .ribbon-item:focus-visible { outline: 1px solid #3fae7f; outline-offset: 2px; }
/* standing on end in a rail 82 px wide, a button is as wide as its longest name ("Paper trades") needs */
.ql-rail .ribbon-item { width: 74px; padding-left: 3px; padding-right: 3px; }
/* live: the toolbar's own green */
.ql-rail-dot { position: absolute; top: 4px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.ql-rail-dot[hidden] { display: none; }

/* ── the panel: below the ribbon, beside the page ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    html:not(.ql-phone) .ql-rail-panel {
        position: fixed; left: var(--qlr-w); width: var(--qlr-panel); bottom: 0; z-index: 9990;
        top: 123px;                                    /* under the ribbon: its tabs and its panel */
        display: flex; flex-direction: column;
        background: #0E131B; border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 10px 0 24px rgba(0, 0, 0, 0.28);
    }
    html:not(.ql-phone) body.ql-lean.ql-tabs-up .ql-rail-panel { top: calc(38px + 81px); }
    html:not(.ql-phone) body.ql-lean:not(.ql-tabs-up) .ql-rail-panel { top: calc(38px + 123px); }
}
.ql-rail-phead {
    height: 36px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ql-rail-phead h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 600; color: #E8ECF2; letter-spacing: 0; }
.ql-rail-ib {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    background: none; border: 0; border-radius: 8px; color: #A3AEC0;
}
.ql-rail-ib[hidden] { display: none; }
.ql-rail-ib:hover { color: #E8ECF2; background: rgba(255, 255, 255, 0.06); }
.ql-rail-ib:focus-visible { outline: 1px solid #3fae7f; outline-offset: 1px; }
.ql-rail-pbody { flex: 1; overflow: auto; padding: 4px 0 14px; }

/* group names, as the ribbon writes its own (sentence case) */
.qlr-gl { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 5px;
          font-size: 11.5px; font-weight: 500; line-height: 14px; color: #6B7688; }
.qlr-gl a { color: #8994A6; text-decoration: none; }
.qlr-gl a:hover { color: #E8ECF2; }
.qlr-hr { height: 1px; margin: 6px 14px 0; background: rgba(255, 255, 255, 0.06); }
.qlr-none { padding: 24px 16px; font-size: 13px; line-height: 1.5; color: #A3AEC0; }

/* a row: one or two lines */
.qlr-r, .ql-rail-r { display: block; width: 100%; padding: 5px 14px 6px; color: inherit; text-decoration: none; text-align: left;
                     background: none; border: 0; border-radius: 0; }
.qlr-r:hover, .ql-rail-r:hover { background: rgba(255, 255, 255, 0.04); }
.qlr-r:focus-visible, .ql-rail-r:focus-visible { outline: 1px solid #3fae7f; outline-offset: -1px; }
.qlr-r.qlr-on { box-shadow: inset 2px 0 0 #3fae7f; }
.qlr-l, .ql-rail-l { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.qlr-l + .qlr-l { margin-top: 3px; }
.qlr-name, .ql-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                           font-size: 13px; color: #E8ECF2; }
.qlr-meta, .ql-rail-meta { flex: none; font-size: 12px; color: #8994A6; white-space: nowrap; }
.ql-rail-cta { color: #3fae7f; font-weight: 600; }
.qlr-fill { flex: 1; }
.qlr-num { flex: none; font-size: 12px; color: #8994A6; white-space: nowrap; }
.qlr-num b { font-weight: 600; color: #C9D2DE; }
.qlr-num b.qlr-up { color: #3fb950; }
.qlr-live { flex: none; padding: 3px 5px 2px; border-radius: 4px; background: #22c55e; color: #0b0e14; font-size: 9px;
            font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.qlr-tag { flex: none; padding: 2px 5px 1px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.16); color: #A3AEC0;
           font-size: 9.5px; font-weight: 600; line-height: 1.2; }
.qlr-spark { flex: none; display: block; }
.qlr-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.qlr-bar i { display: block; height: 100%; background: #3fae7f; }
.qlr-src { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
           border-radius: 4px; color: #A3AEC0; }
.qlr-src.qlr-letter { font-size: 10px; font-weight: 700; color: #C9D2DE; background: rgba(255, 255, 255, 0.07);
                      border: 1px solid rgba(255, 255, 255, 0.14); }
.qlr-src .qlr-mark { width: 14px; height: 14px; }

/* B2: the explorer tree */
.qlr-t { position: relative; display: flex; align-items: center; gap: 6px; height: 26px; padding-right: 14px; font-size: 13px;
         color: inherit; text-decoration: none; cursor: pointer; }
.qlr-t:hover { background: rgba(255, 255, 255, 0.04); }
.qlr-t:focus-visible { outline: 1px solid #3fae7f; outline-offset: -1px; }
.qlr-tw { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: #8994A6; }
/* a project's arrow folds its runs; its name opens it (the founder on the staging desk, 2026-10-22) */
.qlr-tw[data-fold] { cursor: pointer; border-radius: 3px; }
.qlr-tw[data-fold]:hover { background: rgba(255, 255, 255, 0.1); color: #E6EDF3; }
.qlr-new { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 8px 8px 6px; padding: 7px 10px;
           border: 1px dashed rgba(63, 174, 127, 0.45); border-radius: 6px; background: transparent; color: #3fae7f;
           font: inherit; font-size: 12.5px; cursor: pointer; }
.qlr-new:hover { background: rgba(63, 174, 127, 0.08); border-style: solid; }
.qlr-new:focus-visible { outline: 1px solid #3fae7f; outline-offset: 1px; }
/* the new layout's note, once, beside the rail on a desk (2026-10-23) */
.qlr-note { position: fixed; left: calc(var(--qlr-w, 68px) + 12px); bottom: 16px; z-index: 9999; width: 300px;
            padding: 14px 16px 12px; border-radius: 10px; border: 1px solid rgba(63, 174, 127, 0.45);
            background: #12161c; color: #E8ECF2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font-size: 13px; }
.qlr-note b { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.qlr-note p { margin: 0 0 10px; line-height: 1.5; color: #C9D2DE; }
.qlr-note button { padding: 6px 14px; border-radius: 6px; border: 0; background: #B2DFCC; color: #0A1712; font: inherit;
                   font-size: 12.5px; font-weight: 600; cursor: pointer; }
.qlr-note button:hover { background: #C4E8D8; }
html.ql-phone .qlr-note { display: none; }
/* a view's rows on their way (2026-10-23, "the your work comes jumpy"): still bars, no motion */
.qlr-wait { display: grid; gap: 12px; padding: 16px 14px; }
.qlr-wait i { display: block; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.qlr-wait i:nth-child(2) { width: 78%; }
.qlr-wait i:nth-child(3) { width: 56%; }
/* what a group is, in one quiet line under its name (Research studies; the founder, 2026-10-23) */
.qlr-hint { padding: 0 14px 8px; font-size: 12px; line-height: 1.45; color: #8994A6; }
html.ql-phone .qlr-hint { padding: 0 16px 8px; font-size: 13px; }
.qlr-ti { flex: none; display: inline-flex; color: #A3AEC0; }
/* a project's tree (2026-10-23): its versions by what changed, each version's reports a step quieter */
.qlr-t[data-report] .qlr-name { font-size: 12.5px; color: #C9D2DE; }
.qlr-vn { flex: none; min-width: 22px; padding: 1px 4px 0; border-radius: 4px; border: 1px solid rgba(63, 174, 127, 0.4);
          color: #3fae7f; font-size: 10.5px; font-weight: 600; line-height: 1.4; text-align: center; }
.qlr-t.qlr-top .qlr-name { font-size: 12px; font-weight: 600; color: #C9D2DE; }
.qlr-count { margin-left: auto; font-size: 11.5px; font-weight: 500; color: #6B7688; }
.qlr-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.07); }
.qlr-muted { color: #8994A6; }

/* ── a phone: the rail is the bar at the foot, the panel the sheet above it ──────────────────────────────────── */
html.ql-phone .ql-rail-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9600; height: var(--qlr-bar);
    display: flex; gap: 6px; justify-content: space-around; align-items: flex-start;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #111113, #0e0e10); border-top: 1px solid rgba(255, 255, 255, 0.08);
}
html.ql-phone .ql-rail-bar .ribbon-item { flex: 1; width: auto; min-width: 0; height: 46px; }
html.ql-phone .ql-rail-bar .ribbon-item .ribbon-item-label { font-size: 11px; }
html.ql-phone .ql-rail-panel {
    position: fixed; left: 0; right: 0; top: 52px; bottom: var(--qlr-bar); z-index: 9590; width: auto;
    display: flex; flex-direction: column; background: #0E131B;
}
html.ql-phone .ql-rail-phead { display: none; }
html.ql-phone .ql-rail-pbody { padding-top: 2px; }
html.ql-phone .qlr-r, html.ql-phone .ql-rail-r { padding: 8px 16px 9px; }
html.ql-phone .qlr-name, html.ql-phone .ql-rail-name { font-size: 14px; }
html.ql-phone .qlr-gl { padding: 12px 16px 6px; font-size: 12px; }
html.ql-phone .qlr-num, html.ql-phone .qlr-meta, html.ql-phone .ql-rail-meta { font-size: 12.5px; }
/* THE LAB ON A PHONE HAS NO BAR AT ITS FOOT (the founder's phone walk, 2026-10-22: "can it be like Claude side bar on the
   phone that is coming from the side (side bar icon) and not using the bottom piece of the screen permanently?"): the
   lab's own top bar opens a drawer from the left with what the bar held (LabChat.tsx PhoneLab), so the lab's frame
   takes the whole height; another platform page on a phone keeps the bar */
html.ql-phone body.ql-rail-on.ql-canvas-page .ql-rail-bar,
html.ql-phone body.ql-rail-on.ql-canvas-page .ql-rail-panel { display: none !important; }
html.ql-phone body.ql-rail-on:not(.ql-canvas-page) .main-container { padding-bottom: var(--qlr-bar) !important; }