/* ================================================================
   sidebar-rail.css — Floating rail · unified rhythm · tooltips  v4

   PURE SKIN over theme.css. Desktop only (<=768px untouched).
   DESIGN CONTRACT:
     · Sidebar = floating card, 12px off every edge.
     · ONE spacing rhythm in BOTH sidebar modes: the visual gap on
       every side of the content equals the studio grid gap
       (--space-grid, 18px). The sidebar-adjacent edge subtracts the
       rail margin (12px) so the VISUAL gap still measures 18px.
     · Topbar follows the same horizontal rhythm; its hairline spans
       the page body width and lands at y=73px — the exact level of
       the sidebar head divider (12 margin + 1 border + 60 head). Rail-edge subtract removed - full 18px pad reads better next to the card.
     · Only difference between modes: expanded keeps --content-max
       (1280px); collapsed goes full width.
   ROLLBACK: delete the <link>+<script> lines in base.html.
   ================================================================ */
@media (min-width: 769px){

  /* ── Sidebar card ── */
  .sidebar{
    margin: 12px;
    height: calc(100vh - 24px);
    top: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    /* no overflow:hidden — corners stay rounded (bg+border live on
       .sidebar) and tooltips must not be clipped */
  }
  html[dir="rtl"] .sidebar{
    border: 1px solid var(--border);   /* theme RTL rule zeroed one side */
  }

  /* ── ONE rhythm, BOTH modes ── */
  html{ --content-pad: var(--space-grid); }          /* 18px everywhere */
  html.sb-collapsed{ --content-max: 9999px; }        /* collapsed = full width */

  .main-content{
    padding-top: var(--space-grid);
    padding-left: var(--space-grid);    /* + rail margin = 18 visual */
  }
  html[dir="rtl"] .main-content{
    padding-left: var(--content-pad);
    padding-right: var(--space-grid);
  }

  /* ── Topbar: same rhythm + aligned hairline ── */
  .topbar{
    border-bottom: 0;
    position: relative;
    height: calc(var(--topbar-h) + 13px);            /* line at 73px = sidebar level */
    padding-left: calc(max(var(--content-pad), calc((100% - var(--content-max) + var(--content-pad) * 2) / 2)) - 14px);  /* measured 14.0px */
  }
  html[dir="rtl"] .topbar{
    padding-left: max(var(--content-pad),
                      calc((100% - var(--content-max) + var(--content-pad) * 2) / 2));
    padding-right: max(var(--content-pad),
                       calc((100% - var(--content-max) + var(--content-pad) * 2) / 2));
  }
  .topbar::after{
    content:""; position:absolute; bottom:0; height:1px;
    background: var(--border);
    left: calc(max(var(--content-pad), calc((100% - var(--content-max) + var(--content-pad) * 2) / 2)) - 14px);  /* measured 14.0px */
    right: max(var(--content-pad),
               calc((100% - var(--content-max) + var(--content-pad) * 2) / 2));
  }
  html[dir="rtl"] .topbar::after{
    left: max(var(--content-pad),
              calc((100% - var(--content-max) + var(--content-pad) * 2) / 2));
    right: max(var(--content-pad),
               calc((100% - var(--content-max) + var(--content-pad) * 2) / 2));
  }

}

/* ── Studio height model follows the new rhythm: taller topbar (73)
      + 18 top pad + 12 bottom gap (= the sidebar bottom margin). ── */
@media (min-width: 841px){
  .studio-layout{
    height: calc(100vh - var(--topbar-h) - 13px - var(--space-grid) - 12px) !important;
  }
}

/* ── Collapsed-rail tooltip card (managed by sidebar-rail.js;
      fixed positioning — immune to any overflow clipping) ── */
.wr-rail-tip{
  position: fixed; top: 0; left: 0;
  transform: translateY(-50%) scale(.96);
  background: var(--heading); color: var(--bg);   /* inverted - max contrast in both themes */
  border: 0; border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .12s ease, transform .12s ease;
}
.wr-rail-tip.is-on{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}