// RetroCSS Sidebar Component
//
// The sidebar is a *panel*, in the Win9x sense: one raised chassis with a title
// bar across the top and its contents stacked inside it. Everything within is
// separated by hairlines and bands, not by more boxes — a framed nav inside a
// framed panel inside a framed column is three borders saying the same thing.
.retro-sidebar {
  background: var(--retro-sidebar-bg);
  // The framework's raised-panel idiom, the same one .retro-nav-vertical uses:
  // a dark outer edge with the light source at the top-left.
  border: 2px solid var(--retro-border-dark);
  box-shadow:
    inset 1px 1px 0 var(--retro-border-light),
    inset -1px -1px 0 var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  padding: var(--retro-spacing-md, 16px);
  width: 100%;
  height: auto;
  position: static;
  transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease;
  color: var(--retro-sidebar-text);

  // Widgets stack with one rhythm. Without this every consumer invents its own
  // margin and the column reads as a pile of unrelated boxes.
  > * + * {
    margin-top: var(--retro-spacing-md);
  }

  // Sidebar header: a title bar, bled to the panel edges, painted like the one
  // over a code block so the two read as the same chrome.
  &-header {
    margin:
      calc(var(--retro-spacing-md) * -1)
      calc(var(--retro-spacing-md) * -1)
      var(--retro-spacing-md);
    padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
    background: linear-gradient(
      to bottom,
      var(--retro-primary) 0%,
      var(--retro-primary-hover) 100%
    );
    color: var(--retro-primary-fg);
    font-weight: var(--retro-font-weight-bold);
    font-size: var(--retro-font-size-sm);
    border-bottom: 2px solid var(--retro-border-dark);
    // Pinned inside the panel's own scroll: a window keeps its title bar when
    // you scroll its contents. The offset cancels the panel's padding, which
    // the bled margin above has already stepped over.
    position: sticky;
    top: calc(var(--retro-spacing-md) * -1);
    z-index: 2;
  }

  // Sidebar sections
  &-section {
    margin-bottom: var(--retro-spacing-md, 16px);

    &-title {
      font-weight: bold;
      margin-bottom: var(--retro-spacing-xs, 4px);
      font-size: var(--retro-font-size-sm);
      color: var(--retro-text-muted);
    }
  }

  // The panel is the frame. A nav or a list inside it is content, so it spans
  // the panel and draws no box of its own.
  .retro-nav-vertical,
  .retro-list {
    width: 100%;
    max-width: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
  }

  // Rows, not paragraphs. At the base padding a forty-link contents ran 1500px
  // and the panel had to grow a scrollbar to hold it.
  .retro-nav-vertical .retro-nav-item {
    padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
    font-size: var(--retro-font-size-sm);
    background: transparent;
  }
  .retro-nav-vertical .retro-nav-item:hover {
    background: var(--retro-light);
  }
  // The transparent background above is more specific than .retro-nav-item's
  // own state rules, so it stripped the fill off the current row while leaving
  // the on-fill text colour behind: white on the light panel, 1.14:1. The state
  // is restored at the specificity that removed it.
  .retro-nav-vertical .retro-nav-item.active,
  .retro-nav-vertical .retro-nav-item[aria-current]:not([aria-current="false"]) {
    background: var(--retro-primary);
    color: var(--retro-primary-fg);
  }

  // Active indication
  .active {
    font-weight: bold;
    color: var(--retro-primary-text);
  }

  // Nested navigation
  ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin-bottom: 0;

      ul, ol {
        padding-inline-start: 16px;
        margin-top: 0;
      }
    }
  }

  // Desktop styles
  @media (min-width: 768px) {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: var(--retro-spacing-md);
    // Capped, not filled. `height: calc(100vh - 32px)` stretched every sidebar
    // to the full viewport, so a short contents list sat at the top of a tall
    // empty panel, and a long one scrolled inside a box that gave no sign it
    // could. It is content-height until it would leave the screen.
    max-height: calc(100vh - var(--retro-spacing-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/// A panel that scrolls gets a scrollbar drawn in the same language as the
/// panel: square, grey, bevelled. The platform default — a thin modern
/// overlay bar — read as a piece of another operating system stapled to the
/// inside edge of a 1995 window.
.retro-sidebar {
  scrollbar-width: auto;
  scrollbar-color: var(--retro-light) var(--retro-bg);

  &::-webkit-scrollbar {
    width: 16px;
  }
  &::-webkit-scrollbar-track {
    background: var(--retro-bg);
    border-inline-start: 1px solid var(--retro-border-medium);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--retro-light);
    border: 1px solid var(--retro-border-dark);
    box-shadow:
      inset 1px 1px 0 var(--retro-border-light),
      inset -1px -1px 0 var(--retro-border-medium);
  }
  &::-webkit-scrollbar-thumb:active {
    box-shadow:
      inset 1px 1px 0 var(--retro-border-medium),
      inset -1px -1px 0 var(--retro-border-light);
  }
  // The corner between two bars, on the rare panel that scrolls both ways.
  &::-webkit-scrollbar-corner {
    background: var(--retro-bg);
  }
}

// The mobile drawer that used to live here -- .retro-sidebar-toggle, its
// hamburger icon and .retro-sidebar-overlay -- is gone. It had been dead three
// times over: sidebar.js was deleted in the 3.0 cleanup so nothing toggled the
// .active class, and a "legacy classes" rule at the end of the block set
// `display: none` on both, unconditionally overriding the fifty lines above it
// at every viewport. On narrow screens the sidebar stacks above the content,
// which is what actually happens today and works.

/// The sidebar's link lists are navigation, not prose: the base `ul` rule adds
/// list markers and inline padding that do not belong here.
.retro-sidebar nav ul {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

/// Small caps label that separates groups of links in a long sidebar.
///
/// Inside a panel this is a header *band*, bled to the panel's edges the way
/// Explorer ruled off a group of items — not a caption floating above a box,
/// and not a box of its own.
.retro-sidebar-group {
  margin: 0;
  padding: var(--retro-spacing-xs) var(--retro-spacing-md);
  font-size: var(--retro-font-size-xs);
  font-weight: var(--retro-font-weight-bold);
  text-transform: uppercase;
  // No letter-spacing: uppercase and bold already carry the emphasis, and the
  // tracking is what made these read as grey noise rather than as labels.
  color: var(--retro-text-muted);
  background: var(--retro-bg);
  border-top: 1px solid var(--retro-border-medium);
  border-bottom: 1px solid var(--retro-border-medium);
}

/// Bled to the panel edges, so a band rules right across the column.
.retro-sidebar .retro-sidebar-group {
  margin-inline: calc(var(--retro-spacing-md) * -1);
}

/// The first band under the title bar needs no rule above it: the title bar is
/// already an edge.
.retro-sidebar > *:first-child .retro-sidebar-group:first-child,
.retro-sidebar-header + * .retro-sidebar-group:first-child {
  border-top: 0;
}

// Sections are dividers within one panel, not separate panels, so they must not
// add vertical gaps that break the column.
.retro-sidebar .retro-sidebar-section,
.retro-nav-vertical .retro-sidebar-section {
  margin-bottom: 0;
}