/* ════════════════════════════════════════════════════════════════════════
   myapps.css — brush for the My Apps panel (zViews/zAccount/zRM/
   zUI.MyApps.zolo). Opt in with zMeta.zBrush: [myapps]. Builds ON the
   canonical zc-* tokens from zC_Main.css and the same brand glow language as
   profile.css/media.css — one visual family across zRM's panels.
   ════════════════════════════════════════════════════════════════════════ */

.zc-myapps {
    position:      relative;
    width:         100%;
    margin:        0 0 2.5rem;
    padding:       2rem 2.25rem 2.5rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: calc(var(--zc-radius) + 6px);
    box-shadow:    var(--zc-shadow-hover, 0 24px 56px rgba(0, 0, 0, 0.4));
    overflow:      hidden;
    isolation:     isolate;
}
.zc-myapps::before {
    content:        '';
    position:       absolute;
    inset:          -40% -10% auto -10%;
    height:         420px;
    z-index:        0;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 28% 25%, rgba(124, 58, 237, 0.22), transparent 68%),
        radial-gradient(45% 55% at 78% 10%, rgba(79, 70, 229, 0.14), transparent 70%);
}
.zc-myapps > * { position: relative; z-index: 1; }

.zc-myapps-header h2 {
    margin:          0;
    font-size:       clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight:     800;
    letter-spacing:  -0.02em;
    background:      var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color:           transparent;
}
.zc-myapps-sub {
    margin:    0.35rem 0 0;
    color:     var(--text-gray);
    font-size: 0.9rem;
    max-width: 56ch;
}

/* ── Stats strip — same recipe as Media's ── */
.zc-myapps-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
    margin-top:            1.5rem;
}
.zc-myapps-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.15rem;
    padding:        0.85rem 0.5rem;
    background:     rgba(255, 255, 255, 0.035);
    border:         1px solid rgba(255, 255, 255, 0.07);
    border-radius:  14px;
}
.zc-myapps-stat-value {
    margin:      0;
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--text-light);
}
.zc-myapps-stat-label {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align:     center;
}

/* ── Registry grid — one card per zApps row ── */
.zc-myapps-list {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   1rem;
    margin-top:            1.75rem;
}
.zc-myapps-card {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    padding:        1rem 1.1rem;
    background:     rgba(255, 255, 255, 0.03);
    border:         1px solid rgba(255, 255, 255, 0.08);
    border-radius:  14px;
    transition:     border-color 0.2s ease, transform 0.2s ease;
}
.zc-myapps-card:hover {
    border-color: rgba(196, 181, 253, 0.4);
    transform:    translateY(-2px);
}
.zc-myapps-card-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             0.5rem;
}
.zc-myapps-card-name {
    margin:      0;
    color:       var(--text-light);
    font-size:   1rem;
    font-weight: 700;
}
.zc-myapps-card-status {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        0.2rem 0.55rem;
    border-radius:  980px;
    background:     rgba(255, 255, 255, 0.06);
    white-space:    nowrap;
}
.zc-myapps-card-meta {
    margin:    0;
    color:     var(--text-gray);
    font-size: 0.78rem;
}
.zc-myapps-open {
    margin-top: 0.25rem;
}

/* ── Card actions — Open link + the one-click Details confirm ── */
.zc-myapps-card-actions {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    margin-top:  0.25rem;
}
/* the fields-less zLive confirm renders as a single button — flatten its
   form chrome so it reads as a text action beside the Open link */
.zc-myapps-details-btn form { margin: 0; }
.zc-myapps-details-btn button {
    padding:     0.25rem 0.7rem;
    font-size:   0.78rem;
    font-weight: 600;
    color:       var(--text-light);
    background:  rgba(255, 255, 255, 0.06);
    border:      1px solid rgba(255, 255, 255, 0.12);
    border-radius: 980px;
    cursor:      pointer;
    transition:  border-color 0.2s ease;
}
.zc-myapps-details-btn button:hover { border-color: rgba(196, 181, 253, 0.5); }

