/* The settings pages (stage 2, S2-3 onward): reference lists with an inline add form -- Suppliers,
   Locations, Tags: one row per record, its facts on the line, Remove at the end.
   Stage 2, S2-6: the hub (.settings-hub, one link + one fact per row) and the theme choice.
   Stage 4, S4-2: Filing left that shape for a grid of folder cards (.filing-cards), and since
   2026-10-20 those cards are the Shelves page (/settings/shelves); only its add forms still borrow
   .settings-add. */
@layer pages {
  .settings-list { list-style: none; padding: 0; margin: 0 0 20px; max-width: 640px; }
  .settings-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .settings-list li form { display: inline; margin: 0; }
  .settings-name { font-weight: 500; }
  .settings-fact { font: 11px/1.4 var(--font-mono); color: var(--fg-muted); }
  .settings-list .settings-remove { margin-left: auto; }
  .settings-add { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; max-width: 640px; }
  .settings-add label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--fg-muted); }
  /* The hub has no Remove button to anchor to the right, so its own fact takes that job. */
  .settings-hub .settings-fact { margin-left: auto; }
  .theme-choice { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  /* A pressed theme is SELECTED, so it is ink like a selected chip (design-system.md rule 13). */
  .theme-choice .theme-option[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--surface); }

  /* --- Filing (stage 4, S4-2): one card per FOLDER, replacing the 124-row reference list.
     `.chip` and `.empty` are COMPONENTS and are only QUALIFIED here, never redeclared
     (docs/invariants/design-system.md rule 3; test/css_hygiene_test.rb).

     ONE COLUMN AT 375px, WHICH IS THE PHONE RULE (rule 11) AND IS ARITHMETIC, NOT LUCK: the shell
     gives `main.container` 12px of side padding below 719px, so the grid has 351px to fill and
     `auto-fill` fits exactly one 300px-minimum track, stretched to 351px by the 1fr. `.empty` is a
     40px-padded full-width component, so the card that has no rules is deliberately let out of that
     size here -- it is a one-line "nothing yet", not an empty page. A custom folder name is a leaf
     name (up to 255 bytes), so the heading wraps anywhere rather than pushing the track wider. --- */
  .filing-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .filing-card { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 12px; }
  .filing-card .filing-folder { font-size: 13px; margin: 0 0 8px; overflow-wrap: anywhere; }
  .filing-exts { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
  .filing-card .chip { display: inline-flex; align-items: center; gap: 4px; }
  .filing-card .chip form { display: inline; margin: 0; }
  .filing-card .settings-add { max-width: none; }

  /* Shelves (2026-10-20): a card's head row, its view/group form, a group's bar, the two add
     forms. The cards themselves are the Filing page's `.filing-card`, unchanged. */
  .shelf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .shelf-card-head form { display: inline; margin: 0; }
  .shelf-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
  .shelf-settings label { display: grid; gap: 2px; font-size: 12px; }
  .shelf-group { margin-top: var(--space-5); }
  .shelf-group-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
  .shelf-group-bar .group-head { margin: 0; }
  .shelf-group-bar form { display: inline-flex; gap: 6px; margin: 0; }
  /* THE RENAME FIELD SHRINKS WITH THE BAR (design-system.md rule 11). At its intrinsic width the
     field and its button made the form 390px and the page scrolled sideways at 375px (measured). */
  .shelf-group-bar .shelf-group-rename { flex: 1 1 14em; min-width: 0; max-width: 24em; }
  .shelf-group-rename input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; }
  .shelf-forms { display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--space-5); }

  /* --- The library folder (K, 2026-10-20): /settings/library. Its form borrows .settings-add and
     stacks, because the choice, the two outcomes and their buttons read top to bottom. */
  .library-choice { flex-direction: column; align-items: flex-start; }
  .library-facts, .library-outcomes { max-width: 640px; margin: 0 0 12px; padding-left: 18px; }
  .library-outcomes { margin: 0; }
  .library-actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* --- Users (2026-10-21): one account's page, three sections read top to bottom. --- */
  .user-manage { max-width: 640px; margin-top: var(--space-5); }
}