/* sx-settings.css - the StrmrX SETTINGS LAYOUT (the streamer's admin page), with sx-settings.js.
   SX_SETTINGS_VERSION 1.0.0 (canonical: strmrx-core/web; vendor a copy, never edit in place).
   1.0.0 (2026-11-08, Willy): one settings layout for every app, so a streamer learns it once.
   A settings card: title + "? Help" top right, an icon tab bar, short rows (name + small info
   button on the left, the simplest control on the right), the Save bar at the bottom. The
   explanation lives behind the info button in a centred popup, never as a paragraph on the
   page. Rules are scoped to .sxs-* so they never touch an app's own CSS. Docs: docs/settings-standard.md */

/* the card */
.sxs-card{min-width:0}
.sxs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.sxs-head h3{margin:0;font-size:17px}
.sxs-help{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--sx-border2,#3a3040);background:transparent;color:var(--sx-text,#e9e3e6);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer}
.sxs-help:hover{border-color:var(--sx-accent,#c41e3a)}
.sxs-help b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--sx-accent,#c41e3a);color:var(--sx-accent-ink,#fff);font-size:12px}

/* the icon tab bar: an icon over a short word, one row, like an app's top bar */
.sxs-tabs{display:flex;gap:4px;margin:0 0 12px;padding:4px;border-radius:14px;background:rgba(0,0,0,.22);
  overflow:hidden}
.sxs-tabs>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:5px 2px;border:0;border-radius:10px;background:transparent;color:var(--sx-muted,#8b8390);
  font:inherit;font-size:11.5px;font-weight:700;line-height:1.1;cursor:pointer;white-space:nowrap}
.sxs-tabs>button .sxs-ico{font-size:19px;line-height:1}
.sxs-tabs>button>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sxs-tabs>button:hover{color:var(--sx-text,#e9e3e6)}
.sxs-tabs>button.on{background:var(--sx-accent,#c41e3a);color:var(--sx-accent-ink,#fff)}

/* a group of rows inside a tab */
.sxs-group{margin:0 0 12px}
.sxs-group>h4{margin:0 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted,#8b8390)}

/* one setting: [name (i)] ............ [control] */
.sxs-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.sxs-row:last-child{border-bottom:0}
.sxs-row[hidden]{display:none}
.sxs-name{flex:1 1 0;min-width:min-content;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  color:var(--sx-text,#e9e3e6);overflow-wrap:break-word}
.sxs-name code{font-size:13px}
.sxs-ctl{flex:none;display:flex;align-items:center;gap:6px;max-width:100%;min-width:0;margin-left:auto}
.sxs-ctl input[type=number]{width:84px}
.sxs-ctl input[type=text],.sxs-ctl input:not([type]){width:160px;max-width:100%}
.sxs-ctl select{width:auto;max-width:100%}
.sxs-ctl input[type=range]{width:130px}
.sxs-ctl .sxs-val{min-width:40px;text-align:right;font-weight:700;font-size:13px}
.sxs-ctl.sx-toggle{gap:0}
/* when name and control don't fit side by side, the control drops to the next line, still on the right */
/* a row whose control is wide (a picker, a list) puts it on its own line */
.sxs-row.sxs-wide{flex-wrap:wrap}
.sxs-row.sxs-wide>.sxs-ctl{flex:1 1 100%;max-width:100%;flex-wrap:wrap}

/* the info button: small, round, next to the name; a 32px tap box around a 20px circle */
.sxs-info{flex:none;position:relative;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--sx-muted,#8b8390);box-shadow:inset 0 0 0 1.5px currentColor;font:700 12px/20px Georgia,serif;font-style:italic;
  cursor:pointer;text-align:center}
.sxs-info::before{content:"";position:absolute;inset:-6px}
.sxs-info:hover,.sxs-info:focus-visible{color:var(--sx-accent2,var(--sx-accent,#ff6b35))}

/* the Save bar: always the bottom of the card */
.sxs-savebar{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.sxs-savebar[hidden]{display:none}

/* the popup: centred, closes with X, Esc and a click outside; its own scroll if tall */
.sxs-pop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(4,3,10,.62)}
.sxs-pop[hidden]{display:none}
.sxs-pop-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  padding:20px 20px 18px;border-radius:var(--sx-radius,16px);background:var(--sx-surface,#15151b);color:var(--sx-text,#e9e3e6);
  box-shadow:0 24px 60px -12px #000,inset 0 0 0 1px rgba(255,255,255,.08);overflow-wrap:anywhere}
.sxs-pop-card.sxs-big{width:min(560px,100%)}
.sxs-pop-card h3{margin:0 40px 10px 0;font-size:17px;line-height:1.3}
.sxs-pop-body{font-size:14px;line-height:1.5;color:var(--sx-muted2,#a89faa)}
.sxs-pop-body p{margin:0 0 8px}
.sxs-pop-body b,.sxs-pop-body strong{color:var(--sx-text,#e9e3e6)}
.sxs-pop-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.07);
  color:var(--sx-text,#e9e3e6);font-size:22px;line-height:36px;cursor:pointer;padding:0}
.sxs-pop-x:hover{background:rgba(255,255,255,.14)}
.sxs-pop-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px}

/* the help guide: a line or two per point */
.sxs-guide{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sxs-guide li{display:flex;gap:10px;align-items:flex-start}
.sxs-guide .sxs-gi{flex:none;width:26px;font-size:18px;line-height:1.3;text-align:center}
.sxs-guide b{display:block;color:var(--sx-text,#e9e3e6)}
html.sxs-lock,html.sxs-lock body{overflow:hidden}

@media (max-width:420px){
  .sxs-tabs>button{font-size:10.5px;min-height:46px}
  .sxs-tabs>button .sxs-ico{font-size:17px}
  .sxs-ctl input[type=number]{width:72px}
  .sxs-ctl input[type=range]{width:96px}
  .sxs-ctl input[type=text],.sxs-ctl input:not([type]){width:130px}
  .sxs-pop{padding:10px}
  .sxs-pop-card{padding:18px 16px 16px}
}