/**
 * AIRE progression grid + stretch strip + two-section dashboard + course-page
 * progress summary. task-20260529-002.
 *
 * Brand: monochrome + #C00000 red accent on white / #F2F2F2 subtle bg.
 * Box states use an accessible green / amber (NOT brand-red, which signals
 * error): green = completed, amber = placed out via pAIRI, blank = to do.
 *
 * Fully responsive: the grid is a horizontally-scrollable CSS grid on small
 * screens; the stretch strip and section cards stack at ≤768px / ≤480px.
 */

:root {
    --airi-pg-green: #2e7d32;   /* completed  — AA on white */
    --airi-pg-amber: #c8860d;   /* placed out — AA on white */
    --airi-pg-blank: #f2f2f2;   /* to do */
    --airi-pg-blank-border: #c9c9c9;
    --airi-pg-red: #c00000;     /* brand accent */
    --airi-pg-ink: #1a1a1a;
    --airi-pg-muted: #6b6b6b;
}

/* ── Two-section layout ──────────────────────────────────────────────── */
.airi-dashboard--individual,
.airi-dashboard--organisation {
    display: block;
    margin: 0 0 2rem;
}
.airi-dashboard--organisation {
    border-top: 3px solid var(--airi-pg-blank-border);
    padding-top: 1.5rem;
}

/* ── Progression grid card ───────────────────────────────────────────── */
.airi-progress-grid {
    margin-top: 1.25rem;
}
.airi-progress-grid__summary {
    margin: 1rem 0 .25rem; /* now sits below the grid table, not above it */
    color: var(--airi-pg-muted);
    font-size: .95rem;
}
.airi-progress-grid__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0 0;
    /* Legend now sits at the foot of the card (below grid + stretch strip): top
       border + top padding separate it as a key; no trailing margin. */
    margin: 1.25rem 0 0;
    border-top: 1px solid var(--airi-pg-blank-border, #c9c9c9);
    font-size: .85rem;
    color: var(--airi-pg-ink);
}
.airi-progress-grid__legend li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Dashboard main↔sidebar top alignment ──────────────────────────────
   The AIRE card is double-wrapped (.airi-dashboard--aire > .airi-card), so the
   intended `.airi-md__main > .airi-card` padding never reaches it (the wrapper
   blocks the `>` combinator) and it falls back to the larger 32px base pad.
   On top of that, `.airi-progress-grid`'s own 1.25rem top margin pushes the
   whole card down. Together they drop "Your AIRE Progression" ~30px below the
   sidebar's "Assess Your Organisation". In the dashboard column: zero the top
   margin (aligns the card TOP with the sidebar's first card) and match the
   sidebar's 22px top pad (aligns the heading). Scoped to .airi-md__main so the
   standalone [airi_progress_summary] course-page grid keeps its margin. */
.airi-dashboard-wrap .airi-md__main .airi-progress-grid {
    margin-top: 0;
    padding-top: 22px;
}

/* The legend is a <ul>; a theme `ul` rule re-imposes the default ~40px
   inline-start inset, indenting "Completed / Placed out / To do" past the
   pillar labels + "Beyond AI Ready". Reclaim it flush-left — `ul.<class>` under
   the wrap is (0,2,1), enough to beat the theme rule without !important. */
.airi-dashboard-wrap ul.airi-progress-grid__legend {
    padding-left: 0;
    margin-left: 0;
}

/* Horizontal scroll wrapper for small screens. */
.airi-progress-grid__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* CSS grid: 1 pillar-label column + 3 level columns. */
.airi-progress-grid__table {
    display: grid;
    grid-template-columns: minmax(9rem, 1.2fr) repeat(3, minmax(5.5rem, 1fr));
    gap: .5rem;
    min-width: 32rem;            /* forces horizontal scroll rather than crush */
    align-items: stretch;
}
.airi-pg__row {
    display: contents;
}
.airi-pg__colhead,
.airi-pg__corner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .35rem .5rem;
    border-bottom: 2px solid var(--airi-pg-red);
}
.airi-pg__colhead strong {
    font-size: .95rem;
    color: var(--airi-pg-ink);
}
.airi-pg__colhead small {
    font-size: .72rem;
    color: var(--airi-pg-muted);
}
.airi-pg__pillar {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--airi-pg-ink);
    padding: .5rem .5rem .5rem 0;
}
.airi-pg__cell {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .3rem;
    padding: .4rem;
    background: #fafafa;
    border-radius: 6px;
    min-height: 2.2rem;
}

