/* NuFlow component classes — shared by the React components and any HTML consumer. */

/* Buttons */
.nf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex-shrink:0;border-radius:var(--radius-pill);padding:11px 24px;font-size:14px;font-weight:var(--weight-bold);font-family:var(--font-sans);border:none;cursor:pointer;transition:background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);text-decoration:none;line-height:1}
.nf-btn--primary{background:var(--blue);color:#fff}
.nf-btn--primary:hover{background:var(--blue-hover)}
.nf-btn--secondary{background:var(--surface-card);color:var(--ink);border:1.5px solid var(--border-strong);padding:9.5px 22.5px}
.nf-btn--secondary:hover{border-color:var(--ink)}
.nf-btn--ghost{background:transparent;color:var(--blue)}
.nf-btn--ghost:hover{background:var(--blue-tint)}
.nf-btn--dark{background:var(--ink);color:#fff}
.nf-btn--dark:hover{background:#2A2A2A}
.nf-btn--sm{padding:8px 18px;font-size:13px}
.nf-btn--lg{padding:14px 30px;font-size:15px}
.nf-btn:disabled{background:var(--border);color:var(--text-3);cursor:default;border:none}
.nf-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.nf-btn:active{transform:scale(0.98)}

/* Inputs */
.nf-input{background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-input);padding:12px 16px;font-size:14px;font-family:var(--font-sans);font-weight:var(--weight-body);color:var(--ink);width:100%;box-sizing:border-box;outline:none;transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
.nf-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.nf-input::placeholder{color:var(--text-3)}
.nf-input--error{border-color:#E5484D}
.nf-input--search{border-radius:var(--radius-pill)}
.nf-field-label{font-size:12.5px;font-weight:var(--weight-bold);color:var(--ink);display:block;margin-bottom:6px}
.nf-field-help{font-size:12px;color:var(--text-3);margin-top:6px}
.nf-field-error{font-size:12px;color:#E5484D;font-weight:var(--weight-semi);margin-top:6px}

/* Badges */
.nf-tag{display:inline-flex;align-items:center;white-space:nowrap;border-radius:var(--radius-tag);padding:4px 12px;font-size:12px;font-weight:var(--weight-bold);line-height:1.4}
.nf-tag--blue{background:var(--blue-tint);color:var(--blue)}
.nf-tag--mint{background:var(--mint-tint);color:var(--mint-deep)}
.nf-tag--neutral{background:var(--fill-subtle);color:var(--text-2)}
.nf-tag--dark{background:var(--ink);color:#fff}

/* Cards */
.nf-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px}
.nf-stat-label{font-size:10.5px;letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-bold);color:var(--text-2)}
.nf-stat-value{font-family:var(--font-mono);font-size:22px;margin-top:6px;color:var(--ink)}
.nf-stat-delta{font-size:12px;font-weight:var(--weight-bold);margin-top:4px;color:var(--positive-text)}
.nf-stat-delta--neutral{color:var(--text-3)}

/* Switch */
.nf-switch{width:44px;height:26px;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;cursor:pointer;flex-shrink:0;border:none;padding:0;transition:background var(--duration-base) var(--ease)}
.nf-switch[aria-checked="true"]{background:var(--blue)}
.nf-switch .nf-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-raised);transition:left var(--duration-base) var(--ease)}
.nf-switch[aria-checked="true"] .nf-knob{left:21px}

/* Checkbox & Radio */
.nf-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:13px;font-weight:var(--weight-bold);color:transparent;transition:background var(--duration-fast) var(--ease)}
.nf-check[aria-checked="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.nf-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface-card);cursor:pointer;flex-shrink:0;box-sizing:border-box;transition:border var(--duration-fast) var(--ease)}
.nf-radio[aria-checked="true"]{border:6px solid var(--blue)}
.nf-control-row{display:flex;align-items:center;gap:12px}
.nf-control-label{font-size:13.5px;font-weight:var(--weight-semi);color:var(--ink)}

/* Tabs */
.nf-tabs{display:inline-flex;gap:4px;background:var(--fill-subtle);border-radius:var(--radius-pill);padding:4px}
.nf-tab{border-radius:var(--radius-pill);padding:8px 18px;font-size:13px;font-weight:var(--weight-bold);color:var(--text-2);background:transparent;border:none;cursor:pointer;font-family:var(--font-sans)}
.nf-tab--active{background:var(--surface-card);color:var(--ink);box-shadow:var(--shadow-raised)}

/* Tooltip */
.nf-tooltip{background:var(--ink);color:#fff;border-radius:var(--radius-tile);padding:8px 14px;font-size:12.5px;font-weight:var(--weight-semi);display:inline-block;line-height:1.4}