/* static/css/settings.css: Settings push view, owned by Task 6. Port of design-language/redesign.html
   .pbar .back .sg-l .sg .sr .seg .sind .src .hd. Theme indicator slides 280 ms; groups expand with kit .k-acc. */

#settings.st{z-index:22}
.st-bar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(var(--sat) + 12px) 16px 10px;background:var(--canvas);position:relative;z-index:2}
.st-back{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm);display:grid;place-items:center;color:var(--ink);-webkit-tap-highlight-color:transparent}
.st-back svg{display:block}
.st-tt{font:600 17px var(--disp);color:var(--ink);flex:1;min-width:0}
.st-body{flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(var(--sab) + 40px);scrollbar-width:none;overscroll-behavior:contain}
.st-body::-webkit-scrollbar{display:none}

.st-l{font:700 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:20px 20px 8px}
.st-g{margin:0 16px;background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--sh-sm);overflow:hidden;color:var(--ink)}
.st-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 14px;border:0;border-top:1px solid var(--hairline);background:none;
  font:400 15px var(--body);color:var(--ink);text-align:left;min-width:0;-webkit-tap-highlight-color:transparent}
.st-g>.st-row:first-child,.st-g>:first-child{border-top:0}
.st-row>svg{flex:none;display:block;color:var(--red)}
.st-k{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.st-k small{font-size:12.5px;color:var(--faint)}
.st-x{flex:none;display:flex;align-items:center;gap:6px;color:var(--mute);font-size:13.5px;white-space:nowrap}
.st-x.mono{font:500 13px var(--mono)}
.st-chev{display:inline-flex;line-height:0;color:var(--mute);transition:transform 260ms var(--ease-out)}
.st-row.open .st-chev{transform:rotate(180deg)}
.st-note{min-height:46px}
button.st-row:active{background:var(--surface-soft)}

/* theme: segmented control with a sliding indicator */
.st-seg{--i:0;flex:none;position:relative;display:flex;padding:3px;border-radius:12px;background:var(--surface-soft)}
.st-ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:9px;background:var(--surface);box-shadow:var(--sh-sm);
  transform:translateX(calc(var(--i)*100%));transition:transform 280ms var(--ease-inout)}
.st-seg button{position:relative;z-index:1;width:58px;border:0;background:none;text-align:center;font:600 13px var(--body);padding:6px 0;color:var(--mute);transition:color 180ms ease,transform var(--k-press) var(--ease-out)}
.st-seg button.on{color:var(--ink)}
@media (max-width:374px){ .st-seg button{width:52px} }

/* per-source rows inside an open group */
.st-src{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 44px;font-size:14px;border-top:1px solid var(--hairline);min-width:0;color:var(--ink)}
.st-src .st-sn{flex:1}
.st-r{flex:none;margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}
.st-hd{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.st-hd.ok{background:var(--ok)}.st-hd.warn{background:var(--warn)}.st-hd.off{background:var(--faint)}

/* quality overview (catalogue.js chartsHtml) */
.st-qwrap{padding:4px 14px 14px;border-top:1px solid var(--hairline)}
.st-charts{max-height:none;overflow:visible;margin:10px 0 0}
.st-charts .chart{opacity:1;transform:none;margin-bottom:8px;background:var(--canvas)}
.st-charts .chart:last-child{margin-bottom:0}
/* re-check progress (catalogue.js pollRenorm paints #renormBar) */
.st-renorm{margin:0 14px 12px}

@media (prefers-reduced-motion:reduce){ .st-ind,.st-chev{transition:none} }
/* Layout row: three options, a touch narrower so the label keeps room at 360 */
.st-layrow .st-seg button{width:64px}
@media (max-width:374px){ .st-layrow .st-seg button{width:54px} }