/* ——— Settings ———
   A rail of panes beside the pane you chose (Claude Desktop's anatomy). One
   component drawn in two places — inside the modal the account menu opens, and
   as the whole of #main on a cold visit, a bookmark, or with no JavaScript.

   Only the rail and the two columns are here. What is *in* a pane is the app's
   own form treatment — the label voice, the hairline under a section heading,
   the controls — so a pane declares nothing of its own. */
@layer components {
  /* The frame is the container, not `.settings` itself: an element cannot
     answer its own container query, and the frame is the one ancestor present
     in both contexts — inside the dialog there is no #main above to ask. */
  #settings {
    display: block;
    container-type: inline-size;
  }

  .settings {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--inline-space-double);
  }

  .settings__rail {
    padding: var(--block-space-half) var(--inline-space-half);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);

    ul {
      margin: 0 0 var(--block-space);
    }

    /* The label voice is labels.css's; only the room around it is the rail's. */
    .label {
      padding: var(--block-space-half) var(--inline-space-half);
    }

    a {
      display: flex;
      align-items: center;
      gap: var(--inline-space-half);
      padding: var(--block-space-half) var(--inline-space-half);
      color: var(--color-ink);
      text-decoration: none;
      border-radius: var(--border-radius);

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

    /* The pane you are on. Off aria-current alone — the state is already in
       the markup for a screen reader, so painting it needs no second class
       (components own state). */
    a[aria-current] {
      font-weight: 500;
      background-color: var(--color-canvas);
    }
  }

  /* Only a dialog can be escaped; a page has nothing to close. The shell draws
     the line either way and this decides, which is what keeps the ERB from
     having to know which of its two homes it is in. */
  .settings__dismiss {
    display: none;
  }

  /* Inside the modal the shell IS the modal. The rail is a tinted column
     running the dialog's full height and flush to its start edge — its tint
     stopping short of three edges was the thing that read wrong (user,
     2026-08-13) — and the pane is the only part that scrolls, so the dialog
     keeps the one height dialog.css gave it.

     Here rather than in dialog.css because these are the settings component
     reacting to where it was drawn; what the modal itself owns is its size and
     its lack of padding. */
  .modal--settings {
    :is(#settings, .settings) {
      block-size: 100%;
    }

    .settings {
      gap: 0;
    }

    .settings__rail {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: var(--block-space) var(--inline-space);
      border-radius: 0;
    }

    /* Last, and pushed there: the rail's own foot, however short the list of
       panes above it. */
    .settings__dismiss {
      display: block;
      margin-block-start: auto;
      padding: var(--block-space-half) var(--inline-space-half) 0;
      font-size: var(--text-x-small);
      color: var(--color-ink-faint);
    }

    .settings__pane {
      overflow-y: auto;
      padding: var(--block-space) var(--inline-space-double);
    }
  }

  /* No width for two columns: the rail becomes a row above the pane. Both the
     phone and a narrow desktop window arrive here, which is why it is one
     query and not a media query plus a dialog exception. */
  @container (width < 34rem) {
    .settings {
      grid-template-columns: 1fr;
      gap: var(--block-space);
    }

    .settings__rail ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--inline-space-half);
      margin-block-end: var(--block-space-half);
    }
  }
}