/*
  Settings (G2, TO-99).

  Its own stylesheet, like tomo-visibility.css. The section carries .tomo-face, so every token
  (and the dark palette under prefers-color-scheme) comes from tomo-face.css; nothing here
  invents a colour. Your setting's own styles live in tomo-visibility.css, so hosts include both:
    <link rel="stylesheet" href="_content/Tomo.Face/tomo-visibility.css" />
    <link rel="stylesheet" href="_content/Tomo.Face/tomo-settings.css" />

  The rows are the kit's collapsible row in its link form (styled in tomo-face.css, Ro,
  26 Oct 2026): icon tile, the title over a one-line sub, the count and a right chevron.
*/

.tomo-settings.tomo-face {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  gap: var(--tomo-space-4);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--tomo-space-8) var(--tomo-space-6);
  background: transparent;
}

.tomo-settings__title {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- The list: G2's rows, each a TomoCollapsibleRow in its link form ---------- */

.tomo-settings__list { gap: 6px; }

.tomo-settings__icon { width: 20px; height: 20px; }

/* The sub line's text span is sized to its content, so a loading skeleton gets the line's width
   to measure against; otherwise its percentage width resolves to nothing. */
.tomo-settings .tomo-crow__subtext:has(> .tomo-settings__skel) { flex: 1 1 auto; }
.tomo-settings__skel { width: min(18rem, 80%); height: 11px; margin-top: 3px; }

@media (max-width: 40rem) {
  .tomo-settings.tomo-face { padding: var(--tomo-space-6) var(--tomo-space-4); }
}