/* ════════════════════════════════════════════════════════════════════════
   sidebar-rail.css — the app's sidebar folded into a 56 px icon rail (2026-10-09)

   The same fold Waveform Studio has (segment-lab.html, body.rail-mode), for a
   page that needs the width: today the Quiz Creator. js/sidebar-rail.js sets
   the class on <body>, keeps the choice and shows each icon's name on hover.
   On a phone the sidebar is the drawer instead, with its labels, so
   js/mobile-shell.js sets the rail aside there and puts it back on the way out.

   A page that uses it: link this file (before css/mobile.css, which is always
   last), put the #railToggle button at the foot of its sidebar, and load
   js/sidebar-rail.js with a data-key. Its top bar must be #topBar and its
   content <main>, as on every shell page.
   ════════════════════════════════════════════════════════════════════════ */

body.rail-mode .app-sidebar { width: 56px !important; overflow: visible; }
body.rail-mode #topBar { left: 56px !important; }
body.rail-mode main { margin-left: 56px !important; }

/* a row is its icon alone */
body.rail-mode .app-sidebar .sidebar-nav-item { font-size: 0; gap: 0; justify-content: center; padding: 9px 0; }
body.rail-mode .app-sidebar .sidebar-nav-item .material-symbols-outlined { font-size: 19px !important; }
/* no logo: its row goes and the list (Home first) moves up into its place */
body.rail-mode .app-sidebar > .h-\[62px\] { display: none; }      /* by its class, not its place: the phone layer puts a button before it */
body.rail-mode .app-sidebar nav { padding-top: 10px; }
/* a wide button in the sidebar has no room in a rail (what it opens is in the list above) */
body.rail-mode .app-sidebar .rail-hide { display: none !important; }
body.rail-mode .railToggleTxt { display: none; }
.railToggle { cursor: pointer; background: none; border: 0; width: 100%; }

/* The name of an icon, on hover: the canonical dark bubble, drawn into <body> as
   position: fixed because the sidebar scrolls and would clip it. Anchored to the
   icon's right with a left-pointing arrow (the edge-trigger rule). */
.railTip {
    position: fixed; z-index: 2147483000; max-width: 250px; padding: 6px 11px; border-radius: 12px;
    background: #171c28; color: #fff; font: 700 12.5px/1.5 Inter, system-ui, sans-serif; white-space: nowrap;
    pointer-events: none; opacity: 0; transform: translateX(-2px); transition: opacity .14s ease, transform .14s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.railTip.show { opacity: 1; transform: translateX(0); }
.railTip::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 0; border-right-color: #171c28; }
@media (prefers-reduced-motion: reduce) { .railTip { transition: opacity .1s; } }