/* The portal's Settings (web/merchant/settings.js), after the "Settings" design. */

.set-nav{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.set-nav .tabs{margin-bottom:0}
.set-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-head > div:first-child{min-width:0;flex:1 1 300px}
.set-head{flex-wrap:wrap}
.set-card > .set-head:last-child{border-bottom:none}

/* A label and value row: the label, the value with a line under it, and
   the row's own actions at the end. Stacks on a phone. */
.kv-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:12px 18px;border-top:1px solid var(--line-soft)}
.set-head + .kv-row{border-top:none}
.kv-k{flex:0 0 200px;font-size:13px;color:var(--muted)}
.kv-v{flex:1 1 240px;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.kv-v .mono{font-family:var(--font-mono);font-size:12px}
.kv-sub{font-size:12px;color:var(--subtle);margin-top:2px;line-height:1.45}
.kv-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}

.set-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:9px;font-size:13px;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.set-note .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;background:var(--subtle)}

.set-form{display:flex;flex-direction:column;gap:14px}
.set-p{font-size:13px;line-height:1.5;margin:0}
.set-check{display:flex;gap:8px;align-items:center;font-size:13px}
.set-card:has(.table-wrap.flush){overflow:hidden}
.set-card .table-wrap.flush{border:none;border-radius:0;margin:0;border-top:1px solid var(--line-soft)}
.set-card .table-wrap.flush tr:last-child td{border-bottom:none}

/* Two-factor setup, as the console draws it. */
.mfa-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mfa-qr img{width:160px;height:160px;border:1px solid var(--line);border-radius:8px;background:#fff;image-rendering:pixelated}
.mfa-secret{font-size:13px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px;user-select:all}
.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-size:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;user-select:all}

.btn-danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-danger:hover{filter:brightness(.92)}

@media (max-width:640px){
  .kv-k{flex-basis:100%}
  .kv-acts{margin-left:0}
}

/* Team: role choices, and the read-only matrix of what each role can do. */
.set-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}
.set-role{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.set-role:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.set-role input,.form-group .set-role input{width:16px;height:16px;flex:0 0 16px;margin:2px 0 0;padding:0;accent-color:var(--ink);box-shadow:none}
.set-role b{display:block;font-size:13px;font-weight:500}
.set-role small{display:block;font-size:12px;color:var(--subtle);margin-top:2px;line-height:1.4}
.set-matrix td.center,.set-matrix th.center{text-align:center}
.set-tick{display:inline-flex;width:18px;height:18px;border-radius:5px;align-items:center;justify-content:center;border:1.5px solid var(--line);color:#fff;vertical-align:middle}
.set-tick.on{background:var(--ink);border-color:var(--ink)}

/* Business: the code chip in the header, a tab's pending count, a value
   shown read-only in a form, and the amber note for pending reviews. */
.set-code{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff}
.set-code span{color:var(--subtle)}
.set-code b{font-size:12px;font-weight:500}
.set-count{font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:999px;background:var(--warn-wash);color:var(--warn);margin-left:2px}
.set-read{padding:9px 10px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:13px;color:var(--ink-2);line-height:1.45}
.set-note.warn{background:var(--warn-wash);border-color:#fde68a;color:#78350f}
.set-note.warn .dot{background:#f59e0b}
.set-form textarea{width:100%;min-height:72px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-control);font:inherit;font-size:14px;resize:vertical}

/* Branding: the pay-page preview, as the design draws it. */
.brand-stage{border-top:1px solid var(--line-soft);background:var(--surface-2);padding:24px;display:flex;justify-content:center}
.brand-pay{width:min(380px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:14px}
.brand-head{display:flex;align-items:center;gap:10px;font-size:14px}
.brand-head img{max-height:32px;max-width:120px}
.brand-mark{width:32px;height:32px;border-radius:8px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.brand-amt{font-size:22px;font-weight:600;margin-top:2px}
.brand-btn{height:38px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.brand-foot{font-size:12px;color:var(--subtle);line-height:1.5;white-space:pre-line}
.brand-desc{border-top:1px dashed var(--line);padding-top:10px;font-size:11px;color:var(--subtle)}
.brand-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.08);vertical-align:middle}
.brand-check{display:flex;gap:8px;align-items:center;font-size:12px}

/* Notifications: switches and the role matrix's ticks as buttons. */
.set-switch{width:32px;height:18px;border-radius:999px;border:none;padding:0;position:relative;background:#d4d4d4;cursor:pointer;flex-shrink:0}
.set-switch span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.set-switch.on{background:var(--ink)}
.set-switch.on span{left:16px}
.set-switch.locked,.set-switch:disabled{cursor:default;opacity:.55}
.set-switch.locked.on{background:#737373;opacity:1}
button.set-tick{padding:0;cursor:pointer;background:#fff}
button.set-tick.on{background:var(--ink)}
button.set-tick.locked{background:#a3a3a3;border-color:#a3a3a3;cursor:default}
button.set-tick:disabled:not(.locked){cursor:default;opacity:.6}