/* ════════════════════════════════════════════════════════════════════════
   registrar.css — brush for the REGISTRAR Profile panel
   (zViews/zAccount/zRM_public/zUI.Profile.zolo). Opt in with zBrush: [registrar].
   Deliberately NOT the %profileHero brush (profile.css): a registrar is a lean
   identity, so this is a calm, web-standard account card — one quiet surface,
   a single hairline accent, a label/value facts strip, and a settings-style
   Account & Security list. No radial glow storms, no pulsing avatar, no
   gradient-shadowed display name. Builds on the canonical zC_Main.css tokens.
   ════════════════════════════════════════════════════════════════════════ */

.zc-rp {
    width:         100%;
    max-width:     760px;
    margin:        0.5rem auto 3rem;
    padding:       0;
    color:         var(--text-light, #EAECEF);
}

/* ── Identity header ─────────────────────────────────────────────────────── */
.zc-rp-head {
    display:       flex;
    align-items:   center;
    gap:           1.15rem;
    padding:       1.75rem 1.9rem;
    background:    var(--zc-surface, rgba(255, 255, 255, 0.03));
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}
.zc-rp-avatar {
    flex:            0 0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.04);
    border:          1px solid rgba(255, 255, 255, 0.12);
    color:           var(--text-gray, #B4BBC8);
}
.zc-rp-avatar .zIcon,
.zc-rp-avatar i {
    font-size:   2.35rem;
    line-height: 1;
}
.zc-rp-identity {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    min-width:      0;
    flex:           1 1 auto;
}
.zc-rp-badge {
    color:          #8fae6b;
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.zc-rp-name {
    margin:         0;
    font-size:      1.5rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    color:          var(--text-light, #EAECEF);
    line-height:    1.2;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}
.zc-rp-email {
    margin:    0;
    color:     var(--text-gray, #B4BBC8);
    font-size: 0.9rem;
}
.zc-rp-edit { flex: 0 0 auto; }
.zc-rp-edit-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.5rem 1.1rem;
    background:    rgba(255, 255, 255, 0.05);
    border:        1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color:         var(--text-light, #EAECEF);
    font-size:     0.85rem;
    font-weight:   600;
    white-space:   nowrap;
    transition:    background 0.18s ease, border-color 0.18s ease;
}
.zc-rp-edit-btn:hover {
    background:   rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.24);
}

/* ── Account facts — quiet label/value strip ─────────────────────────────── */
.zc-rp-facts {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    margin:                1rem 0 0;
    background:            rgba(255, 255, 255, 0.07);
    border:                1px solid rgba(255, 255, 255, 0.08);
    border-radius:         14px;
    overflow:              hidden;
}
.zc-rp-fact {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    padding:        1rem 1.2rem;
    background:     var(--primary-dark, #0A0E27);
}
.zc-rp-fact-label {
    margin:         0;
    color:          var(--text-gray, #B4BBC8);
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity:        0.85;
}
.zc-rp-fact-value {
    margin:      0;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--text-light, #EAECEF);
}

/* ── zCloud upgrade seat — calm invite, single left accent ───────────────── */
.zc-rp-cloud {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             0.35rem 1.25rem;
    margin:          1rem 0 0;
    padding:         1.4rem 1.6rem;
    border-radius:   14px;
    background:      linear-gradient(135deg, rgba(124, 58, 237, 0.13), rgba(79, 70, 229, 0.04));
    border:          1px solid rgba(167, 139, 250, 0.26);
}
.zc-rp-cloud-title {
    flex:        1 1 100%;
    margin:      0;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--text-light, #EAECEF);
}
.zc-rp-cloud-body {
    flex:      1 1 300px;
    margin:    0;
    color:     var(--text-gray, #B4BBC8);
    font-size: 0.92rem;
    line-height: 1.55;
}
.zc-rp-cloud .zc-btn { flex: 0 0 auto; }

/* ── Account & security — settings-style rows ────────────────────────────── */
.zc-rp-section {
    margin:        1.75rem 0 0;
    padding:       0.4rem 1.6rem 0.6rem;
    background:    var(--zc-surface, rgba(255, 255, 255, 0.03));
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}
.zc-rp-section-title {
    margin:         0;
    padding:        1.1rem 0 0.4rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--text-gray, #B4BBC8);
}
.zc-rp-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         1.1rem 0;
    border-top:      1px solid rgba(255, 255, 255, 0.07);
}
.zc-rp-row-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    min-width:      0;
}
.zc-rp-row-label {
    margin:      0;
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--text-light, #EAECEF);
}
.zc-rp-row-hint {
    margin:    0;
    color:     var(--text-gray, #B4BBC8);
    font-size: 0.83rem;
    line-height: 1.5;
}
/* the reset link + the CLI mint trigger — same quiet pill affordance */
.zc-rp-row-action,
.zc-rp-row .zModal-trigger,
.zc-rp-row button {
    flex:          0 0 auto;
    padding:       0.5rem 1.05rem;
    background:    rgba(255, 255, 255, 0.05);
    border:        1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color:         var(--text-light, #EAECEF);
    font-size:     0.85rem;
    font-weight:   600;
    white-space:   nowrap;
    transition:    background 0.18s ease, border-color 0.18s ease;
}
.zc-rp-row-action:hover,
.zc-rp-row .zModal-trigger:hover,
.zc-rp-row button:hover {
    background:   rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.24);
    color:        var(--text-light, #EAECEF);
}

/* ════════════════════════════════════════════════════════════════════════
   Subscriber/team Profile extensions (zViews/zAccount/zRM/zUI.Profile.zolo).
   Same calm language as the registrar card — these classes only add what
   subscriber data actually supports: cover strip, real avatar image, plan
   badge, headline, live stats strip, and the zCard story block.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cover — a quiet banner above the identity card, only when a Media
      kind:cover row exists ─────────────────────────────────────────────── */
.zc-rp-cover {
    margin:        0 0 1rem;
    border-radius: 16px;
    overflow:      hidden;
    border:        1px solid rgba(255, 255, 255, 0.08);
    max-height:    180px;
}
.zc-rp-cover-img,
.zc-rp-cover img {
    display:    block;
    width:      100%;
    height:     180px;
    object-fit: cover;
}

/* ── Avatar image variant — fills the same circle the icon fallback uses ── */
.zc-rp-avatar { overflow: hidden; }
.zc-rp-avatar-img,
.zc-rp-avatar img {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 50%;
}

/* ── Badge row — registrant badge + plan chip side by side ───────────────── */
.zc-rp-badges {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
}
.zc-rp-badge-plan {
    padding:       0.1rem 0.55rem;
    border-radius: 999px;
    background:    rgba(124, 58, 237, 0.16);
    border:        1px solid rgba(167, 139, 250, 0.32);
    color:         #c4b5fd;
}

.zc-rp-headline {
    margin:     0;
    color:      var(--text-light, #EAECEF);
    font-size:  0.95rem;
    opacity:    0.9;
}

/* ── Stats — live aggregates strip, same visual as the facts grid ────────── */
.zc-rp-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    margin:                1rem 0 0;
    background:            rgba(255, 255, 255, 0.07);
    border:                1px solid rgba(255, 255, 255, 0.08);
    border-radius:         14px;
    overflow:              hidden;
}
.zc-rp-stat {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    padding:        1.05rem 1.2rem;
    background:     var(--primary-dark, #0A0E27);
}
.zc-rp-stat-value {
    margin:      0;
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--text-light, #EAECEF);
}
.zc-rp-stat-label {
    margin:         0;
    color:          var(--text-gray, #B4BBC8);
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity:        0.85;
}

/* ── Story — bio + detail chips from zCard ───────────────────────────────── */
.zc-rp-story-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}
.zc-rp-bio {
    margin:      0.5rem 0 0.9rem;
    color:       var(--text-light, #EAECEF);
    font-size:   0.95rem;
    line-height: 1.65;
    opacity:     0.92;
}
.zc-rp-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.6rem;
    padding:   0.2rem 0 1.1rem;
}
.zc-rp-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.45rem;
    padding:       0.4rem 0.9rem;
    background:    rgba(255, 255, 255, 0.04);
    border:        1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color:         var(--text-gray, #B4BBC8);
    font-size:     0.85rem;
}
.zc-rp-chip .zIcon,
.zc-rp-chip i { font-size: 0.95rem; line-height: 1; }
.zc-rp-chip p { margin: 0; }
.zc-rp-chip a {
    color:           #c4b5fd;
    text-decoration: none;
}
.zc-rp-chip a:hover { text-decoration: underline; }

/* ── AvatarPicker — the "edit profile photo" modal (zUI.AvatarPicker.zolo).
      Renders inside the zModal overlay card: upload affordance up top, the
      media bin as a WordPress-style thumbnail grid below. ─────────────────── */
.zc-avatar-picker { max-width: 560px; }
.zc-avatar-sub {
    margin:      0.25rem 0 1rem;
    color:       var(--text-gray, #B4BBC8);
    font-size:   0.9rem;
    line-height: 1.55;
}
.zc-avatar-upload { padding: 0 0 1.1rem; }
.zc-avatar-bin {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap:                   0.8rem;
    padding-top:           0.35rem;
}
.zc-avatar-tile {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    padding:        0.55rem;
    background:     rgba(255, 255, 255, 0.03);
    border:         1px solid rgba(255, 255, 255, 0.09);
    border-radius:  12px;
}
.zc-avatar-thumb,
.zc-avatar-tile img {
    display:       block;
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: 8px;
}
.zc-avatar-tile-kind {
    margin:         0;
    color:          var(--text-gray, #B4BBC8);
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* the per-tile "Use as avatar" live confirm — flatten the dialog chrome so
   it reads as the tile's own button */
.zc-avatar-use .zDialog-live { margin: 0; }
.zc-avatar-use button { width: 100%; font-size: 0.8rem; }

@media (max-width: 640px) {
    .zc-rp        { margin: 0.5rem 0 2.5rem; }
    .zc-rp-head   { flex-wrap: wrap; }
    .zc-rp-facts,
    .zc-rp-stats  { grid-template-columns: 1fr; }
    .zc-rp-row    { flex-direction: column; align-items: flex-start; }
    .zc-avatar-bin { grid-template-columns: repeat(2, 1fr); }
}