@layer components {
  /* Sidebar Component Navigation
     ========================================================================== */

  .sidebar {
    padding: 30px 30px;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .sidebar ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
  }

  .sidebar .divider {
    border-bottom: var(--border);
    padding: 10px 0;
    margin-bottom: 20px;
  }

  .sidebar__item {
    padding: 10px 0;
    display: flex;
    gap: 1em;
    align-items: center;
    width: 100%;
    color: var(--color-ink-dark) !important;

    > i,
    > .avatar {
      inline-size: 1.5em;
      text-align: center;
      flex-shrink: 0;
    }
  }

  /* App Navigation (slide-over menu)
     ========================================================================== */

  .app-nav {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding-block: var(--block-space);
  }

  .app-nav__section {
    padding-block: var(--block-space-half);

    &:has(+ .app-nav__section) {
      border-block-end: var(--border);
    }
  }

  .app-nav__label {
    display: block;
    font-size: var(--font-small-responsive);
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-inline: var(--inline-space);
    margin-block-end: var(--block-space-half);
  }

  .app-nav__group {
    display: flex;
    flex-direction: column;
  }

  .app-nav__item {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--border-radius);
    color: var(--color-ink-dark);
    text-decoration: none;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    width: 100%;
    text-align: start;

    &:hover {
      background-color: var(--color-gray-light);
      color: var(--color-ink-dark);
    }

    > i {
      flex-shrink: 0;
      inline-size: 1.5em;
      text-align: center;
      color: var(--color-gray-dark);
    }

    > span {
      flex-grow: 1;
    }
  }

  /* News indicator dot on nav items */
  .app-nav__item.has-news > span {
    position: relative;
    flex-grow: 0;
    inline-size: fit-content;

    &::after {
      --size: 0.5em;
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: calc(var(--size) * -1.3);
      inline-size: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: var(--color-blue);
    }
  }

  .app-nav__item--subtle {
    color: var(--color-gray-dark);

    &:hover {
      color: var(--color-ink-dark);
    }
  }

  /* User profile section */
  .app-nav__user {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--border-radius);
    color: var(--color-ink-dark);
    text-decoration: none;
    transition: background-color 0.15s ease;

    &:hover {
      background-color: var(--color-gray-light);
      color: var(--color-ink-dark);
    }
  }

  .app-nav__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .app-nav__user-name {
    font-weight: 500;
    color: var(--color-ink-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-nav__user-email {
    font-size: var(--font-small-responsive);
    color: var(--color-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Footer section - pushed to bottom */
  .app-nav__footer {
    margin-block-start: auto;
    padding-block-start: var(--block-space);
    border-block-start: var(--border);
  }

  /* Sidebar Component Part of Layout
     ========================================================================== */

  .toc:is(.sidebar__content) {
    --inline-padding: clamp(
      var(--inline-space),
      6%,
      calc(var(--inline-space) * 3)
    );

    inline-size: var(--sidebar-width);
    inset: 0 auto 0 0;
    max-block-size: 100%;
    overflow: auto;
    padding-block-start: var(--btn-size);
    padding-inline: var(--inline-padding);
    position: absolute;
  }

  .sidebar__toggle {
    transition:
      inset-inline-start 0.2s ease-out,
      color 0.2s ease-out;
    z-index: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    color: var(--color-ink);

    input[type="checkbox"] {
      display: none;
    }

    :has(#sidebar-toggle:checked) & {
      color: var(--color-red);

      /* Mirror of .dock__toggle's corner anchoring — see dock.css. */
      @media (min-width: 70ch) {
        position: absolute;
        inset-block-start: calc(var(--block-space-half) + 0.2rem);
        inset-inline-start: calc(var(--inline-space) - var(--sidebar-width));
      }
    }

    @media (max-width: 70ch) {
      display: none;
    }
  }

  /* Sidebar content links - dark style instead of blue */
  #sidebar a:not([class]),
  #sidebar a.button {
    color: var(--color-ink-body);

    &:hover {
      color: var(--color-ink-dark);
    }
  }

  /* Sidebar Content Styling
     ========================================================================== */

  .sidebar-content {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding: var(--block-space) var(--inline-space);
    font-size: var(--font-small-medium-responsive);
  }

  .sidebar-section {
    padding-block: var(--block-space-double);

    &:not(:last-child) {
      border-block-end: var(--border-size) solid var(--color-gray-dark);
    }

    &:first-child {
      padding-block-start: 0;
    }

    &:last-child {
      padding-block-end: var(--block-space);
    }
  }

  .sidebar-section__label {
    letter-spacing: 0.08em;
  }

  .sidebar-item {
    display: flex;
    align-items: flex-start;
    padding-block: var(--block-space-half);

    > i {
      margin-block-start: 0.15em;
      opacity: 0.7;
    }

    /* Single-line rows center the icon against the text; drop the top nudge that
       aligns the icon with the first line of a multi-line block. */
    &.align-center > i {
      margin-block-start: 0;
    }
  }

  /* Rows and actions share one icon column — same glyph size, box, and gap — so
     their icons sit on one vertical line even though action labels use a smaller
     font (em-based sizing would drift apart). */
  .sidebar-item,
  .sidebar-action {
    --sidebar-icon-size: var(--font-small-medium-responsive);
    gap: calc(var(--sidebar-icon-size) * 0.5);

    > i {
      flex-shrink: 0;
      font-size: var(--sidebar-icon-size);
      inline-size: calc(var(--sidebar-icon-size) * 1.25);
      text-align: center;
    }
  }

  .sidebar-item__content {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
  }

  .sidebar-action {
    display: inline-flex;
    align-items: center;
    padding: var(--block-space-quarter) var(--inline-space-half);
    /* Pull the ghost-button padding back out so the icon still starts at the row
       edge, on the shared column with .sidebar-item icons. */
    margin-inline-start: calc(-1 * var(--inline-space-half));
    border-radius: var(--border-radius);
    background: none;
    border: none;
    /* Explicit colour so the <button> (copy) and <a> (open) read identically —
       without it the anchor picks up the global blue link colour and the button
       stays ink, making two sibling actions look unrelated. */
    color: var(--color-ink-body);
    cursor: pointer;
    transition: background-color 0.15s ease;

    &:hover {
      background-color: var(--color-gray-light);
      color: var(--color-ink-dark);
    }
  }

  /* Shift-hold cap for the Shift+G "jump into sidebar" chord: parked in the
     panel's top corner, revealed by hotkey-mode like every other key-letter,
     and gone whenever the sidebar itself is closed or off-viewport. */
  #sidebar .sidebar__key-hint {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: var(--inline-space);
  }
}