/* The related-guides/tools/references drawer — shared by every tool and
 * reference asset. Loaded through extra_head alongside the tool theme, whose
 * tokens it reads; it defines none of its own and declares nothing globally.
 *
 * EVERYTHING HERE FLOATS. The tab and the panel are both viewport-fixed, so
 * opening the drawer moves nothing underneath it — a table keeps its scroll
 * position, its frozen panes and its column widths.
 */

/* ---------- the panel, and the rail that is its edge ---------- */
/* THE RAIL IS THE PANEL'S RIGHT EDGE, at `left: 100%` inside it. Everything
   follows from that. The panel can size itself to its own widest line, because
   nothing has to be told how far the rail should travel — it travels because it
   is attached. Closed, the panel sits at translateX(-100%), which puts its right
   edge on x=0 and therefore the rail exactly where a rail belongs; open, it
   slides to 0 and carries the rail out with it.
   All of it hangs off `.app`, sharing its `--rd-top` — the tool sub-bar's own
   height — so the panel starts below the tool header (Manu: both headers stay
   visible) and the rail begins on the same line, without this file ever being
   told how tall the site header is. */
.rd-rail { --rd-rail: 34px; --rd-top: 46px; position: relative; }
.rd-rail > .ref-wrap { margin-left: var(--rd-rail); }

.rd-scrim { position: absolute; left: 0; right: 0; top: var(--rd-top); bottom: 0;
  z-index: 118; background: rgba(0,0,0,.34);
  opacity: 0; transition: opacity .2s ease; }
.rd-scrim.on { opacity: 1; }

.rd-panel { position: absolute; left: 0; top: var(--rd-top); bottom: 0; z-index: 120;
  /* AS WIDE AS ITS WIDEST LINE (Manu) — capped, and floored so a short list
     still reads as a panel rather than a sliver. */
  width: max-content; min-width: 210px; max-width: min(70vw, 460px);
  background: var(--surface); box-shadow: 6px 0 40px rgba(0,0,0,.34);
  transform: translateX(-100%); transition: transform .22s ease; }
.rd-panel.on { transform: translateX(0); }

/* Off-screen is not hidden: without this the links stay in the tab order and
   are read out while the drawer is shut. */
.rd-body { visibility: hidden; height: 100%; overflow: auto; padding: 16px 0 22px; }
.rd-panel.on .rd-body { visibility: visible; }

/* ---------- the rail ---------- */
/* The page's own background with the LABEL carrying the gradient, clipped to
   the glyphs — bigger and wider-tracked than a caption, because it is the only
   thing naming the drawer now that the header bar is gone (Manu). */
.rd-tab { position: absolute; left: 100%; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: var(--rd-rail); padding: 0; border: 0;
  border-right: 1px solid var(--line);
  background: var(--bg, var(--paper)); cursor: pointer;
  transition: background .16s ease; }
.rd-tab:hover, .rd-tab:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg, var(--paper))); }
.rd-panel.on .rd-tab { border-right-color: transparent; }

.rd-tab-t { writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; }

/* The open/close glyph: the drawer's outline, its edge, and a chevron facing
   the way the rail will travel — so the rail itself says whether clicking opens
   or closes. It replaces the panel's old close button, gone with its gradient
   header.

   IT IS A MASK, NOT AN <svg>. That is what lets it be a plain grey outline at
   rest and the THEME's own gradient on hover: a gradient cannot be painted onto
   an SVG stroke from CSS, so the shape masks a background instead, and the
   background is then whatever colour or gradient the state calls for. */
.rd-tab-i { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9.5%204v16%22%2F%3E%3Cpath%20d%3D%22M14%209.5l2.5%202.5L14%2014.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9.5%204v16%22%2F%3E%3Cpath%20d%3D%22M14%209.5l2.5%202.5L14%2014.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transition: background .16s ease, transform .22s ease; }
.rd-tab:hover .rd-tab-i, .rd-tab:focus-visible .rd-tab-i { background: var(--gradient); }
.rd-panel.on .rd-tab-i { transform: translateX(-50%) rotate(180deg); }

.rd-group { padding: 14px 20px 4px; }
.rd-group h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep); }
.rd-group ul { list-style: none; margin: 0; padding: 0; }
.rd-group li { margin-bottom: 4px; }

/* THE SAME BUTTON THE DASHBOARD SIDEBAR USES — muted pill, accent tint and a
   lift on hover, gradient fill for the one you are on. Names only (Manu): a
   drawer is for getting somewhere, and a paragraph under each name turns a
   glance into a read. */
.rd-item { display: block; padding: 10px 13px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
a.rd-item:hover, a.rd-item:focus-visible {
  background: var(--accent-tint); color: var(--accent-ink); transform: translateY(-1px); }
.rd-item.is-here { background: var(--gradient); color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .rd-panel, .rd-scrim, .rd-tab, .rd-item { transition: none; }
}
@media (max-width: 720px) {
  .rd-rail { --rd-rail: 28px; }
  .rd-tab-t { font-size: 9.5px; letter-spacing: .22em; }
  .rd-panel { max-width: 78vw; }
}