/* Desktop navigation reveals at the left edge without shifting the page. */
#nav-reveal { display: none; }
@media screen and (min-width: 681px) and (hover: hover) and (pointer: fine) {
  #main { margin-left: 0; }
  #sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease .25s;
    box-shadow: 12px 0 28px #0005;
    z-index: 32;
  }
  #nav-reveal {
    display: block;
    position: fixed;
    top: var(--header);
    bottom: 0;
    left: 0;
    width: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    z-index: 31;
    cursor: pointer;
  }
  #nav-reveal::after {
    content: '\203a';
    position: absolute;
    top: 40%;
    left: 0;
    width: 12px;
    height: 48px;
    line-height: 46px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    color: var(--accent);
    background: var(--panel);
    font-size: 21px;
  }
  #nav-reveal:hover ~ #sidebar,
  #nav-reveal:focus-visible ~ #sidebar,
  #sidebar:hover {
    transform: translateX(0);
    transition-delay: 0s;
  }
  #sidebar:has(:focus-visible) {
    transform: translateX(0);
    transition-delay: 0s;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  #sidebar { transition: none; }
}