/* ── Detail drawer — the selected app + its zRelease push history ── */
.zc-myapps-detail {
    margin-top:    1.5rem;
    padding:       1.25rem 1.4rem;
    background:    rgba(124, 58, 237, 0.06);
    border:        1px solid rgba(196, 181, 253, 0.25);
    border-radius: 16px;
}
.zc-myapps-detail-head {
    display:     flex;
    align-items: baseline;
    gap:         0.75rem;
}
.zc-myapps-detail-name {
    margin:      0;
    color:       var(--text-light);
    font-size:   1.1rem;
    font-weight: 800;
}
.zc-myapps-detail-status {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        0.2rem 0.55rem;
    border-radius:  980px;
    background:     rgba(255, 255, 255, 0.06);
}
.zc-myapps-detail-close { margin-left: auto; }
.zc-myapps-detail-close form { margin: 0; }
.zc-myapps-detail-close button {
    padding:       0.2rem 0.6rem;
    font-size:     0.75rem;
    color:         var(--text-gray);
    background:    transparent;
    border:        1px solid rgba(255, 255, 255, 0.15);
    border-radius: 980px;
    cursor:        pointer;
}
.zc-myapps-detail-facts p {
    margin:    0.35rem 0 0;
    color:     var(--text-gray);
    font-size: 0.82rem;
}

/* ── Listing — the zFeed facade editor (cover / name / tagline / tags) ── */
.zc-myapps-listing {
    margin-top:  1rem;
    padding-top: 0.9rem;
    border-top:  1px solid rgba(255, 255, 255, 0.08);
}
.zc-myapps-listing h3,
.zc-myapps-settings h3 {
    margin:         0 0 0.2rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-gray);
}
.zc-myapps-listing-cover {
    display:     flex;
    align-items: flex-end;
    gap:         0.9rem;
    margin-top:  0.5rem;
}
/* _zClass hoists onto the <img> itself — no wrapper div in the DOM */
img.zc-myapps-cover-preview {
    width:         180px;
    aspect-ratio:  16 / 9;
    object-fit:    cover;
    border-radius: 10px;
    border:        1px solid rgba(255, 255, 255, 0.1);
    display:       block;
}
/* the client renders a BARE <input type=file> (no label element) — dress
   the native picker button itself */
.zc-myapps-cover-input {
    font-size: 0.75rem;
    color:     var(--text-gray);
    max-width: 240px;
}
.zc-myapps-cover-input::file-selector-button {
    padding:       0.3rem 0.85rem;
    margin-right:  0.6rem;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--text-light);
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.15);
    border-radius: 980px;
    cursor:        pointer;
    transition:    border-color 0.2s ease;
}
.zc-myapps-cover-input::file-selector-button:hover {
    border-color: rgba(196, 181, 253, 0.5);
}
/* the zDialog renders INLINE (title + fields + Submit) — stack the hint
   under the form, not beside it */
.zc-myapps-listing-edit {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.4rem;
    margin-top:     0.7rem;
}
.zc-myapps-listing-edit h1,
.zc-myapps-listing-edit h2 {
    font-size: 1rem;
    margin:    0.3rem 0 0;
}
.zc-myapps-listing-hint {
    margin:     0;
    font-size:  0.72rem;
    font-style: italic;
    color:      var(--text-gray);
}

/* ── Source & lifecycle — download door + the delete ritual ── */
.zc-myapps-source,
.zc-myapps-danger {
    margin-top:  1rem;
    padding-top: 0.9rem;
    border-top:  1px solid rgba(255, 255, 255, 0.08);
}
.zc-myapps-source h3,
.zc-myapps-danger h3 {
    margin:         0 0 0.2rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-gray);
}
.zc-myapps-danger h3 { color: #fca5a5; }
a.zc-myapps-download {
    display:       inline-block;
    margin-top:    0.4rem;
    padding:       0.3rem 0.85rem;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--text-light);
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.15);
    border-radius: 980px;
    text-decoration: none;
    transition:    border-color 0.2s ease;
}
a.zc-myapps-download:hover { border-color: rgba(196, 181, 253, 0.5); }
.zc-myapps-source-hint,
.zc-myapps-danger-hint {
    margin:     0.4rem 0 0;
    font-size:  0.72rem;
    font-style: italic;
    color:      var(--text-gray);
}
/* the inline delete dialog — compact, red-rimmed */
.zc-myapps-danger {
    border:        1px solid rgba(248, 113, 113, 0.25);
    border-radius: 12px;
    padding:       0.8rem 1rem 0.9rem;
    margin-top:    1.2rem;
}
.zc-myapps-delete h1,
.zc-myapps-delete h2 {
    font-size: 0.9rem;
    margin:    0.3rem 0 0;
}
.zc-myapps-delete button[type="submit"] {
    color:         #fca5a5 !important;
    background:    rgba(248, 113, 113, 0.12) !important;
    border:        1px solid rgba(248, 113, 113, 0.4) !important;
    border-radius: 980px;
}
.zc-myapps-delete button[type="submit"]:hover {
    border-color: rgba(248, 113, 113, 0.8) !important;
}

