@layer components {
  /* 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 {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: -0.65em;
    }
  }

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

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

  /* 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
     ========================================================================== */

  /* 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 {
    font-size: var(--font-small-responsive);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .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);
  }
}