/* ---- settings: groups, not a pile ---------------------------------------- */
.set-group{margin-bottom:30px}
.set-group:last-child{margin-bottom:8px}
/* The group heading is the whole point of the restructure: it says what the
   cards under it are FOR, so somebody scanning for their password is reading
   four labels instead of eight card titles. */
.set-h{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding-bottom:9px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.set-row{display:flex;gap:12px;align-items:center;margin-top:13px}
.set-note{font:400 12.5px var(--sans);color:var(--faint)}
#support-card textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--text);font:400 13.5px/1.65 var(--sans);
  resize:vertical;min-height:96px;outline:none;transition:border-color .15s}
#support-card textarea:focus{border-color:var(--accent-dim)}

/* The plan block. One number carries the page — actions used — with its
   ceiling beside it rather than a label above it. */
.set-plan{display:flex;align-items:baseline;gap:11px;margin-bottom:3px}
.set-plan b{font:600 34px/1 var(--sans);letter-spacing:-.03em;color:var(--text)}
.set-plan span{font:400 14px var(--sans);color:var(--faint)}
.set-plan-name{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px}
.set-split{display:flex;gap:20px;margin-top:12px;font:400 12.5px var(--sans);color:var(--faint)}
.set-split b{color:var(--text);font-weight:550}
.set-near{margin-top:11px;font:400 12.5px/1.6 var(--sans);color:var(--warn)}

/* One dial per row. The source note used to sit between the label and the
   input, which put the least important thing in the middle of the most
   important pair. */
.dial{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.dial:last-of-type{border-bottom:0}
.dial .lbl{flex:1;min-width:0}
.dial .lbl b{display:block;font:500 14.5px var(--sans);color:var(--text)}
.dial .lbl span{display:block;font:400 12px/1.5 var(--sans);color:var(--faint);margin-top:2px}
.dial .src{flex:none;font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.dial .src.def{opacity:.62}
.dial input{flex:none;width:88px;text-align:right;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;color:var(--text);font:400 14px var(--mono);outline:none;
  transition:border-color .15s}
.dial input:focus{border-color:var(--accent-dim)}
.dial input[disabled]{opacity:.45}
@media(max-width:560px){
  .dial{flex-wrap:wrap;gap:8px}
  .dial .lbl{flex:1 0 100%}
  .dial .src{order:3}
  .dial input{margin-left:auto}
}