/**
 * Pipii — OS Visual System (product-grade spacing & rhythm)
 * Load order: after style-app.css + marketplace-ds-v1.css
 *
 * Governance:
 * - style-dark.css: legacy global + admin
 * - style-app.css: app tokens + feature modules
 * - marketplace-ds-v1.css: marketplace primitives
 * - os-visual-system.css: spacing scale, page rhythm, cross-surface normalization (THIS FILE)
 *
 * Rule: prefer var(--space-*) and var(--rhythm-*) for new work; migrate ad-hoc px here when touching a block.
 *
 * Shell ownership (who owns max-width / horizontal rhythm — avoid stacking conflicting “page shells”):
 * - .site-header / .navbar: full-width chrome; inner .container aligns with main column.
 * - main.container.main-content: page insets via --page-pad-* below (do not add a second full-bleed wrapper for the same axis).
 * - .container (style-dark): max-width 1200px + legacy horizontal padding; combined with main padding — do not introduce triple horizontal inset on new pages.
 * - .os-product-surface (+ .os-surface--*): product workspaces inherit main width; never attach v2-marketing-page on the same root.
 * - .task-create-hub / .task-create-hub--studio: create/edit flows — max-width in style-dark (studio wide column); no marketing narrow shell.
 * - .v2-marketing-page (+ optional .v2-marketing-page--sm): standalone marketing / long-form — see os-marketing-surfaces.css (via style-app @import).
 * - .v2-conversion-shell: URL migration interstitial — see os-marketing-surfaces.css.
 * - .auth-container, .kol-auth-hub: card padding from style-app — deprecated v2-marketing layout must not return here.
 */

:root {
    /* 4-based scale — Stripe/Linear-style density without magic numbers */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 80px;

    /* Page shell — match legacy main: 36 / 24 / 64 (avoid “wrong” vertical jump) */
    --page-pad-x: var(--space-6);
    --page-pad-y-top: calc(var(--space-6) + var(--space-3));
    --page-pad-y-bottom: var(--space-11);

    /* Vertical rhythm between major blocks (Hero → strip → table → aside) */
    --rhythm-section: var(--space-7);
    --rhythm-tight: var(--space-4);
    --rhythm-loose: var(--space-8);

    /* Surfaces */
    --surface-pad: var(--space-5);
    --surface-pad-lg: var(--space-6);
    --hero-pad-x: var(--space-6);
    --hero-pad-y: var(--space-7);

    /* Tables */
    --table-cell-x: var(--space-4);
    --table-cell-y: var(--space-3);
    --table-head-y: var(--space-3);

    /* Controls */
    --control-gap: var(--space-3);
    --cta-gap: var(--space-3);
    --pill-gap: var(--space-2);

    /* Footer */
    --footer-margin-top: var(--space-12);
}

@media (max-width: 640px) {
    :root {
        --page-pad-x: var(--space-4);
        --page-pad-y-top: calc(var(--space-5) + var(--space-2));
        --page-pad-y-bottom: var(--space-9);
        --hero-pad-x: var(--space-4);
        --hero-pad-y: var(--space-5);
    }
}

/* ----------------------------------------------------------------------------- Main shell */
main.container,
main.main-content {
    padding: var(--page-pad-y-top) var(--page-pad-x) var(--page-pad-y-bottom);
}

main.main-content > h2:first-child,
main.container > h2:first-child {
    margin-top: var(--space-1);
    padding-bottom: var(--space-2);
}

/* Trust / flash rail */
.alert-wrap {
    padding-top: var(--space-3);
}

.os-trust-feed {
    padding-top: var(--space-3);
    padding-bottom: var(--space-0);
}

/* ----------------------------------------------------------------------------- OS product surfaces */
.os-product-surface {
    margin-bottom: var(--rhythm-section);
}

.os-applicants,
.os-task-detail,
.os-surface--settlements,
.os-surface--wallet,
.os-surface--campaigns,
.os-surface--kol-myops,
.os-surface--kol-discover {
    margin-bottom: var(--rhythm-section);
}

.os-queue-panel {
    padding: var(--surface-pad-lg) var(--surface-pad) calc(var(--surface-pad-lg) + var(--space-1));
}

.os-queue-head {
    margin-bottom: var(--space-4);
    gap: var(--space-4);
}

.os-table-shell {
    margin-top: var(--space-2);
}

.os-data-table th,
.os-data-table td {
    padding: var(--table-cell-y) var(--table-cell-x);
    vertical-align: middle;
}

.os-data-table thead th {
    padding-top: var(--table-head-y);
    padding-bottom: var(--table-head-y);
}

/* ----------------------------------------------------------------------------- Hero family (all os-hero--*) */
.os-hero--applicants,
.os-hero--executive,
.os-hero--intelligence,
.os-hero--settlements,
.os-hero--wallet,
.os-hero--kol-myops,
.os-hero--kol-discover {
    padding: var(--hero-pad-y) var(--hero-pad-x);
    margin-bottom: var(--rhythm-tight);
}

.os-hero__actions {
    gap: var(--cta-gap);
    margin-top: var(--space-4);
}

