/* ——— 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 and the × either way and this decides, which is what keeps the
     ERB from having to know which of its two homes it is in. Two classes on
     the ×, so it outranks .btn's own display wherever the files land. */
  .settings__dismiss,
  .settings__rail > .settings__close {
    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);
    }

    /* A dialog is a control surface, and at the page's reading size it read
       large in its box (user, 2026-10-06). Beside the rail, the whole shell
       speaks one step down — Claude Desktop's settings are 14px throughout,
       which is where --text-small lands. The labels and the title keep their
       own steps. Not on a phone: there the shell is one column and the type is
       the phone's own reading size. */
    @container (width >= 34rem) {
      .settings {
        font-size: var(--text-small);
      }
    }

    /* A narrow shell is a header over the pane: the rail holds its height and
       only the pane scrolls — two scrollers, one per column, was what a phone
       got. No room at its foot for the whisper either; esc still works. */
    @container (width < 34rem) {
      .settings {
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
      }

      .settings__rail {
        overflow: visible;
      }

      .settings__dismiss {
        display: none;
      }
    }

    /* Where nothing hovers there is no esc to whisper about, so the dialog
       wears a × in its top corner instead, level with the title. The corner
       is the dialog's: a modal is fixed in the top layer, which makes it the
       ×'s containing block. */
    @media (any-hover: none) {
      .settings__dismiss {
        display: none;
      }

      .settings__rail > .settings__close {
        display: inline-flex;
        position: absolute;
        inset-block-start: var(--block-space);
        inset-inline-end: var(--inline-space);
      }
    }
  }

  /* 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: minmax(0, 1fr);
      gap: var(--block-space);
    }

    /* ONE row of tabs under the title, sliding sideways when it runs out of
       width — Claude Desktop's narrow settings. Wrapped, the five panes stood
       in three rows and took half a phone's dialog before a single field
       (measured, 2026-10-06). The group labels stand down: in a row of five
       the split says nothing a tab does not. */
    .settings__panes {
      display: flex;
      gap: var(--inline-space-half);
      overflow-x: auto;
      scrollbar-width: none;

      .label {
        display: none;
      }

      ul {
        display: flex;
        gap: var(--inline-space-half);
        margin: 0;
      }

      a {
        font-size: var(--text-small);
        white-space: nowrap;
      }
    }
  }
}