/* ── App settings — the post-push knobs (status + visibility toggles) ── */
.zc-myapps-settings {
    margin-top:    1rem;
    padding-top:   0.9rem;
    border-top:    1px solid rgba(255, 255, 255, 0.08);
}
.zc-myapps-settings-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.6rem;
    margin-top:  0.4rem;
}
.zc-myapps-toggle form { margin: 0; }
.zc-myapps-toggle button {
    padding:       0.3rem 0.85rem;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--text-light);
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.15);
    border-radius: 980px;
    cursor:        pointer;
    transition:    border-color 0.2s ease;
}
.zc-myapps-toggle button:hover { border-color: rgba(196, 181, 253, 0.5); }
.zc-myapps-toggle-danger button {
    color:        #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}
.zc-myapps-toggle-danger button:hover { border-color: rgba(248, 113, 113, 0.7); }
.zc-myapps-toggle-go button {
    color:        #86efac;
    border-color: rgba(74, 222, 128, 0.35);
}
.zc-myapps-toggle-go button:hover { border-color: rgba(74, 222, 128, 0.7); }

/* effective feed status — one honest line across all three privacy layers */
.zc-myapps-effective p {
    margin:    0.7rem 0 0;
    font-size: 0.8rem;
}
.zc-myapps-effective-on   { color: #86efac; }
.zc-myapps-effective-off  { color: #fca5a5; }
.zc-myapps-effective-link { color: var(--text-gray); }
.zc-myapps-effective-warn { color: #fcd34d; }
.zc-myapps-detail h3 {
    margin:         1.1rem 0 0.4rem;
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--text-gray);
}
.zc-myapps-builds {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}
.zc-myapps-build-row {
    display:       flex;
    align-items:   baseline;
    gap:           0.75rem;
    padding:       0.45rem 0.7rem;
    background:    rgba(255, 255, 255, 0.03);
    border:        1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.zc-myapps-build-status {
    margin:         0;
    min-width:      6.5rem;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-gray);
}
.zc-myapps-build-row .zc-myapps-build-status:first-letter { color: var(--text-light); }
.zc-myapps-build-meta {
    margin:    0;
    color:     var(--text-gray);
    font-size: 0.78rem;
}

/* ── Push kit — the teaching empty state's step list ── */
.zc-myapps-kit {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    margin-top:     0.75rem;
    text-align:     left;
}
.zc-myapps-kit p {
    margin:        0;
    padding:       0.5rem 0.8rem;
    color:         var(--text-gray);
    font-size:     0.82rem;
    background:    rgba(255, 255, 255, 0.03);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

/* ── Empty state — mirrors profile.css's Apps/Media empty-state look ── */
.zc-myapps-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    padding:        2.5rem 1rem;
    margin-top:     1.5rem;
    text-align:     center;
    background:     rgba(255, 255, 255, 0.02);
    border:         1px dashed rgba(255, 255, 255, 0.12);
    border-radius:  16px;
}
.zc-myapps-empty-title {
    margin:      0;
    color:       var(--text-light);
    font-weight: 700;
}
.zc-myapps-empty-body {
    margin:    0;
    color:     var(--text-gray);
    font-size: 0.85rem;
    max-width: 40ch;
}

@media (max-width: 640px) {
    .zc-myapps       { padding: 1.5rem 1.25rem 2rem; }
    .zc-myapps-stats { grid-template-columns: repeat(3, 1fr); }
    .zc-myapps-list  { grid-template-columns: 1fr; }
}