@media screen {
  .sidebar { touch-action: pan-y pinch-zoom; }
}

@media screen and (width > 700px) {
  html {
    --sidebar-expanded-width: 254px;
    --sidebar-compact-width: 76px;
    --sidebar-width: var(--sidebar-expanded-width);
    --sidebar-top: 16px;
    --sidebar-logo-width: 144px;
    --sidebar-motion: 360ms cubic-bezier(.25, .8, .25, 1);
  }
  html[data-sidebar-collapsed='true'] { --sidebar-width: var(--sidebar-compact-width); }

  .sidebar {
    width: var(--sidebar-drag-width, var(--sidebar-width));
    overflow-x: hidden;
    scrollbar-width: none;
    container: mgf-sidebar / inline-size;
    padding-top: var(--sidebar-top);
    transition: width var(--sidebar-motion), padding-inline var(--sidebar-motion);
  }
  .sidebar > nav { overflow: visible; }
  .workspace {
    margin-left: var(--sidebar-drag-width, var(--sidebar-width));
    transition: margin-left var(--sidebar-motion);
  }

  /* Use the same layers as the intro so the letters can retreat behind the +. */
  .sidebar > .brand { width: 100%; }
  .sidebar > .brand .brand-artwork {
    width: var(--sidebar-logo-width);
    grid-area: 1 / 1;
    transition: transform var(--sidebar-motion);
  }
  .sidebar .brand-artwork > .brand-lockup { visibility: hidden; }
  .sidebar .brand-artwork > .brand-reveal { display: block; }
  .sidebar .brand-reveal-wordmark {
    transform: translate3d(0, 0, 0);
    transition: transform var(--sidebar-motion);
  }
  html[data-brand-intro] .sidebar .brand-reveal-wordmark { transform: translate3d(-100%, 0, 0); }

  .sidebar nav a > span:last-child {
    min-width: 0;
    transition: opacity 180ms ease, transform var(--sidebar-motion);
  }
  .sidebar nav a {
    position: relative;
    transition: padding-inline var(--sidebar-motion);
  }
  .sidebar nav .nav-group { transition: margin-top var(--sidebar-motion), padding-top var(--sidebar-motion); }

  html[data-sidebar-collapsed='true'] .sidebar { padding-inline: 10px; column-gap: 0; }
  html[data-sidebar-collapsed='true'] .sidebar .brand-artwork { transform: translateX(49px); }
  html[data-sidebar-collapsed='true'] .sidebar .brand-reveal-wordmark { transform: translate3d(-100%, 0, 0); }
  .sidebar .sidebar-controls .sidebar-search-box {
    gap: 6px;
    height: 44px;
    margin-top: 6px;
    padding: 0 6px;
    overflow: hidden;
    transition: height var(--sidebar-motion);
  }
  .sidebar .sidebar-controls .sidebar-search {
    min-width: 0;
    gap: 8px;
    padding-inline: 8px;
    overflow: hidden;
    white-space: nowrap;
  }
  .sidebar .sidebar-controls .sidebar-search svg { flex: none; width: 16px; height: 16px; }
  .sidebar .sidebar-controls .sidebar-search span { font-size: .8125rem; }
  .sidebar .sidebar-controls :is(.sidebar-search, .theme-toggle):focus-visible { outline-offset: -3px; }
  @container mgf-sidebar (max-width: 114px) {
    .sidebar .sidebar-controls .sidebar-search-box {
      flex-direction: column;
      justify-content: flex-start;
      justify-self: start;
      width: min(100%, 55px);
      height: 88px;
      gap: 5px;
      padding: 4px;
    }
    .sidebar .sidebar-controls .sidebar-search {
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      min-height: 36px;
      justify-content: center;
      padding: 0;
    }
    .sidebar .sidebar-controls .sidebar-search span { display: none; }
    .sidebar .sidebar-controls .theme-toggle {
      flex: 0 0 36px;
      width: 36px;
      min-width: 36px;
      height: 36px;
    }
    .sidebar .theme-toggle-track {
      inset: 0;
      grid-template-columns: 1fr;
    }
    .sidebar .theme-toggle svg {
      width: 17px;
      height: 17px;
      color: var(--muted);
    }
    .sidebar :is(.theme-toggle-thumb, .theme-moon),
    html[data-theme='dark'] .sidebar .theme-sun { display: none; }
    html[data-theme='dark'] .sidebar .theme-moon { display: block; }
  }

  .sidebar nav .nav-group-toggle {
    min-height: 0;
    height: 44px;
    overflow: hidden;
    white-space: nowrap;
    transition: height var(--sidebar-motion), padding-block var(--sidebar-motion),
      opacity 150ms ease, visibility 150ms;
  }
  @container mgf-sidebar (max-width: 100px) {
    .sidebar nav .nav-group-toggle {
      height: 0;
      padding-block: 0;
      visibility: hidden;
    }
    .sidebar nav .nav-group { margin-top: 7px; padding-top: 5px; }
    .sidebar nav a { padding-inline: 16px 0; }
    .sidebar nav a > span:last-child { display: none; }
  }

  html[data-sidebar-dragging] :is(.sidebar, .workspace, .sidebar .brand-artwork, .sidebar .brand-reveal-wordmark) {
    transition: none;
  }
  html[data-sidebar-dragging] .sidebar .brand-artwork {
    transform: translateX(calc(49px * (1 - var(--sidebar-drag-progress))));
  }
  html[data-sidebar-dragging] .sidebar .brand-reveal-wordmark {
    transform: translate3d(calc(-100% * (1 - var(--sidebar-drag-progress))), 0, 0);
  }

  /* Keep rows at a stable height even if the user pauses mid-gesture. */
  @container mgf-sidebar (max-width: 210px) {
    .sidebar nav a > span:last-child,
    .sidebar nav .nav-group-toggle > span {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  html[data-sidebar-dragging] .sidebar nav a > span:last-child,
  html[data-sidebar-dragging] .sidebar nav .nav-group-toggle {
    opacity: clamp(0, (var(--sidebar-drag-progress) - .55) * 3, 1);
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html { --sidebar-motion: 0s; }
    .sidebar :is(nav a > span:last-child, .sidebar-search span, .nav-group-toggle) { transition: none; }
  }
}

@media screen and (orientation: landscape) and (pointer: coarse) and (width > 700px) {
  .sidebar { padding-top: 8px; }
  html[data-theme] .sidebar .sidebar-controls .sidebar-search-box { margin-top: 4px; }
}