/* ── Boxes ───────────────────────────────────────────────────────────── */
.airi-pg__box {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 3px;
    box-sizing: border-box;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease;
}
a.airi-pg__box:hover,
a.airi-pg__box:focus {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
    outline: none;
}
.airi-pg__box--green  { background: var(--airi-pg-green); }
.airi-pg__box--amber,
.airi-pg__box--yellow { background: var(--airi-pg-amber); }
.airi-pg__box--blank  {
    background: var(--airi-pg-blank);
    border: 1px solid var(--airi-pg-blank-border);
}

/* ════════════════════════════════════════════════════════════════════════
   Readiness ladder + stage bars (dashboard redesign)
   The L0→L1→L2 ladder with a "you are here" marker + 🎯 AI Ready goal, an
   overall progress bar, three stage rows and the AI Ready Submission row.
   Brand palette only: red #C00000 accent, green = completed, amber = placed
   out, grey = to do (reuses the --airi-pg-* tokens). Degrades gracefully —
   the ladder is an <ol>, the bars are plain blocks, the rows are a <ul>.
   ════════════════════════════════════════════════════════════════════════ */

/* Headline: title on the left, Continue CTA on the right. */
.airi-ladder__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}
.airi-ladder__head .airi-card-title {
    margin: 0;
}
.airi-ladder__head .airi-continue-cta {
    margin: .25rem 0 0;
    flex: 1 1 100%;        /* own full-width row under the title */
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Next text LEFT, button RIGHT */
    gap: 1rem;
}
.airi-continue-cta__next {
    color: var(--airi-pg-muted);
}
/* Compact CTA button — reduced padding so it fits after the "Next:" line. */
.airi-continue-cta .airi-btn-primary {
    padding: .4rem .85rem;
    font-size: .85rem;
    vertical-align: middle;
}

/* ── The readiness ladder ────────────────────────────────────────────── */
.airi-ladder__rungs {
    margin: 1.25rem 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.airi-ladder__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    min-width: 18rem;
}
.airi-ladder__rung {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1.6rem;        /* room for the connector line + dot */
    min-width: 4.5rem;
}
/* Connector line between rungs (drawn from each rung leftward to the previous). */
.airi-ladder__rung + .airi-ladder__rung::before {
    content: "";
    position: absolute;
    top: calc(1.6rem - .55rem - 1px);
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--airi-pg-blank-border);
    z-index: 0;
}
.airi-ladder__dot {
    position: relative;
    z-index: 1;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--airi-pg-blank-border);
    box-sizing: border-box;
    margin-bottom: .4rem;
}
/* Stages already reached (left of "you") read as ink dots. */
.airi-ladder__rung-label strong {
    display: block;
    font-size: .9rem;
    color: var(--airi-pg-ink);
    line-height: 1.1;
}
.airi-ladder__rung-label small {
    display: block;
    font-size: .72rem;
    color: var(--airi-pg-muted);
}
/* "You are here" marker — the brand-red filled dot + label. */
.airi-ladder__rung--here .airi-ladder__dot {
    background: var(--airi-pg-red);
    border-color: var(--airi-pg-red);
    box-shadow: 0 0 0 4px rgba(192, 0, 0, .15);
}
.airi-ladder__rung--here .airi-ladder__rung-label strong {
    color: var(--airi-pg-red);
}
.airi-ladder__here {
    display: inline-block;
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--airi-pg-red);
    text-transform: lowercase;
}
/* The goal rung L2 (AI Ready) — red label, no separate icon. */
.airi-ladder__rung--goal .airi-ladder__rung-label strong {
    color: var(--airi-pg-red);
}
/* AI Ready achieved — every rung's dot + connector + label read brand-red, so
   the L2 "AI Ready" node is clearly filled #C00000 once the learner has done all
   lessons + the AI Ready Submission. */
