@layer components {
  /* ── Sidebar ── the main navigation, beside the page instead of above it.
     html.sidebar-collapsed (set before paint from localStorage) narrows it
     to the icons. The width is set on the body: on :root the unlayered
     token in tokens.css would always win over this layered rule. */
  .sidebar-collapsed .shell { --sidebar-width: var(--sidebar-width-collapsed); }

  .sidebar {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    background: var(--color-canvas);
    border-inline-end: var(--border-light);
    overflow: hidden;
  }

  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    block-size: var(--nav-height);
    margin-block: calc(-1 * var(--space-3)) var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-decoration: none;
    white-space: nowrap;
  }

  .sidebar__logo {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: var(--text-sm);
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);

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

    &.is-current {
      background: var(--color-primary-bg);
      color: var(--color-primary);
      font-weight: var(--weight-semibold);
    }
  }

  .sidebar__icon {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .sidebar__count {
    margin-inline-start: auto;
    min-inline-size: 1.25rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: var(--text-xs);
    text-align: center;
  }

  .sidebar__separator {
    block-size: 1px;
    margin: var(--space-2);
    background: var(--color-border-light);
  }

  .sidebar__toggle {
    margin-block-start: auto;
    align-self: flex-start;
    display: grid;
    place-items: center;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;

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

  .sidebar__toggle-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    transition: transform var(--transition-base);
  }

  .sidebar-collapsed {
    .sidebar__label, .sidebar__count { display: none; }
    .sidebar__brand, .sidebar__item { justify-content: center; }
    .sidebar__toggle { align-self: center; }
    .sidebar__toggle-icon { transform: scaleX(-1); }
  }

  /* On a narrow screen the sidebar is always the icon rail. */
  @media (max-width: 48rem) {
    body.shell { --sidebar-width: var(--sidebar-width-collapsed); }
    .sidebar__label, .sidebar__count { display: none; }
    .sidebar__brand, .sidebar__item { justify-content: center; }
    .sidebar__toggle { display: none; }
  }

  /* ── Top bar ── search always in sight, then theme and the user menu. */
  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--nav-height);
    padding-inline: var(--main-padding);
    background: var(--color-canvas);
    border-block-end: var(--border-light);
  }

  .topbar__brand {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }

  /* The search box: a form whose results load in the frame under it. */
  .topbar__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-inline-size: 0;
    max-inline-size: 34rem;
    padding: var(--space-1) var(--space-3);
    border: var(--border-input);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-ink-subtle);

    &:focus-within {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 var(--focus-ring-size) var(--color-primary-bg);
    }
  }

  .topbar__search-icon { flex: none; inline-size: 1rem; block-size: 1rem; }

  .topbar__search-input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    outline: none;

    &::placeholder { color: var(--color-ink-subtle); }
    &::-webkit-search-cancel-button { display: none; }
  }

  .topbar__search-keys { display: flex; gap: 2px; }
  .topbar__search:focus-within .topbar__search-keys { display: none; }

  .search-results {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline: 0;
    z-index: 30;
    max-block-size: 60vh;
    overflow-y: auto;
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    box-shadow: var(--shadow-md);

    &:empty { display: none; }
  }

  .search-results__list {
    margin: 0;
    padding: var(--space-1);
    list-style: none;
  }

  .search-results__option {
    border-radius: var(--radius-sm);

    &:hover { background: var(--color-surface); }

    /* The row Enter opens: the same mark as the current sidebar entry. */
    &[aria-selected="true"] {
      background: var(--color-primary-bg);

      .search-results__link { color: var(--color-primary); }
    }
  }

  .search-results__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  /* The number is the sole identifier of a practice (ADR-0005), hence the
     first label of the row. */
  .search-results__number { flex: none; font-weight: var(--weight-medium); }
  .search-results__subject { margin-inline-start: auto; color: var(--color-ink-muted); }

  .search-results__empty {
    margin: 0;
    padding: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  /* Never shrunk: on a phone the search gives way, the user menu stays. */
  .topbar__end {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .topbar__icon-button,
  .topbar__user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-ink-muted);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;

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

  .topbar__user-icon { inline-size: 1.5rem; block-size: 1.5rem; }

  @media (max-width: 48rem) {
    .topbar__search-keys, .topbar__user-name { display: none; }
  }

  /* ── User menu ── a native popover: no script, closes on Esc and on a
     click outside. Anchored under the top bar on the right. */
  .user-menu {
    inset: var(--nav-height) var(--main-padding) auto auto;
    margin: 0;
    min-inline-size: 14rem;
    padding: var(--space-2);
    border: var(--border-light);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
  }

  .user-menu__name { padding: var(--space-1) var(--space-2) 0; font-weight: var(--weight-semibold); }
  .user-menu__email { padding: 0 var(--space-2) var(--space-2); color: var(--color-ink-muted); font-size: var(--text-sm); border-block-end: var(--border-light); }

  .user-menu__prefs {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
    border-block-end: var(--border-light);
  }

  .user-menu__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    border: none;

    legend {
      padding: 0;
      margin-block-end: var(--space-1);
      color: var(--color-ink-muted);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
    }
  }

  .user-menu__choice {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .user-menu__save { justify-self: start; }

  .user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    margin-block-start: var(--space-2);
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;

    &:hover { background: var(--color-surface); }
  }
}