/**
 * Publishing Platform — Shell CSS
 * Loaded only on publishing_* pages via conditional include in header.php.
 * All selectors scoped to .pub-platform — no globals.
 */

/* ========================================================================
   CPPOLISH:PUBLISH_BASE_TOKENS v1
   ======================================================================== */
.pub-platform {
    --ps-space-xs:   0.25rem;
    --ps-space-sm:   0.5rem;
    --ps-space-md:   1rem;
    --ps-space-lg:   1.5rem;
    --ps-space-xl:   2rem;
    --ps-space-2xl:  3rem;

    --ps-radius:     0.75rem;
    --ps-radius-sm:  0.5rem;
    --ps-radius-lg:  1rem;

    --ps-border:     #e2e8f0;
    --ps-surface:    #ffffff;
    --ps-surface-2:  #f8fafc;
    --ps-text:       #1e293b;
    --ps-text-muted: #64748b;
    --ps-accent:     #667eea;
    --ps-accent-light: rgba(102, 126, 234, 0.08);

    --ps-font-xs:    0.6875rem;   /* 11px */
    --ps-font-sm:    0.8125rem;   /* 13px */
    --ps-font-base:  0.9375rem;   /* 15px */
    --ps-font-md:    1.0625rem;   /* 17px */
    --ps-font-lg:    1.25rem;     /* 20px */
    --ps-font-xl:    1.5rem;      /* 24px */
    --ps-font-2xl:   2rem;        /* 32px */
}

/* ========================================================================
   CPPOLISH:PUBLISH_SHELL v1
   ======================================================================== */

/* --- Shell (page-level rhythm) --- */
.pub-platform .ps-shell {
    padding-top: var(--ps-space-lg);
    padding-bottom: var(--ps-space-2xl);
}

/* --- Header (premium hero/header card) --- */
.pub-platform .ps-header {
    margin-bottom: var(--ps-space-xl);
}

/* --- Title --- */
.pub-platform .ps-title {
    font-size: var(--ps-font-2xl);
    font-weight: 800;
    color: var(--ps-text);
    line-height: 1.2;
    margin: 0 0 var(--ps-space-sm);
    letter-spacing: -0.01em;
}

/* --- Actions (button grouping) --- */
.pub-platform .ps-actions {
    display: flex;
    gap: var(--ps-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* --- Card (section cards) --- */
.pub-platform .ps-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: var(--ps-space-lg);
    margin-bottom: var(--ps-space-lg);
}

.pub-platform .ps-card-title {
    font-size: var(--ps-font-lg);
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 var(--ps-space-md);
    line-height: 1.3;
}

/* --- Meta / Badge (date, type, status indicators) --- */
.pub-platform .ps-meta {
    display: flex;
    align-items: center;
    gap: var(--ps-space-sm);
    flex-wrap: wrap;
    font-size: var(--ps-font-sm);
    color: var(--ps-text-muted);
}

.pub-platform .ps-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ps-space-xs);
    font-size: var(--ps-font-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: var(--ps-accent-light);
    color: var(--ps-accent);
    white-space: nowrap;
}

/* --- Mobile (<=48rem) --- */
@media (max-width: 48rem) {
    .pub-platform .ps-shell {
        padding-top: var(--ps-space-md);
        padding-bottom: var(--ps-space-xl);
    }

    .pub-platform .ps-title {
        font-size: var(--ps-font-xl);
    }

    .pub-platform .ps-header {
        margin-bottom: var(--ps-space-lg);
    }

    .pub-platform .ps-actions {
        width: 100%;
    }

    .pub-platform .ps-card {
        padding: var(--ps-space-md);
        border-radius: var(--ps-radius-sm);
    }

    .pub-platform .ps-meta {
        font-size: var(--ps-font-xs);
    }
}