/* ============================================================================
 * Mock-only component kit (mk-*). Composed from DataRipple tokens; reuses the
 * live app.css rc-* primitives (rc-card, rc-input, rc-select, rc-switch,
 * rc-btn, rc-settings-form, rc-field) wherever they exist.
 * ==========================================================================*/

/* avatars */
.mk-av { border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; font-weight: 700; flex: 0 0 auto; }
.mk-av.lg { width: 64px; height: 64px; font-size: 22px; }
.mk-av.md { width: 38px; height: 38px; font-size: 14px; }
.mk-av.sm { width: 30px; height: 30px; font-size: 12px; }
.mk-av.a2 { background: var(--orange); }
.mk-av.a3 { background: var(--viz-purple); }
.mk-av.a4 { background: var(--viz-teal); }
.mk-av.a5 { background: var(--viz-blue-mid); }

/* status pills */
.mk-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--fg-3); background: var(--surface); white-space: nowrap; }
.mk-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-pill.ok { color: var(--success); background: var(--success-soft); border-color: transparent; }
.mk-pill.warn { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.mk-pill.info { color: var(--sky-dark); background: var(--violet-soft); border-color: transparent; }
.mk-pill.off { color: var(--fg-dim); }

/* list rows (connected accounts, sessions, integrations, invoices) */
.mk-list { display: flex; flex-direction: column; }
.mk-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); }
.mk-row:last-child { border-bottom: none; }
.mk-row .mk-ricon { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--fg-2); flex: 0 0 auto; }
.mk-row .mk-rmain { flex: 1 1 auto; min-width: 0; }
.mk-row .mk-rmain .t { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.mk-row .mk-rmain .d { font-size: 12px; color: var(--fg-3); margin-top: 1px; line-height: 1.45; }
.mk-row .mk-ractions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* notification matrix */
.mk-matrix { width: 100%; border-collapse: collapse; }
.mk-matrix th { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-dim); text-align: center; padding: 0 8px 12px; white-space: nowrap; }
.mk-matrix th.l { text-align: left; padding-left: 2px; }
.mk-matrix td { padding: 13px 8px; border-top: 1px solid var(--border); text-align: center; }
.mk-matrix td.l { text-align: left; padding-left: 2px; }
.mk-matrix td.l .t { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.mk-matrix td.l .d { font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; line-height: 1.4; }

/* segmented control (theme, density, etc.) */
.mk-seg { display: inline-flex; gap: 2px; background: var(--bg-3); border-radius: 8px; padding: 3px; }
.mk-seg button { border: none; background: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--fg-3); padding: 6px 15px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.mk-seg button:hover { color: var(--fg-1); }
.mk-seg button.on { background: var(--surface); color: var(--fg-1); box-shadow: var(--shadow-sm); }

/* key-value rows */
.mk-kv { display: flex; flex-direction: column; }
.mk-kv .r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mk-kv .r:last-child { border-bottom: none; }
.mk-kv .r .k { color: var(--fg-3); }
.mk-kv .r .v { color: var(--fg-1); font-weight: 600; text-align: right; }

/* member table */
.mk-members { width: 100%; border-collapse: collapse; }
.mk-members th { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-dim); text-align: left; padding: 0 12px 11px; }
.mk-members th.c, .mk-members td.c { text-align: center; }
.mk-members th.r, .mk-members td.r { text-align: right; }
.mk-members td { padding: 12px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; color: var(--fg-2); }
.mk-members tr:hover td { background: var(--surface-1); }
.mk-members .who { display: flex; align-items: center; gap: 11px; }
.mk-members .who .t { font-weight: 600; color: var(--fg-1); }
.mk-members .who .e { font-size: 12px; color: var(--fg-dim); }

/* role tiles */
.mk-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.mk-role { border: 1px solid var(--border); border-radius: 10px; padding: 15px 16px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.mk-role:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.mk-role.sys { background: var(--card-2); }
.mk-role .rn { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--fg-1); display: flex; align-items: center; gap: 8px; }
.mk-role .rw { font-size: 11px; color: var(--fg-dim); margin: 4px 0 9px; }
.mk-role .rs { font-size: 12px; color: var(--fg-3); line-height: 1.5; min-height: 34px; }
.mk-role .rf { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--fg-dim); display: flex; align-items: center; justify-content: space-between; }
.mk-role .rf .cnt { color: var(--teal); font-weight: 600; }

/* permission matrix (roles.html) */
.mk-permwrap { overflow-x: auto; }
.mk-perm { width: 100%; border-collapse: collapse; min-width: 620px; }
.mk-perm th { font-size: 11px; font-weight: 700; text-align: center; color: var(--fg-2); padding: 10px 6px; white-space: nowrap; }
.mk-perm th.l { text-align: left; width: 42%; }
.mk-perm td { padding: 9px 6px; border-top: 1px solid var(--border); text-align: center; }
.mk-perm td.l { text-align: left; font-size: 13px; color: var(--fg-2); }
.mk-perm td.l .d { font-size: 11px; color: var(--fg-dim); margin-top: 1px; }
.mk-perm .grp-row td { background: var(--surface-1); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-dim); text-align: left; padding: 7px 6px; }
.mk-lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 25px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 600; border: 1px solid transparent; cursor: pointer; user-select: none; }
.mk-lvl.none { color: var(--fg-dim); background: var(--surface-2); }
.mk-lvl.view { color: var(--sky-dark); background: var(--violet-soft); }
.mk-lvl.edit { color: var(--success); background: var(--success-soft); font-weight: 700; }
.mk-lvl.admin { color: var(--orange-dark); background: var(--orange-glow); font-weight: 700; }

/* helpers */
.mk-help { font-size: 12px; color: var(--fg-3); line-height: 1.55; margin: 0 0 14px; max-width: 640px; }
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .mk-grid-2, .mk-grid-3 { grid-template-columns: 1fr; } }
.mk-scope-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-3); padding: 4px 10px; border-radius: 99px; background: var(--surface-2); }
.mk-scope-tag .rc-ic { color: var(--fg-dim); }
.mk-stat { display: flex; align-items: baseline; gap: 7px; }
.mk-stat .num { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--fg-1); }
.mk-stat .lbl { font-size: 12px; color: var(--fg-3); }