/* THE RIGHT-EDGE BAR AND ITS SLIDE-OUT, one stylesheet for every floor page.
   Colours come from the board's palette variables with the board's own values
   as fallbacks, the same arrangement nav/nav.css uses, so the bar looks like
   the desk on any chrome without that chrome adopting a palette. */

/* The page gives the bar its 44 pixels the way it gives the nav its 56: one
   class on <html>, written by rightbar.js, read by CSS. */
/* No transition on the padding: the push lands in one layout pass, so the chart
   measures its final box on the first resize call and a background tab (which
   ticks no animation frames) is never caught between two widths. */
html.hasrbar body { padding-right: calc(44px + env(safe-area-inset-right)); }

/* THE OPEN DRAWER PUSHES THE PAGE (navigator ruling 2026-09-06). The slide-out
   used to sit OVER the page, and with it open it covered the chart's price
   axis and price tag: Kevin's "the scale is wrong after a symbol switch" is
   most likely this, a scale he could not see. So the page now gives the open
   drawer its width the way it gives the bar its 44 pixels: one class on
   <html>, written by rightbar.js, read here. The chart re-measures itself on
   the event rightbar.js fires (shell.js), so the axis stays at the chart's
   right edge, in view. The push matches the drawer's own width rule below,
   including the narrow-viewport clamp. */
html.hasrbar.rpanel-open body { padding-right: calc(44px + env(safe-area-inset-right) + min(420px, 100vw - 100px)); }

/* The env() insets (R15d): an iPhone on its side puts its notch at this edge
   in the home-screen app; zero everywhere else. */
#rbar {
  position: fixed; top: 0; right: 0; bottom: 0; width: calc(44px + env(safe-area-inset-right)); z-index: 40;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: calc(10px + env(safe-area-inset-top)) calc(4px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) 4px;
  background: var(--sidebar);
  border-left: 1px solid var(--line);
  box-sizing: border-box;
}
#rbar .rtab {
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 0; min-height: 96px; cursor: pointer;
  font: 700 11px/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase;
}
#rbar .rtab:hover { color: var(--text); border-color: var(--muted); }
#rbar .rtab.on {
  background: var(--panel); color: var(--text); border-color: var(--cyan);
}
/* THE PHONE TABS (Chart, Lists, Plan) wait for the 860px rule below; the
   desk-only ones (Watchlist, Research, Positions) step aside there. */
#rbar .rtab.phone { display: none; }

/* THE SLIDE-OUT is fixed at the right edge beside the bar. It first shipped
   OVER the page (Kevin's words were "open up over"), which hid the chart's
   price axis whenever it was open; since 2026-09-06 the page is pushed by the
   same width (the html.rpanel-open rule above), so nothing on the chart sits
   under it. */
#rpanel {
  position: fixed; top: 0; right: calc(44px + env(safe-area-inset-right)); bottom: 0; width: 420px; max-width: calc(100vw - 100px);
  z-index: 39; box-sizing: border-box;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--drawer-edge);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease-out;
  color: var(--text);
  font: 13px/1.45 var(--font);
}
#rpanel.open { transform: translateX(0); }
#rpanel[hidden] { display: none; }
#rpanel .rpanel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
#rpanel-close {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius); padding: 2px 8px; cursor: pointer; font-size: 12px;
}
#rpanel-close:hover { color: var(--text); border-color: var(--muted); }
#rpanel-body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; min-height: 0; }
.rtabpane[hidden] { display: none; }
/* A rail panel moved into the drawer keeps its own .panel styling; the drawer
   only removes the outer border because the drawer IS the border now. */
#rtab-host > .panel { border: 0; padding: 0; background: transparent; }
#rtab-missing { font-size: 12px; }
/* The placeholder left behind in the rail while a panel is in the drawer. */
.rplaceholder {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px;
  color: var(--muted); font-size: 11.5px; margin-bottom: 14px;
}

/* UNDER 860px THE DRAWERS LIE OVER THE PAGE. Pushing a 400px page by a 300px
   drawer leaves a sliver nobody can read, so at this width the page keeps its
   own width and the drawer covers it up to the bar. The seat chat follows
   the same rule in its own template. */
@media (max-width: 860px) {
  html.hasrbar.rpanel-open body { padding-right: calc(44px + env(safe-area-inset-right)); }
  #rpanel { left: 0; width: auto; max-width: none; }
  /* The five tabs the desk becomes at this width (round 4, item 1). */
  #rbar .rtab.desk { display: none; }
  #rbar .rtab.phone { display: block; }
}

/* ON A PHONE (under 640px) THE BAR IS A BOTTOM TAB BAR and the drawer is a
   bottom sheet above it. A 44px column on a 390px screen took a ninth of the
   width from the chart and its rotated labels were not tappable; the four tabs
   sit across the bottom instead, each at least 44px tall, and the sheet slides
   up over the page to 70 percent of the screen with the bar still in reach. */
@media (max-width: 640px) {
  html.hasrbar body { padding-right: 0; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* A row scrolled into view lands above the bar, not under it. */
  html.hasrbar { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.hasrbar.rpanel-open body { padding-right: 0; }
  #rbar {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: calc(56px + env(safe-area-inset-bottom));
    flex-direction: row; gap: 6px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-left: 0; border-top: 1px solid var(--line);
  }
  #rbar .rtab {
    writing-mode: horizontal-tb; transform: none; flex: 1 1 0; min-height: 44px;
    padding: 0; font-size: 12px; letter-spacing: .04em;
  }
  .rplaceholder, #rtab-missing, #rpanel-close { font-size: 12px; }
  #rpanel-close { min-width: 40px; min-height: 40px; }
  #rpanel {
    top: auto; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
    width: auto; max-width: none; height: 70vh;
    border-left: 0; border-top: 1px solid var(--line2);
    box-shadow: var(--shadow);
    transform: translateY(110%);
  }
  #rpanel.open { transform: translateY(0); }
}

/* B50 part 3 (Kevin 2026-10-02): base.html includes this bar on every document page too. On
   a phone those pages keep their bottom nav and its Watch tab; the rule that hides the bar
   there sits with the phone bar's own rules (nav/tabbar.css, the 768px block). */