.airi-ladder__rung--reached .airi-ladder__dot {
    background: var(--airi-pg-red);
    border-color: var(--airi-pg-red);
}
.airi-ladder__rung--reached .airi-ladder__rung-label strong {
    color: var(--airi-pg-red);
}
.airi-ladder__rung--reached + .airi-ladder__rung--reached::before {
    background: var(--airi-pg-red);
}

/* ── Bars (overall + per-stage) ──────────────────────────────────────── */
.airi-bar {
    display: block;
    height: .7rem;
    background: var(--airi-pg-blank);
    border: 1px solid var(--airi-pg-blank-border);
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
}
.airi-bar__fill {
    display: block;
    height: 100%;
    background: var(--airi-pg-red);
    border-radius: 999px;
    transition: width .25s ease;
}

/* Overall progress block: bar + "X / Y · Z%" + "N lessons to AI Ready". */
.airi-ladder__overall {
    margin: 0 0 1.25rem;
}
.airi-bar--overall {
    height: .9rem;
}
.airi-ladder__overall-count {
    margin: .4rem 0 0;
    font-size: .95rem;
    color: var(--airi-pg-ink);
}
.airi-ladder__overall-count strong {
    font-weight: 700;
}
.airi-ladder__remaining {
    margin: .15rem 0 0;
    font-size: .85rem;
    color: var(--airi-pg-muted);
}
.airi-ladder__remaining--done {
    color: var(--airi-pg-green);
    font-weight: 600;
}

/* ── Stage rows ──────────────────────────────────────────────────────── */
.airi-stage-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.airi-stage-row {
    display: grid;
    /* Last two columns are FIXED (not auto) so the variable-width count
       ("0/20" vs "0/5") and the lone "← you" don't shift the flexible
       name/bar columns per row — every stage bar then shares a left edge. */
    grid-template-columns: minmax(9rem, 1.4fr) minmax(5rem, 1fr) 3.25rem 5rem;
    align-items: center;
    gap: .6rem .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--airi-pg-blank);
}
.airi-stage-rows .airi-stage-row:first-child {
    border-top: 0;
}
.airi-stage-row__name {
    font-size: .92rem;
    color: var(--airi-pg-ink);
    font-weight: 600;
}
.airi-stage-row__glyph {
    font-weight: 700;
    color: var(--airi-pg-red);
}
.airi-stage-row__badge {
    color: var(--airi-pg-muted);
    font-weight: 400;
    font-size: .8rem;
}
.airi-bar--stage {
    height: .6rem;
}
.airi-stage-row__count {
    font-size: .85rem;
    color: var(--airi-pg-muted);
    white-space: nowrap;
    text-align: right;
}
.airi-stage-row__state {
    font-size: .82rem;
    white-space: nowrap;
    text-align: right;
    min-width: 3.5rem;
}
.airi-stage-row__mark {
    text-align: right;
    color: var(--airi-pg-muted);
    font-size: .95rem;
}
/* Done stage: green fill + green "done". */
.airi-stage-row--done .airi-bar--stage .airi-bar__fill {
    background: var(--airi-pg-green);
}
.airi-stage-row--done .airi-stage-row__state {
    color: var(--airi-pg-green);
    font-weight: 600;
}
/* Current stage: brand-red "← you". */
.airi-stage-row--here .airi-stage-row__state {
    color: var(--airi-pg-red);
    font-weight: 700;
}
.airi-stage-row--todo .airi-stage-row__state {
    color: var(--airi-pg-muted);
}

/* ── Part × Level matrix (task-20260618-006) ─────────────────────────────
   3 Part rows × 3 level columns; each cell holds its lessons as coloured
   squares (reusing the .airi-pg__box--* legend tokens). Part 1 squares are
   placed by the learner's pAIRI band, so the row reshapes per learner.
   CSS grid: a rowhead column + three equal level columns. Reduced-motion +
   responsive (collapses the row labels on narrow screens) below. */