.os-kpi-grid {
    gap: var(--space-3);
}

.os-kpi {
    padding: var(--space-4) var(--space-4) var(--space-3);
    min-height: 96px;
}

/* ----------------------------------------------------------------------------- Funnel + insight strips */
.os-funnel-shell {
    margin: var(--rhythm-tight) 0 var(--space-3);
    gap: var(--space-3);
}

.os-funnel-shell--campaigns,
.os-funnel-shell--kol-myops,
.os-funnel-shell--kol-discover {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.os-funnel-label {
    margin: 0 0 var(--space-2);
}

.os-funnel-rail {
    gap: var(--pill-gap);
    padding-bottom: var(--space-1);
}

.os-funnel-pill {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
}

.os-attention-rail {
    margin: var(--space-5) 0 var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-5);
}

.os-attention-rail--compact {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-3);
}

.os-insight-strip {
    margin: var(--space-4) 0 var(--space-2);
    padding: var(--space-3) var(--space-3);
    gap: var(--pill-gap);
}

.os-insight-strip--dash {
    margin-top: var(--space-5);
}

/* ----------------------------------------------------------------------------- Bulk + toolbars */
.os-bulk-dock {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.os-bulk-dock__inner {
    gap: var(--space-3);
}

.os-bulk-dock__meta,
.os-bulk-dock__controls {
    gap: var(--space-3);
}

.os-bulk-bar {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.os-bulk-bar__inner {
    gap: var(--space-3);
}

.os-discover-filters {
    margin-bottom: var(--rhythm-tight);
    padding: var(--space-3) var(--space-4);
    gap: var(--control-gap);
}

.tasks-toolbar {
    margin: var(--space-4) 0;
    gap: var(--space-3);
}

.tasks-filter--advanced {
    margin-bottom: var(--space-4);
}

.tasks-list-section {
    margin-top: var(--space-2);
}

.tasks-pagination {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
}

/* ----------------------------------------------------------------------------- Pagination (global renderPagination) */
.pagination.v2-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3) 0 var(--space-2);
}

/* Only renderPagination() output — do not override admin / legacy .pagination */
.pagination.v2-pagination .page-link,
.pagination.v2-pagination .page-current {
    min-height: 40px;
    min-width: 40px;
    padding: var(--space-2) var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 10px);
}

/* ----------------------------------------------------------------------------- Empty + state plates */
.os-state-plate--empty,
.recruit-empty {
    padding: var(--space-8) var(--space-6) !important;
}

.recruit-empty-title {
    margin: 0 0 var(--space-2);
}

.recruit-empty-desc {
    margin: 0 0 var(--space-4);
}

.recruit-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cta-gap);
}

/* ----------------------------------------------------------------------------- Brand dashboard / analytics (v2-adv-dash) */
.v2-adv-dash.os-product-surface {
    gap: var(--rhythm-section);
    display: flex;
    flex-direction: column;
}

.v2-dash-hero,
.os-dash-hero {
    margin-bottom: var(--rhythm-tight);
    padding-bottom: var(--space-5);
}

.v2-metric-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--rhythm-section);
}

.v2-metric {
    flex: 1 1 140px;
    min-width: 120px;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
}

.v2-dash-panel {
    padding: var(--surface-pad-lg) var(--surface-pad);
}

.v2-dash-panel-head {
    margin-bottom: var(--space-4);
}

.v2-dash-empty {
    padding: var(--space-7) var(--space-5);
}

.v2-dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .v2-dash-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }
}

.mp-os-panel {
    padding: var(--surface-pad-lg) var(--surface-pad);
    margin-bottom: var(--rhythm-section);
}

.mp-os-panel__head {
    margin-bottom: var(--space-4);
}

.mp-os-kpi-grid {
    gap: var(--space-3);
}

.recruit-hub-grid {
    gap: var(--space-6);
}

.tasks-head--mission {
    margin-bottom: var(--space-2);
}

.tasks-head-main .tasks-hero-metrics {
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.detail-card {
    padding: var(--surface-pad-lg) var(--surface-pad);
    margin-bottom: var(--rhythm-tight);
}

.gang-context-bar {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
}

.kol-myops-table-wrap {
    margin-top: var(--space-2);
}

/* ----------------------------------------------------------------------------- Footer rhythm */
.site-footer {
    margin-top: var(--footer-margin-top);
}

.footer-grid {
    padding: var(--space-9) var(--page-pad-x) var(--space-7);
}

.footer-bottom {
    padding: var(--space-4) var(--page-pad-x) var(--space-7);
}

/* ----------------------------------------------------------------------------- Utility: vertical stack (optional markup) */
.os-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
}

.os-stack--tight {
    gap: var(--rhythm-tight);
}

/* -----------------------------------------------------------------------------
   Auth + KOL utility pages (narrow hubs inside main — avoid double “air pocket”)
   ----------------------------------------------------------------------------- */
main.container.main-content:has(.kol-auth-hub) {
    padding-top: var(--space-4);
}

.auth-container.kol-auth-hub {
    margin-top: var(--space-4);
    margin-bottom: var(--space-9);
}