/* V3.10: a clear glass bead centred on the rail's outer right edge.
   The 44px control stays inside the rail's inert/focus scope, but outside its
   content clip. Its 36px circular face stays circular when idle. */
:root {
  --orb-fill: rgba(255, 255, 255, .12);
  --orb-hover: rgba(255, 255, 255, .22);
  --orb-ink: #203e2c;
  --orb-rim: rgba(255, 255, 255, .72);
  --orb-rim-low: rgba(255, 255, 255, .22);
  --orb-shadow: rgba(26, 54, 37, .38);
  --orb-highlight: rgba(255, 255, 255, .9);
  --orb-focus: #75827d;
}
:root[data-theme="graphite"] {
  --orb-fill: rgba(224, 247, 235, .08);
  --orb-hover: rgba(224, 247, 235, .15);
  --orb-ink: #f0fff5;
  --orb-rim: rgba(237, 255, 247, .60);
  --orb-rim-low: rgba(223, 255, 237, .14);
  --orb-shadow: rgba(0, 13, 7, .68);
  --orb-highlight: rgba(255, 255, 255, .72);
  --orb-focus: #aab7ae;
}

.side-rail > .rail-toggle {
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--orb-ink); background: transparent;
  opacity: 1; transition: none;
  isolation: isolate; cursor: pointer;
  touch-action: manipulation; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.side-rail > .rail-toggle[hidden] { display: none !important; }
.side-rail > .rail-toggle[data-edge-idle="true"] { opacity: .6; transition: opacity 180ms ease; }
.side-rail > .rail-toggle:hover,
.side-rail > .rail-toggle:focus-within { opacity: 1; transition: none; }
.side-rail > .rail-toggle::before {
  content: ""; position: absolute; inset: 4px;
  z-index: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--orb-rim);
  border-bottom-color: var(--orb-rim-low);
  background-color: var(--orb-fill);
  background-image: linear-gradient(145deg, /* taste-skill-ignore: user-requested optical reflection on this non-reading control. */
    rgba(255, 255, 255, .28), rgba(255, 255, 255, .025) 42%,
    transparent 58%, rgba(220, 255, 235, .13));
  -webkit-backdrop-filter: blur(8px) saturate(1.55);
  backdrop-filter: blur(8px) saturate(1.55);
  box-shadow: 0 6px 15px -5px var(--orb-shadow), inset 0 1px 1px var(--orb-highlight);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}
.side-rail > .rail-toggle::after {
  content: ""; position: absolute; inset: 5px;
  z-index: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 23% at 34% 13%, rgba(255, 255, 255, .86), transparent 74%), /* taste-skill-ignore: user-requested upper specular highlight. */
    radial-gradient(ellipse 42% 18% at 72% 87%, rgba(172, 248, 208, .42), transparent 80%); /* taste-skill-ignore: user-requested lower glass reflection. */
  opacity: .72;
  transition: opacity 180ms ease, transform 240ms ease;
}
.side-rail > .rail-toggle svg {
  position: relative; z-index: 2;
  width: 18px; height: 18px;
  stroke-width: 1.9; pointer-events: none;
}
.side-rail > .rail-toggle:focus-visible {
  outline: 2px solid var(--orb-focus); outline-offset: 1px;
}
@media (hover: hover) {
  .side-rail > .rail-toggle:hover::before {
    background-color: var(--orb-hover);
    box-shadow: 0 8px 18px -5px var(--orb-shadow), inset 0 1px 1px var(--orb-highlight);
  }
  .side-rail > .rail-toggle:hover::after { opacity: 1; transform: rotate(-8deg); }
}
.side-rail > .rail-toggle:active::before { transform: scale(.93); }

@media (min-width: 651px) {
  .side-rail { overflow: visible; }
  .side-rail::before { border-radius: inherit; }
  .side-rail > .rail-scroll {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-self: stretch; width: 100%;
    flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow: hidden;
  }
  .side-rail > .rail-toggle {
    position: absolute; z-index: 3;
    /* Absolute percentages use the padding box; cross the 1px right border. */
    left: calc(100% + 5px); right: auto;
    top: 36px; bottom: auto;
    transform: translate(-50%, -50%);
  }
}
.side-rail > .rail-scroll > * { position: relative; z-index: 2; }
@media (min-width: 651px) and (max-height: 560px) {
  .side-rail > .rail-scroll { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 650px) {
  .side-rail > .rail-scroll { display: contents; }
  .side-rail > .rail-toggle { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side-rail > .rail-toggle::before,
  .side-rail > .rail-toggle:hover::before {
    background: var(--raised); border-color: var(--control);
    box-shadow: 0 4px 12px -6px var(--orb-shadow);
  }
  .side-rail > .rail-toggle { color: var(--ink); }
  .side-rail > .rail-toggle::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .side-rail > .rail-toggle { color: var(--ink); }
  .side-rail > .rail-toggle::before,
  .side-rail > .rail-toggle:hover::before {
    background: var(--raised); border-color: var(--control); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .side-rail > .rail-toggle::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side-rail > .rail-toggle[data-edge-idle] { transition: none; }
  .side-rail > .rail-toggle::before,
  .side-rail > .rail-toggle:hover::before,
  .side-rail > .rail-toggle:active::before,
  .side-rail > .rail-toggle::after,
  .side-rail > .rail-toggle:hover::after { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .side-rail > .rail-toggle[data-edge-idle] { opacity: 1; transition: none; }
}
@media (forced-colors: active) {
  .side-rail > .rail-toggle {
    color: ButtonText; background: ButtonFace; border: 1px solid ButtonText;
    forced-color-adjust: auto;
  }
  .side-rail > .rail-toggle::before,
  .side-rail > .rail-toggle::after { display: none; }
  .side-rail > .rail-toggle:focus-visible { outline-color: Highlight; }
}