/* The Settings page (web/settings.php, card #403): three folder tabs (DESIGN.md §5a) over one card of rows, the ⋮ menu's
   own rows set out as a list (§2a: a card on the page; §3: rows, the halo edge to edge). */
.settings-list { padding: 0; overflow: hidden; }
.settings-list > a, .settings-list > button, .settings-list > form > button {
  display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: .7rem 1rem; text-align: left;
  color: var(--text); text-decoration: none; background: none; border: 0;
}
.settings-list > a:hover, .settings-list > button:hover, .settings-list > form > button:hover { background: var(--halo); }
.settings-list > a:focus-visible, .settings-list > button:focus-visible, .settings-list > form > button:focus-visible,
.settings-list .text-size button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.settings-list > :not(:last-child) { border-bottom: 1px solid var(--divider); }
.settings-list > form { margin: 0; }
/* The value after the colon, a little apart from the name. */
.settings-list [data-val], .settings-list [data-theme-label], .settings-list [data-sound-label], .settings-list [data-start-label],
.settings-list [data-read-bible-label], .settings-list [data-reading-notify-label], .settings-list [data-continue-with-label] {
  margin-left: .3em; color: var(--muted);
}
/* Continue reading with (card #798): a long book's name cut with "…" rather than a second line on a phone. */
.settings-list > [data-continue-with-toggle] { white-space: nowrap; }
.settings-list [data-continue-with-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A link to another page or chooser: › at its end. */
.settings-list > a::after, .settings-list > [data-set="rhide"]::after, .settings-list > [data-set="xlist"]::after {
  content: "›"; margin-left: auto; padding-left: .75rem; color: var(--muted); font-size: 1.2rem; line-height: 1;
}
.settings-list .text-size { display: flex; align-items: center; min-height: var(--tap); padding: 0 .5rem 0 1rem; }
.settings-list .text-size button {
  width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; font-weight: 600; color: var(--link);
}
.settings-list .text-size button:hover { background: var(--halo); }
.settings-list .text-size button:first-of-type { font-size: .85rem; }
.settings-list .text-size button:disabled { color: var(--muted); opacity: .5; background: none; }
/* The Reading tab's samples (card #403): a few words of the Bible on the setting's own row, after its value, at the
   labels' own size (card #665; Larry: "Example text is too small"), drawn by the reader's own rules (bible.css: .b-chapter, .wj, .vn, .fn, .b-inline-note, .xr-word, .b-rlink,
   .b-tlink, .b-marker-dot). Only their size and place are this page's: one line, no taller than the row. */
.settings-list .set-sample {
  margin-left: auto; padding: 0 0 0 .75rem; font-size: 1rem; line-height: 1.2; color: var(--text); white-space: nowrap;
  pointer-events: none; --b-muted: var(--muted); --b-rule: var(--divider);
}
/* (the note itself, in the text: the reader sets it under the verse; here, on the same line) */
.settings-list .set-sample .b-inline-note { margin: 0 0 0 .5em; padding: 0 0 0 .4em; font-size: .9em; }
body.b-notes-inline .settings-list .set-sample .b-inline-note { display: inline-block; }
.settings-list .set-sample[hidden] { display: none; }
/* The Display tab's (card #403): Bible text size's words at the reader's own size, between the label and A− A+. */
.settings-list .text-size .set-sample { flex: none; padding-right: .5rem; }
.settings-list .set-sample.set-bsize { font-size: var(--b-size, 1.12rem); }