/* The Courses tab (src/js/courses.js): the list of courses, one course's path
   from start to finish, and the certificate. Linked after dashboard-new.css,
   whose cards, statuses and dark-mode colours it builds on.

   The tab's colour is the gold the site uses for reviews and trophies, one
   shade deeper where it carries text, so that white on it and it on the page
   both read (about 5:1). */
:root {
    --course-gold: #b88746;
    --course-accent: #8a5f22;
}
.dark {
    --course-gold: #c99a55;
    --course-accent: #d7ab6d;
}

.dash-tabs[data-active="courses"] { --tab-accent: var(--course-accent); --tab-on-accent: #ffffff; }
.dark .dash-tabs[data-active="courses"] { --tab-accent: #d7ab6d; --tab-on-accent: #111827; }
.dash-panel[data-panel="courses"] { --card-accent: var(--course-gold); }

/* The side column's block. */
.dash-course-name {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
}
.dark .dash-course-name { color: #F9FAFB; }
#fba-courses-fill { background: var(--course-gold); }

/* ── The list ────────────────────────────────────────────────────────────── */
.course-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* A course on offer takes the whole row: it is the one thing to do here. */
.course-grid > .course-card:not(.coming-soon) { grid-column: 1 / -1; }
.course-card .card-content h3,
.course-card .card-content p { min-height: 0; }
.course-card:not(.coming-soon) .card-content h3 { font-size: 1.15rem; }
.course-card .card-content p.course-card-facts {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}
.course-card .course-meter { margin-top: 1rem; max-width: 420px; }
.course-card .card-content p.course-meter-text { margin-top: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.course-card-go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--course-accent);
}
.course-card-go i { transition: transform 0.25s var(--ease); }
.course-card:hover .course-card-go i { transform: translateX(3px); }
.course-grid-soon .card-status.course-soon-badge::before { background: transparent; }
.course-grid-soon .course-card { cursor: default; }

/* The bar under a course, here and on its page. */
.course-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-alt);
    overflow: hidden;
}
.course-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--course-gold);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .course-meter { background: #111827; }
.dark .course-card .card-content p.course-meter-text { color: #F9FAFB; }

/* ── A course's page ─────────────────────────────────────────────────────── */
.course-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    padding: 0.35rem 0.1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.course-back:hover { color: var(--text-main); }
.dark .course-back { color: #9CA3AF; }
.dark .course-back:hover { color: #F9FAFB; }

.course-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, 290px);
    align-items: center;
    gap: 1.1rem 1.6rem;
    padding: 1.6rem 1.7rem;
    margin-bottom: 1.8rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 1.6rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}
.course-hero-icon { width: 56px; height: 56px; border-radius: 16px; align-self: start; }
.course-hero-icon i { font-size: 1.8rem; }
/* The icons in the darker gold: the light one on its own gold tile is under 3:1. */
.course-card .card-emoji i,
.course-hero-icon i { color: var(--course-accent); }
.course-hero h2 { margin: 0 0 0.35rem; font-size: 1.55rem; line-height: 1.2; color: var(--text-main); }
.course-tagline { margin: 0; color: var(--text-muted); line-height: 1.55; }
.course-hero-side { display: grid; gap: 0.55rem; }
.course-hero-side .course-meter-text { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--text-main); }
.course-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.8rem 1.2rem;
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--course-accent);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.course-cta:hover { filter: brightness(1.08); }
.course-cta:active { transform: translateY(1px); }
.course-cta-next {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .course-hero { background: #1F2937; border-color: #374151; }
.dark .course-hero h2,
.dark .course-hero-side .course-meter-text { color: #F9FAFB; }
.dark .course-tagline,
.dark .course-cta-next { color: #9CA3AF; }
.dark .course-cta { color: #111827; }

@media (max-width: 760px) {
    .course-hero { grid-template-columns: auto minmax(0, 1fr); padding: 1.3rem; }
    .course-hero-side { grid-column: 1 / -1; }
    .course-hero h2 { font-size: 1.3rem; }
}

/* ── The path ────────────────────────────────────────────────────────────────
   A line down the left with a round node for every stop: done (green, a
   tick), the one to do next (gold, ringed), waiting (a lock). Units are the
   headings along the line; the path opens with what the course teaches and
   ends with the certificate. */
.course-path {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.course-path::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    border-radius: 2px;
    background: var(--border-strong);
}
.dark .course-path::before { background: #374151; }

/* The spaces between a stop's parts are their margins, not a column gap: a gap
   stood before the empty third column of a stop without Review, so its box ended
   short of the panel under the first stop and of the units' right edge. */
.course-stop {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.3rem 0;
}
.course-stop > .course-stop-main,
.course-stop > .course-stop-review { margin-left: 0.9rem; }
.course-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--bg-alt);
    color: var(--text-soft);
    font-size: 1.15rem;
}
.course-stop.is-done .course-node { background: var(--accent-green); border-color: var(--accent-green); color: #ffffff; }
.course-stop.is-next .course-node {
    background: var(--course-gold);
    border-color: var(--course-gold);
    color: #ffffff;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--course-gold) 22%, transparent);
}
.course-stop.is-failed .course-node { background: var(--accent-red); border-color: var(--accent-red); }
.dark .course-node { background: #111827; border-color: #4B5563; color: #9CA3AF; }
.dark .course-stop.is-done .course-node { background: #5f8a72; border-color: #5f8a72; color: #ffffff; }
.dark .course-stop.is-next .course-node { background: var(--course-gold); border-color: var(--course-gold); color: #111827; }

.course-stop-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.course-stop-main:hover { background: var(--bg-panel); border-color: var(--border-color); }
.course-stop-main:focus-visible { outline: 2px solid var(--course-accent); outline-offset: 1px; }
.course-stop.is-next > .course-stop-main {
    background: var(--bg-panel);
    border-color: color-mix(in srgb, var(--course-gold) 45%, transparent);
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.35);
}
.course-stop.is-locked > .course-stop-main { cursor: default; }
.course-stop.is-locked > .course-stop-main:hover { background: none; border-color: transparent; }
.dark .course-stop-main:hover,
.dark .course-stop.is-next > .course-stop-main { background: #1F2937; border-color: #374151; }
.dark .course-stop.is-next > .course-stop-main { border-color: color-mix(in srgb, var(--course-gold) 50%, transparent); }

.course-stop-text { display: grid; gap: 0.12rem; flex: 1; min-width: 0; }
.course-stop-kind {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.course-stop-title { font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--text-main); }
.course-stop-meta { font-size: 0.86rem; line-height: 1.45; color: var(--text-muted); }
.course-stop.is-locked .course-stop-title { color: var(--text-muted); }
.course-stop.is-failed .course-stop-meta { color: #8a4438; font-weight: 600; }
.dark .course-stop-kind { color: #9CA3AF; }
.dark .course-stop-title { color: #F9FAFB; }
.dark .course-stop-meta,
.dark .course-stop.is-locked .course-stop-title { color: #9CA3AF; }
.dark .course-stop.is-failed .course-stop-meta { color: #e6a99d; }

.course-stop-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--course-accent);
}
.course-stop.is-done .course-stop-go { color: var(--text-soft); }
.dark .course-stop.is-done .course-stop-go { color: #9CA3AF; }
.course-stop-review {
    grid-column: 3;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.course-stop-review:hover { color: var(--text-main); border-color: var(--border-strong); }
.dark .course-stop-review { color: #9CA3AF; border-color: #374151; }

/* A locked stop that is pressed points back at the one to do. */
.course-stop.nudge > .course-stop-main { animation: courseNudge 0.36s ease; }
@keyframes courseNudge {
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .course-stop.nudge > .course-stop-main { animation: none; }
}

/* Units: a heading on the line, marked by a small diamond. */
.course-unit {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    padding: 1.5rem 0 0.45rem 58px;
}
.course-unit::before {
    content: "";
    position: absolute;
    left: 15px;
    top: calc(1.5rem + 0.2em);
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 2px solid var(--border-strong);
    background: var(--bg-alt);
}
.course-unit.is-done::before { background: var(--accent-green); border-color: var(--accent-green); }
.course-unit-no {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--course-accent);
}
.course-unit-title { font-size: 1.02rem; font-weight: 700; color: var(--text-main); }
.course-unit-count { margin-left: auto; font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
.dark .course-unit::before { border-color: #4B5563; background: #111827; }
.dark .course-unit.is-done::before { background: #5f8a72; border-color: #5f8a72; }
.dark .course-unit-title { color: #F9FAFB; }
.dark .course-unit-count { color: #9CA3AF; }

/* The first stop: what the course teaches. It is the step to do until the
   learner presses Start, and is open until then. */
.course-stop.is-start.is-done.is-open > .course-stop-main { background: var(--bg-panel); border-color: var(--border-color); }
.dark .course-stop.is-start.is-done.is-open > .course-stop-main { background: #1F2937; border-color: #374151; }
.course-intro .course-start { width: auto; margin-top: 1rem; padding: 0.7rem 1.3rem; }
.course-intro-caret { flex: none; color: var(--text-soft); transition: transform 0.25s var(--ease); }
.course-stop.is-open .course-intro-caret { transform: rotate(180deg); }
.course-intro {
    grid-column: 2 / -1;
    margin: 0.2rem 0 0.6rem 0.9rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--course-gold) 8%, var(--bg-panel));
    border: 1px solid color-mix(in srgb, var(--course-gold) 24%, transparent);
}
.course-intro[hidden] { display: none; }
.course-learn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.2rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}
.course-learn li { display: flex; gap: 0.55rem; line-height: 1.45; color: var(--text-main); }
.course-learn i { flex: none; margin-top: 0.2rem; color: var(--accent-green); }
.course-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.course-facts li {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.dark .course-intro { background: color-mix(in srgb, var(--course-gold) 9%, #1F2937); border-color: color-mix(in srgb, var(--course-gold) 30%, transparent); }
.dark .course-learn li { color: #F9FAFB; }
.dark .course-learn i { color: #8cc0a3; }
.dark .course-facts li { background: #111827; border-color: #374151; color: #D1D5DB; }

/* The final test and the certificate stand out at the end of the line. */
.course-unit.is-final-unit { padding-top: 1.7rem; }
.course-stop.is-finish .course-node { border-style: dashed; }
.course-stop.is-finish.is-done .course-node {
    border-style: solid;
    background: var(--course-gold);
    border-color: var(--course-gold);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--course-gold) 22%, transparent);
}
.course-stop.is-soon { opacity: 0.6; }
.course-stop.is-soon .course-stop-main { cursor: default; }

@media (max-width: 600px) {
    .course-stop { grid-template-columns: 38px minmax(0, 1fr); }
    .course-stop > .course-stop-main { margin-left: 0.6rem; }
    .course-intro { margin-left: 0.6rem; }
    .course-node { width: 38px; height: 38px; font-size: 1rem; }
    .course-path::before { left: 18px; }
    .course-unit { padding-left: 48px; }
    .course-unit::before { left: 12px; }
    .course-stop-main { padding: 0.6rem 0.7rem; }
    .course-learn { grid-template-columns: minmax(0, 1fr); }
    .course-stop-go { display: none; }
    .course-stop.is-next .course-stop-go { display: inline-flex; }
    /* Review sits under the stop it belongs to. */
    .course-stop > .course-stop-review { grid-column: 2; justify-self: start; margin: 0 0 0.3rem 1.3rem; }
}

/* A node can be pressed too, where its stop can. */
.course-node[data-stop],
.course-node.course-cert-open,
.course-node.course-intro-toggle { cursor: pointer; }
.course-stop.is-locked .course-node,
.course-stop.is-finish.is-locked .course-node { cursor: default; }

/* ── The certificate ─────────────────────────────────────────────────────── */
dialog.course-cert {
    width: min(980px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--bg-panel);
    color: var(--text-main);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    overflow: auto;
}
dialog.course-cert::backdrop { background: rgba(24, 33, 31, 0.55); }
.course-cert-inner { display: grid; gap: 1rem; padding: 1rem; }
.course-cert-paper {
    aspect-ratio: 2339 / 1654;
    border-radius: 10px;
    background: #fbfaf6;
    box-shadow: inset 0 0 0 1px var(--border-color);
    overflow: hidden;
}
.course-cert-paper img { display: block; width: 100%; height: 100%; }
.course-cert-paper img:not([src]) { visibility: hidden; }
.course-cert.is-drawing .course-cert-paper { animation: courseCertWait 1.2s ease-in-out infinite; }
@keyframes courseCertWait { 50% { opacity: 0.6; } }
/* Nothing to show when the certificate could not be had: just the reason. */
.course-cert.is-error .course-cert-paper { display: none; }
.course-cert:not(.is-ready) .course-cert-pdf,
.course-cert:not(.is-ready) .course-cert-image,
.course-cert:not(.is-ready) .course-cert-copy,
.course-cert:not(.is-ready) .course-cert-share { display: none; }
.course-cert-status { margin: 0; text-align: center; font-size: 0.92rem; color: var(--text-muted); }
.course-cert.is-error .course-cert-status { padding: 1.4rem 1rem 0.4rem; font-size: 1rem; color: var(--text-main); }
.course-cert-status a { color: var(--course-accent); font-weight: 600; }
.dark .course-cert-status { color: #9CA3AF; }
.dark .course-cert.is-error .course-cert-status { color: #F9FAFB; }
.course-cert-actions,
.course-cert-share { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; }
.course-cert-share-label { font-weight: 600; color: var(--text-muted); margin-right: 0.2rem; }
.dark .course-cert-share-label { color: #9CA3AF; }
/* LinkedIn's own blue on its buttons, so they read as LinkedIn at a glance. */
.course-cert-share a,
.course-cert-share button { border-color: #0A66C2 !important; }
.course-cert-share .course-cert-li-profile { background: #0A66C2; color: #ffffff; }
.dark .course-cert-share a,
.dark .course-cert-share button { border-color: #70B5F9 !important; }
.dark .course-cert-share .course-cert-li-profile { background: #70B5F9; color: #111827; }
.course-cert-share [hidden] { display: none; }
.course-cert-actions a,
.course-cert-actions button,
.course-cert-share a,
.course-cert-share button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--btn-radius);
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.course-cert-actions .course-cert-pdf { background: var(--course-accent); border-color: var(--course-accent); color: #ffffff; }
.dark dialog.course-cert { background: #1F2937; color: #F9FAFB; }
.dark .course-cert-actions a,
.dark .course-cert-actions button { border-color: #4B5563; }
.course-cert-buttons { display: grid; gap: 0.6rem; }
.course-cert-actions .lbl-short,
.course-cert-share .lbl-short { display: none; }
/* On a phone (Mark, October 2026: the stack of buttons was too dense): Add to
   LinkedIn profile across, the rest as a row of small icon tiles, the way a
   phone's own share sheet looks, and Close as a quiet line under them. */
@media (max-width: 560px) {
    .course-cert-inner { gap: 0.75rem; padding: 0.75rem; }
    .course-cert-buttons { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 0.4rem; }
    .course-cert-share,
    .course-cert-actions { display: contents; }
    .course-cert-share-label { display: none; }
    .course-cert-share .course-cert-li-profile,
    .course-cert-actions .course-cert-close { grid-column: 1 / -1; justify-content: center; }
    .course-cert-share .lbl,
    .course-cert-actions .lbl { display: none; }
    .course-cert-share .lbl-short,
    .course-cert-actions .lbl-short { display: inline; }
    .course-cert-buttons .course-cert-li-post,
    .course-cert-buttons .course-cert-share-menu,
    .course-cert-buttons .course-cert-pdf,
    .course-cert-buttons .course-cert-image,
    .course-cert-buttons .course-cert-copy {
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem !important;
        padding: 0.55rem 0.2rem !important;
        border-color: transparent !important;
        background: none !important;
        color: inherit !important;
        font-size: 0.78rem;
        font-weight: 500 !important;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }
    .course-cert-li-post i,
    .course-cert-share-menu i,
    .course-cert-actions .course-cert-pdf i,
    .course-cert-image i,
    .course-cert-copy i {
        display: grid;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        background: var(--bg-alt);
        box-shadow: inset 0 0 0 1px var(--border-color);
        font-size: 1.2rem;
    }
    .course-cert-li-post i { color: #0A66C2; }
    .dark .course-cert-li-post i { color: #70B5F9; }
    .dark .course-cert-li-post i,
    .dark .course-cert-share-menu i,
    .dark .course-cert-actions .course-cert-pdf i,
    .dark .course-cert-image i,
    .dark .course-cert-copy i { background: #111827; box-shadow: inset 0 0 0 1px #374151; }
    .course-cert-actions .course-cert-close {
        padding: 0.55rem !important;
        border: 0 !important;
        color: var(--text-muted);
        font-weight: 500;
    }
    .dark .course-cert-actions .course-cert-close { color: #9CA3AF; }
}
.dark .course-cert-actions .course-cert-pdf { color: #111827; }