/*
 * Program Duration — the breakdown card + time badges.
 *
 * One look for the calculated session time wherever it appears: the gym
 * builder, the skill builder, the program detail, the session sheet. Markup
 * comes from MSDProgramDuration.panel() (JS) or msd_pd_panel() (PHP).
 *
 * Tokens only — this renders inside four different shells and must inherit
 * every one of them.
 */

.cjpd-panel {
    background: var(--msd-bg-3, #141414);
    border: 1px solid var(--msd-border-2, #242424);
    border-radius: var(--msd-r-md, 14px);
    padding: 14px 14px 12px;
    font-family: var(--msd-font-sans, 'DM Sans', system-ui, sans-serif);
}

.cjpd-panel.is-empty {
    opacity: .6;
}

/* ── the number ───────────────────────────────────────────────────────────── */
.cjpd-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.cjpd-total-num {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--msd-gold, #C9A84C);
}

.cjpd-total-unit {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--msd-text-2, #7a7a7a);
}

.cjpd-total-sub {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--msd-text-2, #7a7a7a);
}

/* ── work / rest / changeover bar ─────────────────────────────────────────── */
.cjpd-bar {
    display: flex;
    height: 8px;
    margin: 12px 0 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--msd-bg-1, #070707);
}

.cjpd-seg { display: block; height: 100%; }
.cjpd-seg.is-work   { background: var(--msd-gold, #C9A84C); }
.cjpd-seg.is-rest   { background: var(--msd-purple, #9b8ef5); opacity: .75; }
.cjpd-seg.is-change { background: var(--msd-text-3, #3a3a3a); }

.cjpd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--msd-text-2, #7a7a7a);
}

.cjpd-leg { display: inline-flex; align-items: center; gap: 5px; }
.cjpd-leg b { color: var(--msd-text, #efefef); font-weight: 600; }

.cjpd-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.cjpd-dot.is-work   { background: var(--msd-gold, #C9A84C); }
.cjpd-dot.is-rest   { background: var(--msd-purple, #9b8ef5); opacity: .75; }
.cjpd-dot.is-change { background: var(--msd-text-3, #3a3a3a); }

.cjpd-hint {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--msd-text-3, #3a3a3a);
}

/* ── compact variant (sits inside an already-dense panel) ─────────────────── */
.cjpd-panel.is-compact {
    padding: 10px 12px;
    border-radius: var(--msd-r-sm, 10px);
}
.cjpd-panel.is-compact .cjpd-total-num { font-size: 26px; }
.cjpd-panel.is-compact .cjpd-bar { margin: 9px 0 8px; height: 6px; }
.cjpd-panel.is-compact .cjpd-hint { display: none; }

/* ── inline time badge — section headers, exercise rows, list cards ───────── */
.cjpd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--msd-gold-dim, rgba(201, 168, 76, 0.13));
    color: var(--msd-gold, #C9A84C);
    font-family: var(--msd-font-sans, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.cjpd-badge.is-muted {
    background: var(--msd-bg-4, #1c1c1c);
    color: var(--msd-text-2, #7a7a7a);
}