/* The Cohort 4 overview — /course/cohort.

   NO TOKENS OF ITS OWN. It loads css/course.css for them, which is also what
   the tracks load, so the overview and the track it links to cannot drift into
   two different-looking products. The greys here are --cv-ink and --cv-ink-2
   and nothing else: scripts/test_course_contrast.py fails the build on a third
   tier, and the reasoning is in course.css — the meta line is INFORMATION, not
   a caption under a picture. */

.ch-root {
    min-height: 100vh;
    background: var(--cv-page);
    color: var(--cv-ink);
    padding: 28px 20px 80px;
}

.ch-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- the head ---------- */

.ch-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cv-ink-2);
}

.ch-wrap h1 {
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 10px 0 6px;
}

.ch-dates {
    font-size: 15px;
    color: var(--cv-ink-2);
    margin-bottom: 18px;
}

.ch-intro p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 12px;
}

/* ---------- cohort-wide progress ---------- */

.ch-bar-outer {
    margin: 26px 0 8px;
    height: 6px;
    border-radius: 99px;
    background: var(--cv-sunk);
    overflow: hidden;
}

.ch-bar-outer > div {
    height: 100%;
    border-radius: 99px;
    background: var(--cv-accent);
    /* motion-audit: allow layout-prop — width set from JS in js/cohort.js:364 */
    transition: width .4s ease; /* motion-audit: allow slow-ui — the cohort-wide progress fill is explanatory motion */
}

.ch-progress {
    font-size: 13px;
    color: var(--cv-ink-2);
    margin-bottom: 30px;
}

/* ---------- one track ---------- */

.ch-track {
    background: var(--cv-panel);
    border: 1px solid var(--cv-line);
    border-radius: 16px;
    box-shadow: var(--cv-lift);
    padding: 22px;
    margin-bottom: 16px;
}

/* A track that is not built, or not open to this reader, is quieter than one
   that is — but it is NOT greyed out to the point of looking broken. It still
   has to read as part of the plan, because seeing the shape of the whole
   cohort is the entire reason this page exists. */
.ch-track.planned,
.ch-track.shut {
    background: var(--cv-sunk);
    box-shadow: none;
}

.ch-track-h {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ch-track-n {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 99px;
    background: var(--cv-accent-soft);
    color: var(--cv-accent-2);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ch-track.planned .ch-track-n,
.ch-track.shut .ch-track-n {
    background: var(--cv-line);
    color: var(--cv-ink-2);
}

/* min-width:0 or a long track title cannot wrap inside a flex row — it
   overflows the card instead, and only at narrow widths. */
.ch-track-names { min-width: 0; }

.ch-track-names h2 {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0;
}

.ch-track-from {
    display: block;
    font-size: 12px;
    color: var(--cv-ink-2);
    margin-top: 3px;
}

.ch-gets {
    font-size: 15px;
    line-height: 1.55;
    color: var(--cv-ink);
    margin: 12px 0 0;
}

.ch-state {
    font-size: 14px;
    color: var(--cv-ink-2);
    margin: 12px 0 0;
}

.ch-bar {
    margin: 16px 0 6px;
    height: 4px;
    border-radius: 99px;
    background: var(--cv-sunk);
    overflow: hidden;
}

.ch-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--cv-accent);
    /* motion-audit: allow layout-prop — width set from JS in js/cohort.js:199 */
    transition: width .4s ease; /* motion-audit: allow slow-ui — the per-track progress fill is explanatory motion */
}

.ch-count {
    font-size: 12px;
    color: var(--cv-ink-2);
}

.ch-mods {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid var(--cv-line);
}

.ch-mod {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cv-line);
}

/* Same reason as .ch-track-names: without it a long module name pushes the
   meta column off the card rather than wrapping. */
.ch-mod-name {
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
}

.ch-mod.done .ch-mod-name { color: var(--cv-ink-2); }

.ch-mod.done .ch-mod-name::before {
    content: '✓ ';
    color: var(--cv-ok);
    font-weight: 600;
}

.ch-mod-meta {
    flex: none;
    font-size: 12px;
    color: var(--cv-ink-2);
    white-space: nowrap;
}

.ch-go {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 18px;
    border-radius: 99px;
    background: var(--cv-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.ch-go:hover { background: var(--cv-accent-2); }

.ch-note {
    font-size: 13px;
    color: var(--cv-ink-2);
    margin: 22px 0 0;
}

.ch-foot { margin-top: 30px; }

/* ---------- signed out ---------- */

.ch-gate {
    background: var(--cv-panel);
    border: 1px solid var(--cv-line);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--cv-lift);
}

.ch-gate h2 { font-size: 22px; margin: 0 0 10px; }
.ch-gate p { color: var(--cv-ink-2); line-height: 1.6; margin: 0 0 18px; }

@media (max-width: 600px) {
    .ch-root { padding: 20px 16px 60px; }
    .ch-track { padding: 18px; }
    /* The meta column is the first thing to cost more than it is worth on a
       phone: it pushes every module name onto two lines. Stack instead. */
    .ch-mod { display: block; }
    .ch-mod-meta { display: block; margin-top: 2px; }
}