/* ---------- Settings' window (settings-shell.js): categories down the left, one shown on the right.
   MIRRORED: write/settings-shell.css and flowchart/settings-shell.css are the same file, byte for
   byte (cloud/test/vendor.test.mjs checks). The card is the page's own .prefs-card (its glass,
   its sections and rows); this only lays it out. The rules hold while the card shows the window
   (:has(> .sh-win)), not while it shows something else in its place (Reset this device). */

/* Its pieces are ui.css's: the sidebar is a carbon copy of the ☰ menu (the card surface, its lens and
   padding; ui.css lists .sh-side with #app-menu), its categories the ☰ menu's rows (.sh-cat with
   .menu-item: hover and the chosen one, the quiet highlight), its group labels the menu's title. */

/* the card: wider, one height whichever category shows; only the right side scrolls */
/* (as wide in place of the window too: Reset this device) */
/* its corners follow the sidebar's, its inset further out (the sidebar's radius plus its inset), so the two curves share a centre */
.prefs-card.sh-on { width: min(780px, 100%); --sh-inset: 8px; border-radius: calc(var(--r-xl) + var(--sh-inset)); }
.prefs-card.sh-on:has(> .sh-win) {
  height: min(640px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.sh-win { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); }

/* the sidebar: the ☰ menu's card (its glass from ui.css), laid out down the left */
.sh-side {
  display: flex; flex-direction: column;
  margin: var(--sh-inset) 0 4px var(--sh-inset); padding: 8px; overflow-y: auto; overscroll-behavior: contain;
}
.sh-group { margin: 0; }
.sh-group:first-child { padding-top: 4px; }
/* a category: one of the ☰ menu's rows (ui.css); only what a tab adds */
.sh-cat { flex: none; margin: 0; font-family: inherit; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; -webkit-tap-highlight-color: transparent; }

/* the category shown: its name as the card's heading, then its sections */
.sh-main { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.sh-main::-webkit-scrollbar-track { margin-block: var(--r-xl); }
.sh-main > .section[hidden], .sh-pane[hidden] { display: none; }
.sh-main .section-title.sh-same { display: none; }
.prefs-card.sh-on > .prefs-foot { flex: none; padding-top: 14px; padding-bottom: 16px; }
/* a category with a head and buttons of its own (a question: signing out…) */
.prefs-card.sh-bare .sh-main > .panel-head, .prefs-card.sh-bare > .prefs-foot { display: none; }

/* a narrow window: the categories in a row across the top, scrolling sideways */
@media (max-width: 640px) {
  .prefs-card.sh-on { --sh-inset: 8px; }
  .prefs-card.sh-on:has(> .sh-win) { height: 100%; }
  .sh-win { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sh-side {
    flex-direction: row; gap: 4px; margin: var(--sh-inset) var(--sh-inset) 0; padding: 6px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  .sh-side::-webkit-scrollbar { display: none; }
  .sh-group { display: none; }
  .sh-cat { min-height: var(--h-row-sm); overflow: visible; }
  .sh-main .panel-head { padding-top: 14px; }
  .prefs-card.sh-on > .prefs-foot { flex-wrap: wrap; padding: 10px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .sh-cat { transition: none; } }