/* Selector carries the size attribute deliberately: `.btn[data-size="sm"]`

     sets `padding: 8px 15px` at (0,2,0) and beats a bare `.theme-toggle`, so

     the padding survived and pushed the glyph off centre inside a 32px box. */

  /* Centring is stated here rather than inherited. `.btn[data-size="sm"]` sets

     padding at (0,2,0) and outranks a bare class, and the button holds two

     glyphs with one hidden, so neither the padding reset nor the flex centring

     can be assumed -- both are declared, on a selector that outranks the size

     rule. */

  .theme-toggle,

  .theme-toggle[data-size="sm"] {

    display: inline-flex;

    width: 32px;

    min-width: 32px;

    height: 32px;

    min-height: 32px;

    padding: 0;

    gap: 0;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: transparent;

    display: flex;

    flex: none;

    flex-direction: column;

    align-items: stretch;

    margin-top: auto;

    border-top: 1px solid var(--line);

    padding: 20px;

    /* Block padding only. The inline inset comes from the link, so a footer

       link lines up with the nav rows above it instead of sitting at its own

       indent. */

    padding: 12px 0;

  }

  .sidebar-footer__link {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    min-height: 36px;

    padding-inline: 5px;

    /* Same 12px + 8px as .sidebar-row, so the two columns share one left edge. */

    margin-inline: 12px;

    padding-inline: 8px;

    color: var(--text-muted);

    font-size: 0.8125rem;

    font-weight: 500;

  Collapsing them into one link would cost one of those, and giving the index

  its own sidebar row would list a destination the reader is already looking at.

  """

  attr :title, :string, required: true

  attr :path, :string, required: true, doc: "this section's index"

  attr :title, :string, default: nil, doc: "section name; omitted in the app shell"

  attr :path, :string, default: nil, doc: "this section's index"

  def sidebar_brand(assigns) do

    ~H"""

    <header class="sidebar-brand">

      <.link navigate={~p"/"} class="sidebar-brand__mark">OpenAgents</.link>

      <span class="sidebar-brand__divider" aria-hidden="true"></span>

      <.link patch={@path} class="sidebar-brand__title">{@title}</.link>

      <span :if={@title} class="sidebar-brand__divider" aria-hidden="true"></span>

      <.link :if={@title} patch={@path} class="sidebar-brand__title">{@title}</.link>

    </header>

    """

  end

  @doc """

  The secondary links at the foot of a sidebar.

  Every sidebar carries the same two, so a reader who finds the component

  library from the application can get back to the docs from either, and does

  not have to remember which shell they are in.

  """

  def sidebar_footer(assigns) do

    ~H"""

    <footer class="sidebar-footer">

      <.link navigate={~p"/components"} class="sidebar-footer__link">

        <UI.icon name="widget" /> Components

      </.link>

      <.link navigate={~p"/docs"} class="sidebar-footer__link">

        <UI.icon name="book" /> Documentation

      </.link>

    </footer>

    """

  end

  @doc """

  A collapsible sidebar section.

  defp sidebar(assigns) do

    ~H"""

    <aside class="sidebar hidden lg:flex">

      <header class="sidebar-header">

        <span class="brand-name">OpenAgents</span>

      </header>

      <Layouts.sidebar_brand />

      <nav class="sidebar-nav" aria-label="OpenAgents surfaces">

        <Layouts.sidebar_link path={~p"/"} label="Home" icon="home" patchable={false} />

      </div>

      --%>

      <footer class="sidebar-footer">

        <.link navigate={~p"/components"} class="sidebar-footer__link">

          <UI.icon name="widget" /> Components

        </.link>

        <.link navigate={~p"/docs"} class="sidebar-footer__link">

          <UI.icon name="book" /> Documentation

        </.link>

      </footer>

      <Layouts.sidebar_footer />

    </aside>

    """

  end

        />

      </Layouts.sidebar_section>

    </nav>

    <Layouts.sidebar_footer />

  </aside>

  <div class="docs-column">

        />

      </Layouts.sidebar_section>

    </nav>

    <Layouts.sidebar_footer />

  </aside>

  <div class="docs-column">