/* ============================================================================
   sidebarRail.css  -  the sidebar presented as an icon rail + a module panel.

   SCOPE, AND HOW TO REVERT
   Every rule is gated on html[data-nav-rail="on"] AND min-width:1181px. Drop
   the attribute and RMS's own sidebar is back, unchanged, with no reflow -
   nothing here is a default. To revert permanently:
       1. remove the <link> to this file and the <script> for sidebarRail.js
          from public/index.html
       2. remove the one data-nav-rail line from the head script in index.html
       3. delete this file and public/js/sidebarRail.js
   Nothing else was edited, so there is nothing else to undo.

   WHY SCOPED OVERRIDES RATHER THAN A REWRITE
   The sidebar is styled by 114 rules across six stylesheets, and 37 of them are
   responsive.css's mobile rules which must keep working untouched. A rewrite
   would have to absorb all six files, in a repo where another session has files
   open, for a design that is still being judged and may be rejected. A scoped
   layer is reversible in one attribute.

   IT DOES NOT REPLACE THE COLLAPSE. sidebarCollapse.css still owns
   html[data-nav="collapsed"], the 76px width, the hover-out-over-content and
   Ctrl+B. This file only changes what sits inside the sidebar at each state.
   The rail is 76px because that is the width the collapse feature already
   reserves on .main - the spec's 64px would have meant beating the margin-left
   and width rules on .main for no gain.

   NO !important IS FOUGHT. sidebarCollapse.css:87 uses display:none !important
   to strip the nav in the rail state; that rule is scoped :not(:hover), and in
   the collapsed state our panel is width:0 anyway, so the two agree rather than
   compete. Nothing here tries to out-specify it.
   ========================================================================== */

