/* Réglages (Échap > Réglages): a compact panel of fixed size. A narrow tab list on the left, the tab on the right: flat groups (foldable, small capitals), one-line rows (label left, control right, a switch for
   every checkbox), explanations behind a small (i). Built by ui/Settings.js with the controls of ui/settingsControls.js; neutral greys + the steel violet keep it readable in every theme. */
.settings { width: min(680px, 96vw); height: min(520px, 88vh); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.settings .modal-head { flex: none; }
.set-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 104px 1fr; gap: 10px; }
.settings .modal-body { min-height: 0; overflow: auto; padding-right: 6px; scrollbar-width: thin; }

/* tabs: a vertical list */
.set-tabs { display: flex; flex-direction: column; gap: 2px; align-content: start; padding-right: 8px; border-right: 1px solid rgba(128, 128, 128, 0.3); }
.settings .set-tabs .btn { flex: none; width: 100%; padding: 5px 9px; text-align: left; font-size: var(--fs-body); font-weight: 600; border-color: transparent; border-radius: 6px; background: transparent; box-shadow: none; text-shadow: none; }
.settings .set-tabs .btn:hover { background: rgba(128, 128, 128, 0.16); }
.settings .set-tabs .btn.on { color: #fff; background: #625c89; }

/* quality presets: one segmented bar */
.set-presets { display: flex; align-items: center; gap: 2px; margin: 2px 0 4px; }
.set-presets .btn { flex: 1; padding: 2px 6px; font-size: var(--fs-body); border-radius: 5px; }
.set-presets .btn.on { color: #fff; background: #625c89; border-color: #625c89; }
.set-custom { padding: 0 8px; font-size: var(--fs-small); color: #66637d; white-space: nowrap; }
.set-custom.on { color: #b6560a; font-weight: 700; }
.set-btns { display: flex; gap: 4px; margin-bottom: 2px; }
.set-btns .btn { padding: 2px 8px; font-size: var(--fs-small); }
.set-status { margin: 2px 0 2px; font-size: var(--fs-small); }

/* groups */
.set-sec { margin: 0 0 8px; }
.set-sec > summary { list-style: none; display: flex; align-items: center; gap: 5px; padding: 2px 0; cursor: pointer; user-select: none; border-bottom: 1px solid rgba(128, 128, 128, 0.3); }
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary::before { content: '▸'; font-size: var(--fs-small); color: #66637d; transition: transform var(--dur-fast); }
.set-sec[open] > summary::before { transform: rotate(90deg); }
.settings .set-sec > summary h4 { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #66637d; }
.set-sec-body { padding: 2px 0 0; }
.set-sub { margin: 8px 0 1px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #66637d; }

/* rows */
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; min-height: 26px; padding: 1px 6px; border-radius: 5px; font-size: var(--fs-body); }
.set-row:hover { background: rgba(128, 128, 128, 0.12); }
.set-row .set-label { color: #282638; }
.set-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.set-ctl { display: flex; justify-content: flex-end; min-width: 0; }
.set-ctl select { width: 190px; max-width: 100%; padding: 1px 6px; font-size: var(--fs-body); }
.set-ctl button.btn { padding: 2px 10px; font-size: var(--fs-small); }
.set-slider { display: flex; align-items: center; gap: 8px; width: 190px; }
.set-slider input { flex: 1; min-width: 0; height: 14px; margin: 0; }
.set-val { width: 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.set-hint { grid-column: 1 / -1; margin: 1px 0 3px; line-height: 1.35; }
.set-hint.hidden { display: none; }
.set-info { flex: none; width: 14px; height: 14px; padding: 0; border: 1px solid #8a86a6; border-radius: 50%; background: transparent; color: #66637d; font: italic 700 9px/12px Georgia, serif; cursor: pointer; }
.set-info:hover, .set-info.on { background: #625c89; border-color: #625c89; color: #fff; }

/* checkboxes are switches */
.set-ctl input[type=checkbox] { appearance: none; position: relative; width: 28px; height: 16px; margin: 0; border-radius: 8px; background: rgba(128, 128, 128, 0.45); cursor: pointer; transition: background var(--dur-fast); }
.set-ctl input[type=checkbox]::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform var(--dur-fast); }
.set-ctl input[type=checkbox]:checked { background: #625c89; }
.set-ctl input[type=checkbox]:checked::after { transform: translateX(12px); }
.set-ctl input[type=checkbox]:focus-visible { outline: 2px solid var(--focus-ring, #8f8ab1); outline-offset: 2px; }

/* keys */
.settings .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin: 4px 0 8px; }
.settings .key-row { padding: 1px 6px; border-radius: 5px; font-size: var(--fs-body); }
.settings .key-row:hover { background: rgba(128, 128, 128, 0.12); }
.settings .keybtn { min-width: 64px; padding: 1px 8px; font-size: var(--fs-small); }