.airi-matrix {
    display: grid;
    grid-template-columns: minmax(6.5rem, 1.1fr) repeat(3, 1fr);
    gap: .4rem;
    margin: 1rem 0 .5rem;
}
.airi-matrix__row {
    display: contents;
}
.airi-matrix__colhead {
    align-self: end;
    padding: 0 0 .15rem;
    text-align: center;
    font-size: .72rem;
    color: var(--airi-pg-muted);
}
.airi-matrix__colhead strong {
    color: var(--airi-pg-ink);
    font-weight: 700;
}
.airi-matrix__rowhead {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.airi-matrix__rownum {
    color: var(--airi-pg-red);
    font-weight: 700;
}
.airi-matrix__rowtitle {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.airi-matrix__rowtitle strong {
    font-size: .85rem;
    color: var(--airi-pg-ink);
}
.airi-matrix__rowtitle small {
    font-size: .68rem;
    color: var(--airi-pg-muted);
}
.airi-matrix__cell {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .25rem;
    min-height: 2rem;
    padding: .4rem;
    background: var(--airi-pg-blank);
    border-radius: 6px;
}
.airi-matrix__cell--empty {
    align-items: center;
    justify-content: center;
    background: transparent;
}
.airi-matrix__dash {
    color: var(--airi-pg-blank-border);
}
/* Matrix squares reuse the .airi-pg__box base + colour tokens; this just
   tightens the size for the denser grid. */
.airi-matrix__sq {
    width: 1rem;
    height: 1rem;
}

/* ── Matrix + "Next on your path" rail (Option B) ───────────────────────
   The matrix and the L3/L4 guide-course rail sit side by side; the rail is
   dropped (and the matrix takes full width) when no guide course resolves. */
.airi-matrix-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.airi-matrix-wrap .airi-matrix {
    flex: 1 1 auto;
    min-width: 0;
}
.airi-rail {
    flex: 0 0 13rem;
    border-left: 1px solid var(--airi-pg-blank);
    padding-left: 1rem;
    margin-top: 1rem;
}
.airi-rail__head {
    margin: 0 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--airi-pg-muted);
}
.airi-rail__course {
    display: block;
    border: 1px solid var(--airi-pg-blank-border);
    border-radius: 8px;
    padding: .55rem .65rem;
    margin-bottom: .5rem;
    text-decoration: none;
    color: var(--airi-pg-ink);
    transition: box-shadow .08s ease, border-color .08s ease;
}
a.airi-rail__course:hover,
a.airi-rail__course:focus {
    border-color: var(--airi-pg-red);
    box-shadow: 0 0 0 2px rgba(192, 0, 0, .08);
    outline: none;
}
.airi-rail__lvl {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    background: var(--airi-pg-red);
    border-radius: 4px;
    padding: .05rem .35rem;
    margin-bottom: .25rem;
}
.airi-rail__title {
    display: block;
    font-size: .85rem;
}
.airi-rail__sub {
    display: block;
    font-size: .68rem;
    color: var(--airi-pg-muted);
}
.airi-rail__status {
    display: block;
    margin-top: .2rem;
    font-size: .68rem;
    color: var(--airi-pg-muted);
}
.airi-rail__rec {
    display: block;
    margin-top: .25rem;
    font-size: .68rem;
    color: var(--airi-pg-red);
    font-weight: 600;
}
.airi-rail__course--locked {
    opacity: .7;
}
.airi-rail__course--locked .airi-rail__lvl {
    background: var(--airi-pg-muted);
}
.airi-rail__course--rec {
    border-color: var(--airi-pg-red);
    box-shadow: 0 0 0 2px rgba(192, 0, 0, .08);
}

/* ── AI Ready Submission row ─────────────────────────────────────────── */
.airi-stage-rows--submission {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--airi-pg-blank-border);
}
.airi-stage-row--submission {
    grid-template-columns: 1fr auto auto;
}
.airi-stage-row--submission .airi-stage-row__glyph {
    color: var(--airi-pg-red);
}
.airi-stage-row__name--link {
    text-decoration: none;
    color: var(--airi-pg-red);
}
.airi-stage-row__name--link:hover,
.airi-stage-row__name--link:focus {
    text-decoration: underline;
}
.airi-stage-row--locked .airi-stage-row__name,
.airi-stage-row--locked .airi-stage-row__mark,
.airi-stage-row--locked .airi-stage-row__state {
    color: var(--airi-pg-muted);
}
.airi-stage-row--open .airi-stage-row__mark {
    color: var(--airi-pg-red);
}
.airi-stage-row--open .airi-stage-row__state {
    color: var(--airi-pg-red);
    font-weight: 600;
}
.airi-stage-row--done.airi-stage-row--submission .airi-stage-row__mark,
.airi-stage-row--done.airi-stage-row--submission .airi-stage-row__state {
    color: var(--airi-pg-green);
}

