/* =========================================================
   CNTS PROJECT MANAGEMENT v1.0.0
   ========================================================= */

.cnts-project-management-page > .cnts-section > .cnts-container,
.cnts-project-management-page .cnts-hub-ticker > .cnts-container {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cnts-project-management-hero {
    padding-top: 86px;
    padding-bottom: 82px;
}

.cnts-project-management-hero .cnts-lead {
    max-width: 820px;
}

.cnts-project-management-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.cnts-project-management-stat {
    min-height: 138px;
    padding: 22px;
    background: #171717;
    color: #f1ede5;
    border: 1px solid rgba(0,0,0,.12);
}

.cnts-project-management-stat-alert {
    border-top: 3px solid #e3262e;
}

.cnts-project-management-stat span,
.cnts-project-management-stat small {
    display: block;
}

.cnts-project-management-stat span {
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: .58;
}

.cnts-project-management-stat strong {
    display: block;
    margin: 10px 0 9px;
    color: #fff;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
}

.cnts-project-management-stat small {
    font-size: .75rem;
    opacity: .65;
}

.cnts-project-management-list {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.cnts-project-management-card {
    padding: 24px;
    background: #fff;
    color: #171717;
    border: 1px solid rgba(255,255,255,.10);
}

.cnts-project-management-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cnts-project-management-kicker {
    margin-bottom: 6px;
    color: #a82820;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cnts-project-management-card h3,
.cnts-project-lead-card h3 {
    margin: 0;
}

.cnts-project-management-progress-value {
    font-size: 1.25rem;
    font-weight: 900;
}

.cnts-project-management-progress {
    height: 8px;
    margin-top: 18px;
    overflow: hidden;
    background: rgba(0,0,0,.09);
}

.cnts-project-management-progress span {
    display: block;
    height: 100%;
    background: currentColor;
}

.cnts-project-management-task-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.cnts-project-management-task-grid div {
    padding: 13px;
    background: rgba(0,0,0,.035);
    border: 1px solid rgba(0,0,0,.07);
}

.cnts-project-management-task-grid strong,
.cnts-project-management-task-grid span {
    display: block;
}

.cnts-project-management-task-grid strong {
    font-size: 1.28rem;
}

.cnts-project-management-task-grid span {
    margin-top: 3px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .55;
}

.cnts-project-management-count-alert {
    border-top: 3px solid #e3262e !important;
}

.cnts-project-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}

.cnts-project-management-actions a {
    font-size: .80rem;
    font-weight: 800;
    text-decoration: none !important;
}

.cnts-project-lead-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.cnts-project-lead-card {
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
}

.cnts-project-lead-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cnts-project-lead-person img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.cnts-project-lead-person p {
    margin: 4px 0 0;
    font-size: .78rem;
    opacity: .6;
}

.cnts-project-lead-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.cnts-project-lead-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cnts-project-management-empty {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.cnts-project-management-empty-light {
    border-color: rgba(0,0,0,.10);
    background: #fff;
}

@media (max-width: 960px) {

    .cnts-project-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cnts-project-management-task-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cnts-project-lead-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .cnts-project-management-page > .cnts-section > .cnts-container,
    .cnts-project-management-page .cnts-hub-ticker > .cnts-container {
        width: calc(100% - 36px);
    }

    .cnts-project-management-stats,
    .cnts-project-management-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cnts-project-management-card-head {
        flex-direction: column;
    }
}

/* Project creation and editing. */
.cnts-project-management-page .cnts-pm-form{display:grid;gap:18px;max-width:880px;margin-top:24px;padding:26px;background:#202123;border:1px solid #45484c;border-radius:12px;color:#eee9e1}
.cnts-project-management-page .cnts-pm-form label{display:grid;gap:7px;font-size:15px;font-weight:600;color:#eee9e1}
.cnts-project-management-page .cnts-pm-form input,.cnts-project-management-page .cnts-pm-form select,.cnts-project-management-page .cnts-pm-form textarea{width:100%;max-width:100%;background:#111315;color:#f5f1eb;border:1px solid #62676d;border-radius:6px;padding:11px 13px;font:inherit;box-sizing:border-box}
.cnts-project-management-page .cnts-pm-form input:focus,.cnts-project-management-page .cnts-pm-form select:focus,.cnts-project-management-page .cnts-pm-form textarea:focus{outline:2px solid #d7b986;outline-offset:2px}
.cnts-project-management-page .cnts-pm-form fieldset{border:1px solid #60656a;border-radius:8px;padding:20px;margin:0;min-width:0}
.cnts-project-management-page .cnts-pm-form fieldset[hidden]{display:none}
.cnts-project-management-page .cnts-pm-form legend{color:#d7b986;padding:0 8px;font-weight:700}
.cnts-project-management-page .cnts-pm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cnts-project-management-page .cnts-pm-success{padding:14px 18px;background:#203a29;color:#e3f3e5;border-left:4px solid #8bba8a}
.cnts-project-management-page .cnts-pm-muted,.cnts-project-management-page .cnts-pm-episode{color:#bdb6aa;font-size:14px;line-height:1.5}
.cnts-project-management-page #project-editor,.cnts-project-management-page #project-list{scroll-margin-top:30px}
@media(max-width:600px){.cnts-project-management-page .cnts-pm-fields{grid-template-columns:1fr}.cnts-project-management-page .cnts-pm-form{padding:18px}}