/* 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] {
  margin-left: .3em; color: var(--muted);
}
/* 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, in small
   type, 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: .8rem; 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; }
/* (the place marker: its arrow in the margin, or the red dot of a quiet one) */
.settings-list .set-sample .set-mark { display: inline-flex; align-items: center; color: var(--marker); }
.settings-list .set-sample .set-mark svg { width: 16px; height: 16px; }
.settings-list .set-sample .set-mark .b-marker-dot { display: inline-block; margin: 0; }
.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); }