/* ── Explore all courses CTA ─────────────────────────────────────────── */
.airi-more-courses {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--airi-pg-blank-border);
}
.airi-more-courses__cta {
    display: inline-block;
    font-weight: 600;
    font-size: .95rem;
    color: #C00000;
    text-decoration: none;
}
.airi-more-courses__cta:hover,
.airi-more-courses__cta:focus {
    text-decoration: underline;
}

/* ── Course-page progress summary widget ─────────────────────────────── */
.airi-progress-summary {
    margin: 0 0 1.5rem;
}
.airi-progress-summary__stat {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--airi-pg-ink);
    margin: 0 0 .6rem;
}
.airi-progress-summary__bar {
    height: .55rem;
    background: var(--airi-pg-blank);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 1rem;
}
.airi-progress-summary__bar > span {
    display: block;
    height: 100%;
    background: var(--airi-pg-red);
    border-radius: 999px;
}
.airi-progress-summary__pillars {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0;
}
.airi-chip {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    background: var(--airi-pg-blank);
    color: var(--airi-pg-ink);
    border: 1px solid var(--airi-pg-blank-border);
}
.airi-chip--l2 { border-color: var(--airi-pg-green); color: var(--airi-pg-green); font-weight: 600; }
.airi-chip--l1 { border-color: var(--airi-pg-amber); color: var(--airi-pg-amber); }

/* ── Advisory note (oAIRI Leadership double-weight) ──────────────────── */
.airi-gap-note {
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--airi-pg-muted);
    border-left: 3px solid var(--airi-pg-red);
    padding-left: .75rem;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .airi-progress-grid__table { gap: .4rem; }
    /* Stack title + Continue CTA; left-align the CTA when wrapped. */
    .airi-ladder__head .airi-continue-cta { text-align: left; }
}
@media (max-width: 560px) {
    /* Drop the per-stage mini-bar on narrow screens — name + count + state
       stay, keeping the row legible without a crushed bar. */
    .airi-stage-row {
        grid-template-columns: 1fr auto auto;
    }
    .airi-stage-row .airi-bar--stage { display: none; }
    /* Stack the rail beneath the matrix on narrow screens. */
    .airi-matrix-wrap {
        flex-direction: column;
    }
    .airi-rail {
        flex: 1 1 auto;
        border-left: 0;
        border-top: 1px solid var(--airi-pg-blank);
        padding-left: 0;
        padding-top: .75rem;
        width: 100%;
    }
    /* Tighten the matrix; drop the row-label subtitle so the grid stays
       legible (Part number + title + the three level cells remain). */
    .airi-matrix {
        grid-template-columns: minmax(4.5rem, .9fr) repeat(3, 1fr);
        gap: .3rem;
    }
    .airi-matrix__rowtitle small { display: none; }
    .airi-matrix__colhead { font-size: .66rem; }
    .airi-matrix__cell { padding: .3rem; }
}
@media (max-width: 480px) {
    .airi-pg__box { width: 1rem; height: 1rem; }
    .airi-matrix__sq { width: .9rem; height: .9rem; }
    .airi-progress-grid__legend { gap: .6rem; font-size: .8rem; }
    .airi-progress-summary__pillars { gap: .35rem; }
    .airi-chip { font-size: .72rem; padding: .2rem .55rem; }
    .airi-ladder__rung-label small { display: none; } /* keep L0/L1/L2 only */
    .airi-ladder__rung { min-width: 3.5rem; }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .airi-pg__box { transition: none; }
    a.airi-pg__box:hover,
    a.airi-pg__box:focus { transform: none; }
    .airi-bar__fill { transition: none; }
}