@media (min-width:1181px){

  /* ── the shell ──────────────────────────────────────────────────────────
     BEATS style.css:1 .sidebar{width:270px;padding:24px 18px} - a rail plus a
     panel cannot live in a single padded column. */
  html[data-nav-rail="on"] #appSidebar{
    width:316px;                       /* 76 rail + 240 panel */
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    /* THE PROTOTYPE'S PALETTE, not RMS's.
       I first kept RMS's own blue gradient (style.css:1
       linear-gradient(180deg,#06253f,#005d86 58%,#064e6a)) on the argument that an
       invented colour would disagree with the rest of the product. Overruled, and
       correctly: this is the look being judged, and the prototype is dark navy. The
       rail and panel tints below are the prototype's too. */
    background:linear-gradient(180deg,#0a1a28,#071320 55%,#050e18);
    border-right:1px solid rgba(125,211,252,.10);
  }
  /* BEATS style.css:1 .main{margin-left:270px;width:calc(100% - 270px)} */
  html[data-nav-rail="on"] .main{
    margin-left:316px;
    width:calc(100% - 316px);
  }
  /* Collapsed: the rail only, and the content reclaims the width.
     THE .main RULE IS NOT OPTIONAL. sidebarCollapse.css:59 already says
     html[data-nav="collapsed"] .main{margin-left:76px}, but that selector and
     ours above have the SAME specificity (0,2,1) and this sheet loads later,
     so ours would win and the content would never move. Adding the collapsed
     state to our own selector (0,3,1) settles it by specificity rather than by
     load order - measured before the fix: the content stayed at 316px. */
  html[data-nav-rail="on"][data-nav="collapsed"] .main{
    margin-left:76px;
    width:calc(100% - 76px);
  }
  /* Collapsed: the rail only. These two mirror sidebarCollapse.css's own 76px
     numbers so the content offset it already sets stays correct. */
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:not(:hover):not(:has(:focus-visible)){
    width:76px;
    padding:0;
  }
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:hover,
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:has(:focus-visible){
    width:316px;                       /* peek: rail + panel, floating over the page */
  }

  /* NO FLASH OF THE OLD SIDEBAR.
     The flag is set before paint so these rules apply immediately, but the rail and
     panel are BUILT BY JS at DOMContentLoaded. In between, .nav, .logo, .sublogo and
     .sidebar-legal are still DIRECT children of the sidebar, so the original nav painted
     inside the new shell for a moment - Abdul saw "a sidebar that is not the new one".
     The child combinator is what tells the two states apart: before the build these are
     direct children and are hidden; after it they live inside .rk-brand / .rk-panel and
     are shown by the rules below. Nothing is hidden for good - if sidebarRail.js fails it
     drops the flag, this whole stylesheet stops applying, and RMS's own sidebar returns. */
  html[data-nav-rail="on"] #appSidebar > .nav,
  html[data-nav-rail="on"] #appSidebar > .logo,
  html[data-nav-rail="on"] #appSidebar > .sublogo,
  html[data-nav-rail="on"] #appSidebar > .sidebar-legal{ display:none; }

  /* ── brand bar ──────────────────────────────────────────────────────────
     68px. Chosen against the floating top bar rather than matched to it: the
     top bar is an inset card that never touches the sidebar, so alignment was
     never available. 68 gives the 34px mark room without crowding the rail. */
  html[data-nav-rail="on"] .rk-brand{
    height:68px;
    flex:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 0 0 20px;
    border-bottom:1px solid rgba(255,255,255,.10);
    overflow:hidden;
    white-space:nowrap;
  }
  html[data-nav-rail="on"] .rk-mark{ width:34px; height:34px; flex:none; display:block; }
  html[data-nav-rail="on"] .rk-mark img{ width:100%; height:100%; display:block; }
  html[data-nav-rail="on"] .rk-btxt{ min-width:0; overflow:hidden; }
  /* BEATS style.css:1 .logo{font-size:25px;letter-spacing:1px} and
     style.css:5 .logo{letter-spacing:.3px} - the brand bar is smaller than the
     old stacked logo block. */
  html[data-nav-rail="on"] .rk-btxt .logo{
    font-size:17px; font-weight:900; letter-spacing:.07em; line-height:1;
  }
  /* BEATS style.css:1 .sublogo{font-size:12px;margin:6px 0 28px} */
  html[data-nav-rail="on"] .rk-btxt .sublogo{
    font-size:7px; letter-spacing:.3em; font-weight:800;
    margin:5px 0 0; opacity:.62; text-transform:uppercase;
  }
  /* In the rail the wordmark goes and the cube centres itself. */
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:not(:hover):not(:has(:focus-visible)) .rk-brand{
    padding:0; justify-content:center; gap:0;
  }
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:not(:hover):not(:has(:focus-visible)) .rk-btxt{
    width:0; opacity:0;
  }

  html[data-nav-rail="on"] .rk-cols{ display:flex; flex:1; min-height:0; }

  /* ── the rail ───────────────────────────────────────────────────────────── */
  html[data-nav-rail="on"] .rk-rail{
    width:76px; flex:0 0 76px;
    display:flex; flex-direction:column; align-items:center;
    padding:12px 0 10px;
    background:rgba(0,0,0,.18);
    overflow:hidden;
  }
  html[data-nav-rail="on"] .rk-grow{ flex:1; min-height:8px; }

  /* BEATS style.css:1 `button{background:#03658e;padding:13px 17px;border-radius:13px;
     margin:3px;box-shadow:...}` - the global button skin, which would otherwise
     paint every rail icon as a solid blue pill. */
  html[data-nav-rail="on"] .rk-rail button{
    width:46px; height:46px;
    margin:0 0 4px; padding:0;
    border:0; border-radius:13px;
    background:transparent; box-shadow:none;
    display:grid; place-items:center;
    position:relative; cursor:pointer;
    transition:background var(--t-fast,120ms) var(--e-out,ease-out);
  }
  html[data-nav-rail="on"] .rk-rail button:hover{
    background:rgba(255,255,255,.08); transform:none;   /* cancels style.css's button:hover lift */
  }
  html[data-nav-rail="on"] .rk-rail button.on{ background:rgba(125,211,252,.16); }
  html[data-nav-rail="on"] .rk-rail button:focus-visible{ outline:2px solid #7dd3fc; outline-offset:2px; }

  /* THE PLATES, STRIPPED WITHOUT EDITING A SINGLE ICON FILE.
     Every section-*.svg is a BLACK rounded plate with a white glyph on top.
     mix-blend-mode:screen makes black transparent against any backdrop and
     leaves white untouched, so the glyph lands straight on the rail. Editing
     the files was not an option (they are shared with the old sidebar) and
     redrawing them was not either. */
  html[data-nav-rail="on"] .rk-rail button > img{
    width:26px; height:26px; display:block;
    mix-blend-mode:screen;
    opacity:.82;
    transition:opacity var(--t-fast,120ms) var(--e-out,ease-out);
  }
  html[data-nav-rail="on"] .rk-rail button:hover > img,
  html[data-nav-rail="on"] .rk-rail button.on > img{ opacity:1; }

  /* THE STAR IS DRAWN SMALLER THAN ITS NEIGHBOURS. Every other section glyph
     fills 15-49 of the 64 box as solid shapes; the star is a thin outline
     spanning 15-45.8 vertically, so at a shared 26px it reads noticeably
     lighter and smaller on the rail. Corrected HERE rather than in the file:
     section-favourites.svg is shared with the old sidebar and the group
     header, and this is a rail-sizing decision, not a change to the icon. */
  html[data-nav-rail="on"] .rk-rail button > img[src*="section-favourites"]{
    width:31px; height:31px;
  }

  /* TOOLS BREAKS THE "BLACK PLATE" ASSUMPTION EVERY OTHER SECTION ICON FOLLOWS. It ships as a
     flat stroke glyph (fill:none, stroke:#475569) with no black plate to screen away, so
     mix-blend-mode:screen has nothing to make transparent and instead colour-shifts the grey
     stroke against the navy rail - which is the wrong colour Abdul saw. brightness(0) turns
     any non-transparent stroke solid black, then invert(1) flips that to solid white, giving
     the same flat white glyph mix-blend-mode gives every other icon - normal blending, no plate
     needed. section-tools.svg itself is untouched, same as every other shared icon file.
     THIS GLYPH IS BOLDER THAN ITS SIBLINGS at the same white - a 2px stroke on a 24x24 viewBox
     is thick relative to the thin filled shapes the other section icons draw, so full white at
     the shared .82 opacity read as glowing next to them. Dimmed further, here only. */
  html[data-nav-rail="on"] .rk-rail button > img[src*="section-tools"]{
    mix-blend-mode:normal;
    filter:brightness(0) invert(1);
    opacity:.55;
  }
  html[data-nav-rail="on"] .rk-rail button:hover > img[src*="section-tools"],
  html[data-nav-rail="on"] .rk-rail button.on > img[src*="section-tools"]{
    opacity:.85;
  }

  /* The section you are ACTUALLY in - not the one being previewed. */
  html[data-nav-rail="on"] .rk-rail button.sel::before{
    content:""; position:absolute; left:-15px; top:11px; bottom:11px; width:3px;
    border-radius:0 3px 3px 0; background:#7dd3fc;
  }
  /* While peeking, only the hovered icon is marked. */
  html[data-nav-rail="on"] #appSidebar[data-peek="1"] .rk-rail button.sel:not(.on)::before{ display:none; }

  /* Tooltips: only when the panel is not showing, i.e. collapsed and not peeked. */
  html[data-nav-rail="on"] .rk-tip{
    position:absolute; left:58px; z-index:30;
    background:#0f172a; color:#e2e8f0; font-size:12px; font-weight:600;
    padding:5px 10px; border-radius:7px; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition:opacity var(--t-fast,120ms) var(--e-out,ease-out);
  }
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:not(:hover) .rk-rail button:hover .rk-tip{ opacity:1; }

  html[data-nav-rail="on"] .rk-utils{
    display:flex; flex-direction:column; align-items:center; flex:none;
    padding-top:8px; border-top:1px solid rgba(255,255,255,.10); width:44px;
  }
  html[data-nav-rail="on"] .rk-rail .rk-util{ width:38px; height:38px; border-radius:11px; color:#8fb3cb; }
  html[data-nav-rail="on"] .rk-rail .rk-util svg{ width:17px; height:17px; display:block; }
  html[data-nav-rail="on"] .rk-rail .rk-util:hover{ color:#e2f2ff; }
  html[data-nav-rail="on"] .rk-rail .rk-me{
    width:32px; height:32px; border-radius:50%; background:#03658e; color:#fff;
    font-size:12px; font-weight:800; margin-top:6px;
  }
  html[data-nav-rail="on"] .rk-rail .rk-me::after{ content:attr(data-initial); }

  /* ── the panel ──────────────────────────────────────────────────────────── */
  html[data-nav-rail="on"] .rk-panel{
    width:240px; flex:0 0 240px;
    display:flex; flex-direction:column; min-height:0;
    background:rgba(0,0,0,.10);
    overflow:hidden;
  }
  html[data-nav-rail="on"][data-nav="collapsed"] #appSidebar:not(:hover):not(:has(:focus-visible)) .rk-panel{
    width:0; flex-basis:0;
  }
  html[data-nav-rail="on"] .rk-ptitle{
    color:#fff; font-weight:800; font-size:13.5px;
    padding:16px 16px 6px; white-space:nowrap; flex:none;
  }
  /* BEATS style.css:1 .sidebar{overflow-y:auto} behaviour for the nav block:
     the panel scrolls, not the whole sidebar, or the rail would scroll away. */
  html[data-nav-rail="on"] .rk-panel .nav{
    flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 8px 10px;
  }

  /* THE PANEL'S SCROLLBAR. polish.css:475 sets a global
     *{scrollbar-color:#c2cfdb transparent} - a pale grey thumb drawn for light
     backgrounds, which paints as a bright bar down a dark panel. This is the one
     place that needs a dark variant; everything else keeps the house style. */
  html[data-nav-rail="on"] .rk-panel .nav{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.17) transparent;
  }
  html[data-nav-rail="on"] .rk-panel .nav::-webkit-scrollbar{ width:8px; }
  html[data-nav-rail="on"] .rk-panel .nav::-webkit-scrollbar-track{ background:transparent; }
  html[data-nav-rail="on"] .rk-panel .nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.17);
    border-radius:99px;
    border:2px solid transparent;
    background-clip:content-box;
  }
  html[data-nav-rail="on"] .rk-panel .nav::-webkit-scrollbar-thumb:hover{
    background:rgba(125,211,252,.42);
    background-clip:content-box;
  }

  /* One section at a time. A section RMS has hidden for permissions carries an
     INLINE display:none, which beats this rule, so it stays hidden. */
  html[data-nav-rail="on"] .rk-panel .nav > details.nav-group,
  html[data-nav-rail="on"] .rk-panel .nav > a.nav-flat{ display:none; }
  html[data-nav-rail="on"] .rk-panel .nav > details.nav-group.rk-sel{ display:block; }
  /* The section name is the panel's title, so its own header is redundant. */
  html[data-nav-rail="on"] .rk-panel .nav > details.nav-group > summary.nav-group-title{ display:none; }

  /* BEATS style.css:1 `.nav button,.nav a{margin:7px 0;padding:14px;border-radius:15px;
     background:rgba(255,255,255,.12);font-size:15px;font-weight:800}` - module rows
     in a 240px panel have to be quieter and tighter than the old 270px list. */
  html[data-nav-rail="on"] .rk-panel .nav button,
  html[data-nav-rail="on"] .rk-panel .nav a{
    margin:1px 0; padding:6px 9px;
    border-radius:8px; background:transparent;
    font-size:12.5px; font-weight:500;
    color:#c6dbea; box-shadow:none;
    gap:10px;
  }
  html[data-nav-rail="on"] .rk-panel .nav button:hover,
  html[data-nav-rail="on"] .rk-panel .nav a:hover{
    background:rgba(255,255,255,.08); color:#fff; transform:none;
  }
  html[data-nav-rail="on"] .rk-panel .nav .active{
    background:rgba(125,211,252,.16); color:#fff; font-weight:700;
  }
  /* The white chip stays - the module icons are dark line art drawn for light
     backgrounds and vanish without it. sidebar-v2.css already sizes it; this
     only trims it for the narrower panel.
     BEATS sidebar-v2.css:72 #appSidebar .nav-ico{width:28px;height:22px}. */
  html[data-nav-rail="on"] .rk-panel .nav-ico{ width:24px; height:19px; border-radius:5px; }
  html[data-nav-rail="on"] .rk-panel .nav-subgroup .nav-ico{ width:24px; height:19px; }

  /* Group headings. BEATS sidebar-v2.css / polish.css subgroup title styling. */
  html[data-nav-rail="on"] .rk-panel summary.nav-subgroup-title{
    display:flex; align-items:center; gap:7px;
    padding:9px 10px 6px; margin:0;
    color:#8fb3cb; font-size:9.5px; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    background:transparent; border-radius:7px;
    cursor:pointer; white-space:nowrap; list-style:none;
  }
  html[data-nav-rail="on"] .rk-panel summary.nav-subgroup-title:hover{ color:#d6e9f7; }
  /* NO ICON ON A GROUP HEADING. RMS gives most subgroups an icon chip but the
     "General" group this file creates has none to give - there is no icon for
     "everything else", and inventing one would be inventing a meaning. Rather
     than have one heading sit indented from its neighbours, none of them carry
     an icon: the prototype's headings are text plus a caret, and at 9.5px
     uppercase a 24px white chip reads as noise rather than information.
     MODULE ROWS KEEP THEIRS - this is the summary's own icon only. */
  html[data-nav-rail="on"] .rk-panel summary.nav-subgroup-title > img.nav-ico{ display:none; }
  html[data-nav-rail="on"] .rk-panel .nav-subgroup{ margin-top:2px; }

  /* the switch */
  html[data-nav-rail="on"] .rk-swrow{
    display:flex; align-items:center; gap:10px; flex:none;
    padding:11px 16px; white-space:nowrap; cursor:pointer;
    border-top:1px solid rgba(255,255,255,.08);
    user-select:none;
  }
  html[data-nav-rail="on"] .rk-swlbl{ color:#8fb3cb; font-size:11px; font-weight:700; flex:1; }
  html[data-nav-rail="on"] .rk-swrow:hover .rk-swlbl{ color:#d6e9f7; }
  html[data-nav-rail="on"] .rk-sw{
    width:34px; height:19px; border-radius:99px; flex:none; position:relative;
    background:rgba(255,255,255,.14);
    transition:background var(--t-fast,120ms) var(--e-out,ease-out);
  }
  html[data-nav-rail="on"] .rk-sw::after{
    content:""; position:absolute; top:2px; left:2px; width:15px; height:15px;
    border-radius:50%; background:#8fa8bc;
    transition:transform var(--t-fast,120ms) var(--e-out,ease-out),
               background var(--t-fast,120ms) var(--e-out,ease-out);
  }
  html[data-nav-rail="on"] .rk-swrow.on .rk-sw{ background:rgba(125,211,252,.38); }
  html[data-nav-rail="on"] .rk-swrow.on .rk-sw::after{ transform:translateX(15px); background:#eaf6ff; }

  /* BEATS the inline style="margin-top:auto" on .sidebar-legal in index.html:223
     - inside a flex panel it no longer needs to push itself down. */
  html[data-nav-rail="on"] .rk-panel .sidebar-legal{
    margin-top:0; flex:none; padding:11px 16px 13px; font-size:10.5px; line-height:1.85;
  }
}

/* Reduced motion: the rail should not animate at all. */
@media (prefers-reduced-motion:reduce){
  html[data-nav-rail="on"] .rk-rail button,
  html[data-nav-rail="on"] .rk-rail button > img,
  html[data-nav-rail="on"] .rk-tip,
  html[data-nav-rail="on"] .rk-sw,
  html[data-nav-rail="on"] .rk-sw::after{ transition:none; }
}

/* ── BELOW THE BREAKPOINT: TAKE OUR CHROME BACK OUT ──────────────────────────
   Mobile keeps RMS's own off-canvas drawer, and everything above is gated on
   min-width:1181px so none of it applies there. But the ELEMENTS still exist in
   the DOM, and an unstyled rail is still a rail: measured at 1000px wide, 11
   rail buttons rendered at 161x85 each, plus the panel title and the switch -
   277px of this file's furniture pushed into the top of the drawer.
   So the only thing this block does is hide what this file added. It changes
   nothing of RMS's: .rk-brand stays visible because it is carrying the real
   .logo and .sublogo, which the drawer has always shown. */
@media (max-width:1180px){
  html[data-nav-rail="on"] .rk-rail,
  html[data-nav-rail="on"] .rk-mark,
  html[data-nav-rail="on"] .rk-ptitle,
  html[data-nav-rail="on"] .rk-swrow{ display:none; }
}