/* ============================================================================
   course-widgets/process-phases.css -- widget #11 (process)
   horizontal phase stepper: tab rail + progress bar + body + prev/next.
   active phase marked by weight, border and an accent underline -- never by
   a per-phase hue. theme-token styled.
   ============================================================================ */

.cw-pp { display: flex; flex-direction: column; gap: 12px; }

/* --- tab rail ------------------------------------------------------------ */
.cw-pp-rail { display: flex; align-items: stretch; gap: 0; }
.cw-pp-tab {
    flex: 1; min-width: 0; position: relative; cursor: pointer; font: inherit;
    padding: 10px 8px; text-align: center; background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0;
    color: var(--cw-text); transition: background .2s ease, border-color .2s ease;
}
.cw-anim-on .cw-pp-tab:hover { background: var(--cw-accent-soft); }
.cw-pp-tab.is-active { background: var(--cw-accent-soft); border-color: var(--cw-border); }
.cw-pp-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cw-accent); border-radius: 8px; }
.cw-pp-num {
    display: block; font-size: 0.68rem; font-weight: 600; color: var(--cw-muted);
    opacity: .7; margin-bottom: 2px;
}
.cw-pp-name {
    display: block; font-size: 0.8rem; font-weight: 600; color: var(--cw-muted);
}
.cw-pp-tab.is-active .cw-pp-name { font-weight: 700; color: var(--cw-text); }
.cw-pp-time { display: block; font-size: 0.68rem; color: var(--cw-muted); margin-top: 2px; }
.cw-pp-bar {
    position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
    border-radius: 3px; background: var(--cw-border); transition: background .25s ease, height .25s ease;
}
.cw-pp-tab.is-active .cw-pp-bar { background: var(--cw-accent); height: 3px; }

/* --- progress bar -------------------------------------------------------- */
.cw-pp-progress { height: 2px; background: var(--cw-border); border-radius: 1px; overflow: hidden; }
.cw-pp-progress-fill { height: 100%; background: var(--cw-accent); transition: width .4s ease; }

/* --- body ---------------------------------------------------------------- */
.cw-pp-body {
    padding: 14px 16px; border-radius: var(--cw-radius);
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    border-left: 3px solid var(--cw-accent);
}
.cw-pp-title { font-size: 1rem; font-weight: 700; color: var(--cw-text); }
.cw-pp-range { font-size: 0.78rem; color: var(--cw-muted); margin-top: 2px; }
.cw-pp-desc { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.7; color: var(--cw-text); }

/* --- controls ------------------------------------------------------------ */
.cw-pp-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cw-pp-btn {
    height: 34px; padding: 0 14px; border-radius: 17px; cursor: pointer; font: inherit;
    font-size: 0.78rem; color: var(--cw-text);
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    transition: border-color .2s ease;
}
.cw-anim-on .cw-pp-btn:not(:disabled):hover { border-color: var(--cw-accent); }
.cw-pp-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cw-accent); }
.cw-pp-btn:disabled { opacity: .4; cursor: not-allowed; }
.cw-pp-count { font-size: 0.8rem; color: var(--cw-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .cw-pp-time { display: none; }
    .cw-pp-name { font-size: 0.72rem; }
}