/* tutor-shared.css — the chrome every tutor page wears.
 * ---------------------------------------------------------------------------
 * The tutor dashboard is no longer one page. Level 3 has its own, and Level 1,
 * Level 2 and the short courses are following. They share a header, a page
 * ground, a tab bar and an access-denied panel, and a second copy of any of
 * that is a second thing to keep in step — so it lives here, once.
 *
 * ORDER MATTERS. Link this BEFORE a page's own <style>: everything here is
 * the base, and a page overrides it by coming later. tutor.html still carries
 * its own copies of the loading, footer and responsive blocks further down its
 * stylesheet; those are identical and win on source order, so its cascade is
 * exactly what it was. They come out when tutor.html moves onto this chrome.
 * ---------------------------------------------------------------------------
 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
        /* ══════════════════════════════════════
           PlumbMate Tutor Dashboard — Master Technician Theme
           ══════════════════════════════════════ */

        :root {
            --navy: #1a2744;
            --navy-dark: #111c33;
            --navy-light: #243556;
            --blue-accent: #3b82f6;
            --teal: #14b8a6;
            --green: #22c55e;
            --green-dark: #16a34a;
            --amber: #f59e0b;
            --red: #ef4444;
            --text-dark: #1e293b;
            --text-mid: #475569;
            --text-light: #94a3b8;
            --card-bg: rgba(255,255,255,0.88);
            --card-border: rgba(59,130,246,0.10);
            --shadow-sm: 0 2px 8px rgba(26,39,68,0.06);
            --shadow-md: 0 6px 24px rgba(26,39,68,0.10);
            --shadow-lg: 0 12px 40px rgba(26,39,68,0.14);
            --radius: 16px;
            --radius-sm: 10px;
            --page-bg: #eef3fa;
            --grid-stroke: rgba(59,130,246,0.06);
            --grid-stroke-strong: rgba(59,130,246,0.10);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--page-bg);
            color: var(--text-dark);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* ── Blueprint Grid Background ── */
        .blueprint-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0; pointer-events: none;
        }

        /* ── Header ── */
        header {
            background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%) !important;
            color: white !important;
            padding: 0 24px !important;
            height: 70px !important;
            display: flex !important;
            align-items: center !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 100 !important;
            box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
            border: none !important;
        }
        header .container {
            max-width: 1280px; width: 100%; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
        }
        header h1 {
            font-family: 'Outfit', sans-serif !important;
            font-size: 1.6em !important; font-weight: 800 !important;
            letter-spacing: -0.5px; color: white !important;
        }
        header p.tagline {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.8em !important; opacity: 0.6; font-weight: 300;
            font-style: italic; margin-left: 16px; color: white !important;
        }

        /* ── Main Container ── */
        main.container {
            max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px;
            position: relative; z-index: 1;
        }

        .tutor-container { max-width: 1100px; margin: 0 auto; }

        /* ── Dashboard Title Banner ── */
        .tutor-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
            background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border-radius: var(--radius); padding: 24px 28px;
            box-shadow: var(--shadow-md); border: 1px solid var(--card-border);
            animation: slideDown 0.4s ease-out;
            /* Lift above sibling cards so the ⚙ Menu dropdown paints on top.
               Kept below the sticky page <header> (z-index 100) so it doesn't
               steal layering from that banner when the page is scrolled. */
            position: relative; z-index: 10;
        }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

        .tutor-header h2 {
            font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5em;
            color: var(--navy); margin: 0; letter-spacing: -0.3px;
        }
        .tutor-badge {
            background: linear-gradient(135deg, var(--blue-accent), var(--teal));
            color: #fff; padding: 5px 16px; border-radius: 20px;
            font-size: 0.78em; font-weight: 700; font-family: 'Outfit', sans-serif;
            letter-spacing: 1px; text-transform: uppercase;
        }
        .college-label { color: var(--text-mid); font-size: 0.9em; font-weight: 500; }

        /* ── Tabs ── */
        .tab-bar {
            display: flex; gap: 4px; margin-bottom: 24px;
            background: var(--card-bg); backdrop-filter: blur(12px);
            border-radius: var(--radius); padding: 6px;
            box-shadow: var(--shadow-sm); border: 1px solid var(--card-border);
            flex-wrap: wrap;
        }
        .tab-btn {
            padding: 10px 20px; background: transparent; border: none; border-radius: 12px;
            font-size: 0.92em; font-weight: 700; color: var(--text-light); cursor: pointer;
            transition: all 0.25s; font-family: 'Plus Jakarta Sans', sans-serif;
            white-space: nowrap; flex-shrink: 0;
        }
        .tab-btn:hover { color: var(--text-dark); background: rgba(59,130,246,0.06); }
        .tab-btn.active {
            color: white; background: linear-gradient(135deg, var(--navy), var(--navy-light));
            box-shadow: 0 4px 14px rgba(26,39,68,0.25);
        }
        @media (max-width: 720px){
            /* On narrow screens (phones, small tablets), make the tab bar
               horizontally scrollable so all tabs remain usable, with a thin
               scroll indicator. Better than wrapping to 3 lines on tiny screens. */
            .tab-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px;gap:2px;}
            .tab-bar::-webkit-scrollbar{height:3px;}
            .tab-bar::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.3);border-radius:2px;}
            .tab-btn{padding:9px 14px;font-size:0.85em;}
        }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ── Loading / Access ── */
        .loading { text-align: center; padding: 60px; color: var(--text-light); font-weight: 500; }
        .spinner {
            display: inline-block; width: 22px; height: 22px;
            border: 3px solid #e2e8f0; border-top-color: var(--blue-accent);
            border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 10px; vertical-align: middle;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .access-denied { text-align: center; padding: 80px 20px; }
        .access-denied h2 { color: var(--red); font-family: 'Outfit', sans-serif; font-weight: 800; }
        .back-link {
            display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px;
            color: var(--blue-accent); text-decoration: none; font-weight: 600; font-size: 0.9em;
            transition: color 0.2s;
        }
        .back-link:hover { color: var(--teal); }

        /* ── Footer ── */
        footer {
            background: var(--navy-dark) !important;
            color: rgba(255,255,255,0.4) !important;
            text-align: center; padding: 24px !important;
            font-size: 0.82em; position: relative; z-index: 1;
        }

        /* ── Responsive ── */
        @media (max-width: 640px) {
            header { height: 58px !important; padding: 0 14px !important; }
            header h1 { font-size: 1.3em !important; }
            header p.tagline { display: none; }
            main.container { padding: 14px 12px 60px; }
            .tutor-header { padding: 18px 20px; }
            .learner-card { padding: 16px 18px; }
            .unit-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
            .ring-container { width: 42px; height: 42px; }
            .summary-bar { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
        }

        /* ── Course nav strip ─────────────────────────────────────────────
           One row of links along the top of every tutor page: the hub, then
           Level 1, Level 2, Level 3 and the short courses. A tutor teaching
           two levels should never have to go back to the hub to cross between
           them, and the strip is also how you know which page you are on —
           .pm-nav-link.active is the current one and is not a link anywhere. */
        .pm-nav {
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            margin-bottom: 18px; padding: 8px; border-radius: var(--radius-sm);
            background: var(--card-bg); border: 1.5px solid var(--card-border);
            box-shadow: var(--shadow-sm);
        }
        .pm-nav-home {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 12px; border-radius: 8px; text-decoration: none;
            color: var(--text-mid); font-weight: 700; font-size: 0.86em;
            border-right: 1.5px solid var(--card-border); margin-right: 4px;
        }
        .pm-nav-home:hover { color: var(--blue-accent); }
        .pm-nav-link {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 13px; border-radius: 8px; text-decoration: none;
            color: var(--text-mid); font-weight: 600; font-size: 0.86em;
            transition: background 0.15s, color 0.15s;
        }
        .pm-nav-link:hover { background: rgba(59,130,246,0.08); color: var(--blue-accent); }
        .pm-nav-link.active {
            background: var(--navy); color: #fff; font-weight: 700; cursor: default;
        }
        .pm-nav-link.active:hover { background: var(--navy); color: #fff; }
        /* Back to the learners' side of the course on show — pushed to the
           far end so it reads as leaving the dashboards, not as another one. */
        .pm-nav-app {
            display: inline-flex; align-items: center; gap: 6px;
            margin-left: auto; padding: 7px 12px; border-radius: 8px;
            text-decoration: none; color: var(--text-mid);
            font-weight: 700; font-size: 0.86em;
            border-left: 1.5px solid var(--card-border);
        }
        .pm-nav-app:hover { color: var(--blue-accent); }
        @media (max-width: 640px) {
            .pm-nav { gap: 4px; padding: 6px; }
            .pm-nav-link, .pm-nav-home, .pm-nav-app { padding: 6px 10px; font-size: 0.8em; }
        }

        /* ── Hub cards ────────────────────────────────────────────────────
           The hub page's card per course. Here rather than in the hub's own
           page because the "no learners yet" and loading states are the same
           states the course pages show, and they should look the same. */
        .pm-hub-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px; margin-top: 20px;
        }
        .pm-hub-card {
            display: block; text-decoration: none; color: inherit;
            background: var(--card-bg); border: 1.5px solid var(--card-border);
            border-radius: var(--radius); padding: 22px 24px;
            box-shadow: var(--shadow-sm); transition: transform 0.18s, box-shadow 0.18s;
        }
        .pm-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
        .pm-hub-icon { font-size: 1.9em; line-height: 1; }
        .pm-hub-name {
            font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15em;
            margin: 10px 0 4px; color: var(--navy);
        }
        .pm-hub-sub { font-size: 0.85em; color: var(--text-mid); }
        .pm-hub-stat {
            margin-top: 14px; display: flex; align-items: baseline; gap: 8px;
        }
        .pm-hub-stat b {
            font-family: 'Outfit', sans-serif; font-size: 1.6em; color: var(--blue-accent);
        }
        .pm-hub-stat span { font-size: 0.8em; color: var(--text-light); font-weight: 600; }

        /* ═══════════════════════════════════════════════════════════════════
           THE DASHBOARD BODY — filter bar, learner cards, rings, detail rows.
           Copied here from tutor.html rather than moved, because tutor.html's
           own copies come later in its cascade and must keep winning until it
           moves onto this chrome for real. Identical text; delete the copies
           there, not here, when that happens.
           ═══════════════════════════════════════════════════════════════════ */
        /* ── Filter Bar ── */
        .filter-bar {
            display: flex; gap: 12px; margin-bottom: 24px; align-items: center; flex-wrap: wrap;
            background: var(--card-bg); backdrop-filter: blur(12px);
            border-radius: var(--radius-sm); padding: 14px 20px;
            box-shadow: var(--shadow-sm); border: 1px solid var(--card-border);
        }
        .filter-bar label { font-weight: 700; color: var(--navy); font-family: 'Outfit', sans-serif; font-size: 0.9em; }
        .filter-bar select {
            padding: 8px 14px; border: 2px solid #d1d5db; border-radius: 8px;
            font-size: 0.92em; min-width: 220px; font-family: inherit;
            background: white; color: var(--text-dark); font-weight: 500;
        }
        .filter-bar select:focus { border-color: var(--blue-accent); outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
        .learner-count { color: var(--text-light); font-size: 0.85em; margin-left: auto; font-weight: 600; }

        /* ── Streak Pill (on learner cards) ── */
        .streak-pill {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 20px; font-size: 0.78em;
            font-weight: 700; background: rgba(245,158,11,0.1);
            color: #b45309; border: 1px solid rgba(245,158,11,0.25);
        }
        .streak-pill.cold {
            background: rgba(148,163,184,0.1); color: var(--text-light);
            border-color: rgba(148,163,184,0.2);
        }

        /* ── Summary Stats ── */
        .summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
        .summary-stat {
            background: var(--card-bg); backdrop-filter: blur(12px);
            border-radius: var(--radius); padding: 20px;
            box-shadow: var(--shadow-sm); border: 1px solid var(--card-border);
            text-align: center; transition: transform 0.2s, box-shadow 0.2s;
        }
        .summary-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .summary-stat .number {
            font-family: 'Outfit', sans-serif; font-size: 2.2em; font-weight: 800;
            color: var(--navy); line-height: 1.1;
        }
        .summary-stat .label {
            font-size: 0.72em; font-weight: 600; color: var(--text-light);
            text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px;
        }
        /* When At Risk count > 0, label turns red (set inline alongside number). */

        /* ── Learner Cards ── */
        .learner-card {
            background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border-radius: var(--radius); padding: 22px 26px;
            margin-bottom: 18px; box-shadow: var(--shadow-sm);
            border: 1px solid var(--card-border);
            transition: all 0.25s ease;
        }
        .learner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
        .learner-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
        }
        /* Name + email + all badges on one wrapping row, so nothing (e.g. the
           predicted-grade tally) clips off the right edge on narrow screens. */
        .learner-id-row {
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
        }
        .learner-id-row > * { margin-left: 0; }
        .learner-name {
            font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1em;
            color: var(--navy);
        }
        .learner-email { color: var(--text-light); font-size: 0.82em; margin-left: 8px; font-weight: 500; }
        .learner-active { color: var(--text-light); font-size: 0.8em; font-weight: 500; }
        .learner-group-tag {
            display: inline-block; background: rgba(59,130,246,0.08); color: var(--blue-accent);
            padding: 3px 12px; border-radius: 20px; font-size: 0.78em; margin-left: 8px;
            font-weight: 700;
        }

        /* ── Overall Progress Bar ── */
        .overall-bar {
            height: 6px; background: #e2e8f0; border-radius: 3px;
            margin-bottom: 6px; overflow: hidden;
        }
        .overall-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease-out; }
        .overall-fill.green { background: linear-gradient(90deg, var(--green), var(--teal)); }
        .overall-fill.amber { background: linear-gradient(90deg, #f59e0b, #fb923c); }
        .overall-fill.red { background: linear-gradient(90deg, var(--red), #f87171); }

        .overall-text {
            font-size: 0.8em; color: var(--text-light); margin-bottom: 14px;
            font-weight: 500;
        }

        /* ── Unit Progress Ring Grid ── */
        .unit-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
            gap: 10px; margin-bottom: 10px;
        }
        .unit-cell {
            text-align: center; padding: 12px 4px 10px;
            border-radius: var(--radius-sm); cursor: pointer;
            transition: all 0.2s ease;
            background: rgba(255,255,255,0.5); border: 1px solid transparent;
        }
        .unit-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--card-border); }

        .ring-container { position: relative; width: 52px; height: 52px; margin: 0 auto 6px; }
        .ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 4; }
        .ring-fill {
            fill: none; stroke-width: 4; stroke-linecap: round;
            transition: stroke-dashoffset 0.8s ease-out;
            transform: rotate(-90deg); transform-origin: center;
        }
        .ring-pct {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.78em;
            color: var(--text-dark);
        }

        .unit-cell .unit-num {
            font-family: 'Outfit', sans-serif; font-weight: 700;
            font-size: 0.78em; color: var(--text-mid); letter-spacing: 0.3px;
        }
        .unit-cell .unit-count { font-size: 0.68em; color: var(--text-light); font-weight: 500; margin-top: 2px; }

        /* ── Quiz Detail Panel ── */
        .quiz-detail {
            display: none; background: rgba(248,250,252,0.9); backdrop-filter: blur(8px);
            border-radius: var(--radius-sm); padding: 16px 20px; margin-top: 12px;
            border: 1px solid var(--card-border);
        }
        .quiz-detail h4 {
            margin: 0 0 10px 0; color: var(--navy);
            font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95em;
        }
        .quiz-row {
            display: flex; justify-content: space-between; padding: 7px 0;
            font-size: 0.84em; border-bottom: 1px solid rgba(0,0,0,0.05);
            gap: 10px; align-items: center;
        }
        .quiz-row:last-child { border-bottom: none; }
        .quiz-row span:first-child { flex: 1; min-width: 0; font-weight: 500; }
        .quiz-passed { color: var(--green-dark); font-weight: 700; }
        .quiz-failed { color: var(--red); font-weight: 700; }
        .quiz-not-done { color: #cbd5e1; font-weight: 500; }

        /* ═══════════════════════════════════════════════════════════════════
           THE COURSE-TOOL ROW AND DASHBOARD WIDGETS (.pm-cswitch, .pmx-*)
           Written for the Level 1 and short-course tabs in tutor.html; Level 3
           uses exactly the same widgets, so the rules moved here rather than
           being copied. Nothing else in the site defines a .pmx- rule.
           ═══════════════════════════════════════════════════════════════════ */
        /* ══ Level 1 / Short-course dashboard (tutor-l1-sc.js) ═════════════
           These go in THIS stylesheet, not next to the .sc-* rules — those
           live inside a JavaScript template literal that builds PDF exports
           and never reach the page. Measured, not assumed. */

        /* The row above the tab bar. It used to carry a set of course buttons
           as well, which duplicated the nav strip at the top of the page; those
           are gone and the row now holds the feedback pill alone. Kept as a
           flex row because the pill still right-aligns itself into it. */
        .pm-cswitch { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }

        /* The feedback generator for whichever course is showing. Green and
           outlined rather than blue: blue is the selected state on the course
           strip above, and a blue pill down here would read as another course.
           margin-left:auto pushes it to the far end; the row wraps, so on a
           narrow screen it drops to its own line and the auto margin would
           leave it stranded mid-air, hence the reset below. */
        .pm-ctool {
            margin-left:auto;
            display:inline-flex; align-items:center; gap:7px;
            background:#f0fdf4; border:1.5px solid #86efac;
            border-radius:11px; padding:10px 16px; text-decoration:none;
            font-family:inherit; font-size:0.9em; font-weight:700; color:#15803d;
            transition:border-color .15s, color .15s, box-shadow .15s;
        }
        .pm-ctool:hover {
            border-color:#22c55e; color:#166534;
            box-shadow:0 3px 10px rgba(22,163,74,.18);
        }
        .pm-ctool:focus-visible { outline:3px solid #15803d; outline-offset:2px; }
        .pm-ctool .pm-ctool-q { font-weight:800; }
        .pm-ctool .pm-ctool-ext { opacity:.55; font-size:0.9em; }
        @media (max-width: 720px) { .pm-ctool { margin-left:0; } }

        .pmx-h { font-family:'Outfit',sans-serif; font-size:1.3em; font-weight:800; color:var(--text-dark); margin:0 0 4px; }
        .pmx-h3 { font-family:'Outfit',sans-serif; font-size:1.02em; font-weight:700; color:var(--text-dark); margin:22px 0 8px; }
        .pmx-sub { color:var(--text-mid); font-size:0.9em; line-height:1.55; margin:0 0 14px; max-width:78ch; }
        .pmx-meta { font-size:0.82em; color:var(--text-light); font-weight:600; margin:0 0 12px; }
        .pmx-empty { color:var(--text-light); font-size:0.9em; font-style:italic; }

        .pmx-bar { display:block; flex:1 1 120px; min-width:80px; height:7px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
        .pmx-bar i { display:block; height:100%; border-radius:4px; }

        /* learner rows (progress) */
        .pmx-row { background:#fff; border:1px solid #e2e8f0; border-left:4px solid #1d4ed8; border-radius:12px; margin-bottom:9px; overflow:hidden; }
        .pmx-row.idle { border-left-color:#cbd5e1; }
        .pmx-row > summary { list-style:none; cursor:pointer; padding:13px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
        .pmx-row > summary::-webkit-details-marker { display:none; }
        .pmx-row > summary:focus-visible { outline:3px solid #1d4ed8; outline-offset:-3px; }
        .pmx-nm { font-weight:700; color:var(--text-dark); font-size:0.95em; }
        .pmx-grp { font-size:0.78em; color:var(--text-light); background:#f1f5f9; border-radius:999px; padding:2px 9px; }
        .pmx-sc { font-size:0.85em; font-weight:800; color:#1d4ed8; font-variant-numeric:tabular-nums; min-width:74px; text-align:right; }
        .pmx-row.idle .pmx-sc { color:var(--text-light); font-weight:600; }
        .pmx-chev { color:var(--text-light); font-size:0.8em; }
        .pmx-row[open] .pmx-chev { display:inline-block; transform:rotate(90deg); }
        .pmx-units { border-top:1px solid #e2e8f0; padding:10px 16px 14px; background:#fbfdff; }
        .pmx-u { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #eef2f7; }
        .pmx-u:last-child { border-bottom:none; }
        .pmx-u-n { flex:1 1 auto; font-size:0.87em; color:var(--text-dark); }
        .pmx-u-n em { font-style:normal; color:var(--text-light); font-size:0.9em; }
        .pmx-u-avg { font-size:0.78em; color:var(--text-light); font-variant-numeric:tabular-nums; }
        .pmx-u-s { font-size:0.82em; font-weight:700; font-variant-numeric:tabular-nums; min-width:96px; text-align:right; }
        .pmx-u-s.done { color:#15803d; } .pmx-u-s.part { color:#b45309; } .pmx-u-s.none { color:var(--text-light); font-weight:600; }

        /* heatmap rows */
        .pmx-hm { display:flex; flex-direction:column; gap:6px; }
        .pmx-hm-row { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; }
        .pmx-hm-n { flex:0 0 30px; height:30px; display:grid; place-items:center; background:#eef2f7; color:var(--text-mid); border-radius:8px; font-size:0.8em; font-weight:800; }
        .pmx-hm-t { flex:1 1 200px; min-width:150px; font-size:0.88em; font-weight:600; color:var(--text-dark); }
        .pmx-hm-t em { display:block; font-style:normal; font-weight:400; font-size:0.86em; color:var(--text-light); }
        .pmx-hm-bar { flex:1 1 110px; display:flex; min-width:80px; }
        .pmx-hm-v { flex:0 0 auto; font-size:0.82em; font-weight:700; font-variant-numeric:tabular-nums; min-width:110px; text-align:right; }
        .pmx-hm-avg { flex:0 0 auto; font-size:0.78em; color:var(--text-light); font-variant-numeric:tabular-nums; min-width:64px; text-align:right; }
        .pmx-lab { font-size:0.78em; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-mid); align-self:center; }
        /* Level 1 progress: a unit opens into its lessons, and a lesson lists
           every item in it including the interactive tasks. */
        .pmx-u-d > summary { list-style:none; cursor:pointer; }
        .pmx-u-d > summary::-webkit-details-marker { display:none; }
        .pmx-u-d[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
        .pmx-les-wrap { padding:2px 0 8px 26px; display:flex; flex-direction:column; gap:4px; }
        .pmx-les { background:#fbfdff; border:1px solid #e8eef5; border-radius:9px; }
        .pmx-les > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:8px 12px; }
        .pmx-les > summary::-webkit-details-marker { display:none; }
        .pmx-les-n { flex:0 0 auto; font-size:0.78em; font-weight:800; color:var(--navy); font-family:'Outfit',sans-serif; }
        .pmx-les-t { flex:1 1 auto; font-size:0.82em; color:var(--text-mid); }
        .pmx-les-s { flex:0 0 auto; font-size:0.76em; font-weight:800; color:var(--text-light); font-variant-numeric:tabular-nums; }
        .pmx-les-s.done { color:#15803d; }
        .pmx-it { display:flex; align-items:center; gap:10px; padding:6px 14px 6px 26px; font-size:0.8em; border-top:1px solid #eef3f8; }
        .pmx-it-n { flex:1 1 auto; color:var(--text-dark); }
        .pmx-it-s { flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; }
        .pmx-it-s em { font-style:normal; font-weight:400; color:var(--text-light); font-size:0.9em; }
        .pmx-it.ok .pmx-it-s { color:#15803d; }
        .pmx-it.no .pmx-it-s { color:#b91c1c; }
        .pmx-it.none { color:var(--text-light); }
        .pmx-it.none .pmx-it-s { color:var(--text-light); font-weight:600; }

        /* the Level 1 heatmap's by-criterion view, and the toggle between it and
           the by-lesson one */
        .pmx-seg { display:flex; gap:0; margin-left:auto; border:1px solid #cbd5e1; border-radius:9px; overflow:hidden; background:#fff; }
        .pmx-seg-b { border:none; background:#fff; color:var(--text-mid); font:700 0.8em 'Plus Jakarta Sans',sans-serif; padding:8px 14px; cursor:pointer; }
        .pmx-seg-b + .pmx-seg-b { border-left:1px solid #e2e8f0; }
        .pmx-seg-b:hover:not(.on) { background:#f1f5f9; }
        .pmx-seg-b.on { background:var(--navy); color:#fff; }
        .pmx-seg-b:focus-visible { outline:3px solid #1565c0; outline-offset:-3px; }
        .pmx-hm-lo { margin:14px 0 4px; font-size:0.82em; color:var(--text-mid); display:flex; align-items:baseline; gap:8px; }
        .pmx-hm-lo b { color:var(--navy); font-family:'Outfit',sans-serif; }
        .pmx-hm-lopct { margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; }
        .pmx-hm-m { flex:0 0 auto; font-size:0.76em; color:var(--text-light); font-variant-numeric:tabular-nums; min-width:150px; text-align:right; }
        .pmx-hm-p { flex:0 0 auto; min-width:54px; text-align:center; font-size:0.82em; font-weight:800; font-variant-numeric:tabular-nums; border:1.5px solid #cbd5e1; border-radius:7px; padding:4px 0; }
        .pmx-hm-q { display:block; font-weight:400; font-size:0.84em; color:#b45309; margin-top:2px; }
        .pmx-weak { margin:0; padding-left:20px; }
        .pmx-weak li { font-size:0.83em; color:#7f1d1d; margin:5px 0; line-height:1.5; }

        /* leaderboard */
        .pmx-board { display:flex; flex-direction:column; gap:6px; }
        .pmx-lb { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:11px 15px; }
        .pmx-lb.top { border-color:#bfdbfe; background:linear-gradient(90deg,#f8fbff,#fff); }
        .pmx-lb-r { flex:0 0 34px; font-size:1.02em; font-weight:800; color:var(--text-light); text-align:center; }
        .pmx-lb.top .pmx-lb-r { font-size:1.25em; }
        .pmx-lb-n { flex:1 1 160px; min-width:130px; font-size:0.92em; font-weight:700; color:var(--text-dark); }
        .pmx-lb-n em { display:block; font-style:normal; font-weight:400; font-size:0.82em; color:var(--text-light); }
        .pmx-lb-b { flex:1 1 100px; display:flex; min-width:70px; }
        .pmx-lb-v { flex:0 0 auto; font-size:0.95em; font-weight:800; color:#1d4ed8; font-variant-numeric:tabular-nums; min-width:78px; text-align:right; }
        .pmx-lb-v em { font-style:normal; font-weight:600; font-size:0.72em; color:var(--text-light); }
        .pmx-lb-x { flex:0 0 auto; font-size:0.78em; color:var(--text-light); min-width:118px; text-align:right; }

        /* interactive tasks */
        .pmx-tasks { display:flex; flex-direction:column; gap:6px; }
        .pmx-task { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; }
        .pmx-task.idle { background:#fbfcfe; }
        .pmx-task-n { flex:1 1 220px; min-width:160px; font-size:0.88em; font-weight:600; color:var(--text-dark); }
        .pmx-task-n em { display:block; font-style:normal; font-weight:400; font-size:0.84em; color:var(--text-light); }
        .pmx-task-b { flex:1 1 100px; display:flex; min-width:70px; }
        .pmx-task-v { flex:0 0 auto; font-size:0.82em; font-weight:700; font-variant-numeric:tabular-nums; min-width:102px; text-align:right; }
        .pmx-task-a { flex:0 0 auto; font-size:0.78em; color:var(--text-light); font-variant-numeric:tabular-nums; min-width:62px; text-align:right; }

        /* AI insight cards */
        .pmx-ai { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; margin-bottom:9px; }
        .pmx-ai-hd { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:9px; }
        .pmx-ai-s { flex:1 1 auto; font-size:0.82em; color:var(--text-light); font-weight:600; }
        .pmx-ai-btn { background:#1d4ed8; color:#fff; border:none; border-radius:8px; padding:7px 15px; font-family:inherit; font-size:0.82em; font-weight:700; cursor:pointer; }
        .pmx-ai-btn:hover:not(:disabled) { background:#1e40af; }
        .pmx-ai-btn:disabled { opacity:.6; cursor:default; }
        .pmx-ai-btn:focus-visible { outline:3px solid #1d4ed8; outline-offset:2px; }
        .pmx-ai-body { font-size:0.88em; line-height:1.65; color:var(--text-mid); }
        .pmx-ai-none { font-style:italic; color:var(--text-light); }
        .pmx-ai-err { color:#b91c1c; }

        @media (max-width: 720px) {
            .pmx-hm-v, .pmx-hm-avg, .pmx-lb-x, .pmx-task-a { display:none; }
            .pmx-hm-row, .pmx-lb, .pmx-task { flex-wrap:wrap; }
        }

/* ═══════════════════════════════════════════════════════════════════════
   THE FIVE BANDS — the standard shape, shared by every course page
   ───────────────────────────────────────────────────────────────────────
   Built on Level 3 in phase 2 and lifted here in phase 3, unchanged, so the
   other courses inherit the shape rather than each growing their own copy
   of it. docs/tutor-area-plan.md is the argument for the order the bands go
   in: This week, The class, The learners, Set work, Evidence — the first
   three open, the last two shut, identical on every course so a tutor
   learns where things are once instead of five times.

   A course page adds what is PARTICULAR to it and nothing else. If a rule
   here needs a course-specific tweak, that is a sign the shape is wrong for
   that course, not that the rule wants overriding.
   ═══════════════════════════════════════════════════════════════════════ */

/* "This week" — the answers, above everything else. Two rows, both
   pressable, sized so the whole band is readable at a glance rather
   than scanned. */
.pmx-week{background:#fff;border:1px solid #e2e8f0;border-radius:12px;
          padding:14px 16px;margin:0 0 14px;}
.pmx-week-h{font-size:.72rem;font-weight:800;letter-spacing:.12em;
            text-transform:uppercase;color:#64748b;margin:0 0 8px;}
.pmx-week-row{display:flex;align-items:baseline;gap:12px;width:100%;
              background:none;border:0;padding:7px 0;text-align:left;
              cursor:pointer;font:inherit;border-top:1px solid #f1f5f9;}
.pmx-week-row:first-of-type{border-top:0;}
.pmx-week-row:hover .pmx-week-v{text-decoration:underline;}
.pmx-week-k{flex:0 0 74px;font-size:.78rem;font-weight:700;color:#94a3b8;
            text-transform:uppercase;letter-spacing:.06em;}
.pmx-week-v{font-size:1rem;color:#1e293b;}
.pmx-week-v b{color:#0f172a;}

/* The bands. Ranked, not hidden: every one is on the page, in the same
   order on every course, and the ones a tutor needs monthly rather than
   weekly are shut. */
.pmx-lens{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.pmx-lens label{font-size:.78rem;font-weight:700;color:#64748b;
                text-transform:uppercase;letter-spacing:.06em;}
.pmx-band{background:#fff;border:1px solid #e2e8f0;border-radius:12px;
          padding:0 16px;margin:0 0 14px;}
.pmx-band > summary{display:flex;align-items:baseline;gap:12px;
                    padding:14px 0;cursor:pointer;list-style:none;}
.pmx-band > summary::-webkit-details-marker{display:none;}
.pmx-band > summary::before{content:'\25B8';color:#94a3b8;font-size:.8rem;
                            transition:transform .15s;}
.pmx-band[open] > summary::before{transform:rotate(90deg);}
.pmx-band > summary b{font-size:1.05rem;color:#0f172a;}
.pmx-band > summary span{font-size:.85rem;color:#94a3b8;}
.pmx-band > *:last-child{padding-bottom:16px;}
.pmx-subset{font-size:.88rem;color:#475569;margin:0 0 10px;}
.pmx-subset:empty{display:none;}
.pmx-undo{background:none;border:0;padding:0 0 0 4px;font:inherit;
          color:#1d4ed8;text-decoration:underline;cursor:pointer;}

/* Sessions in the heat map — the same grouping the course uses, so a
   tutor opens the one they are teaching instead of scrolling past the
   fifty they are not. */
.pmx-sess{border:1px solid #e2e8f0;border-radius:10px;margin:0 0 7px;
          padding:0 12px;background:#fcfdff;}
.pmx-sess > summary{display:flex;align-items:baseline;gap:10px;
                    padding:10px 0;cursor:pointer;list-style:none;}
.pmx-sess > summary::-webkit-details-marker{display:none;}
.pmx-sess > summary::before{content:'\25B8';color:#94a3b8;font-size:.72rem;
                            transition:transform .15s;}
.pmx-sess[open] > summary::before{transform:rotate(90deg);}
.pmx-sess-n{flex:1;font-weight:700;color:#1e293b;font-size:.94rem;}
.pmx-sess-m{font-size:.8rem;color:#94a3b8;white-space:nowrap;}
.pmx-sess-v{font-size:.85rem;font-weight:700;white-space:nowrap;min-width:84px;
            text-align:right;}
.pmx-sess-a{font-size:.8rem;color:#64748b;white-space:nowrap;min-width:62px;
            text-align:right;}

/* The same grouping inside one learner. Tighter than the class version
   because it sits two levels in. */
.pmx-lsess{border-top:1px solid #eef2f7;}
.pmx-lsess:first-child{border-top:0;}
.pmx-lsess > summary{display:flex;align-items:baseline;gap:10px;
                     padding:9px 2px;cursor:pointer;list-style:none;}
.pmx-lsess > summary::-webkit-details-marker{display:none;}
.pmx-lsess > summary::before{content:'\25B8';color:#94a3b8;font-size:.68rem;
                             transition:transform .15s;}
.pmx-lsess[open] > summary::before{transform:rotate(90deg);}
.pmx-lsess-n{flex:1;font-weight:700;color:#334155;font-size:.88rem;}
.pmx-lsess-m{font-size:.76rem;color:#a3aec0;white-space:nowrap;}
.pmx-lsess-v{font-size:.8rem;font-weight:700;color:#64748b;white-space:nowrap;
             min-width:56px;text-align:right;}
.pmx-lsess-v.done{color:#15803d;}

.pmx-rep{display:flex;align-items:center;gap:16px;justify-content:space-between;
         border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;margin:0 0 10px;
         background:#fcfdff;}
.pmx-rep b{display:block;font-size:.95rem;color:#1e293b;}
.pmx-rep span{display:block;font-size:.82rem;color:#64748b;margin-top:2px;max-width:56ch;}
.pmx-rep-b{background:#1d4ed8;color:#fff;border:0;border-radius:8px;
           padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;}
.pmx-rep-b[disabled]{background:#94a3b8;cursor:default;}
.pmx-rep-n{font-size:.84rem;color:#b91c1c;margin:0 0 10px;}
.pmx-rep-n:empty{display:none;}

/* A panel inside a band is always shown. .tab-panel is display:none until
   switchTab marks one active, which is right for a tab and wrong for a band:
   the six that used to be Level 2's tabs are on screen together now. They keep
   the class because tour.js and tutor-l2w.js look them up by id and a rename
   would be a change to files this one cannot see. */
.pmx-band .tab-panel { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   EVERY HEAT-MAP ROW OPENS
   ───────────────────────────────────────────────────────────────────────
   The row says how far the class has got; opening it says who. Shared by
   every course, because all four had a row like this and would otherwise
   have grown four of these lists.

   The row itself becomes the <summary>, so the whole row is the hit target
   rather than a chevron somebody has to aim at on a phone.
   ═══════════════════════════════════════════════════════════════════════ */

.pmx-drill { border: 0; margin: 0; padding: 0; }
.pmx-drill > summary { list-style: none; cursor: pointer; display: block; }
.pmx-drill > summary::-webkit-details-marker { display: none; }
.pmx-drill > summary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 10px; }
.pmx-drill[open] > summary .pmx-hm-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* the tally that appears on the row itself, once it can be opened */
.pmx-who-t { font-size: 0.78em; color: var(--text-light); white-space: nowrap; }

.pmx-who {
  border: 1px solid #e2e8f0; border-top: 0;
  border-radius: 0 0 10px 10px; background: #fcfdff;
  padding: 4px 14px 8px;
}
.pmx-who-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid #eef2f7;
}
.pmx-who-row:first-child { border-top: 0; }
.pmx-who-n { flex: 1 1 auto; min-width: 0; font-size: 0.86em; font-weight: 600; color: #334155; }
.pmx-who-d { font-size: 0.8em; color: var(--text-light); white-space: nowrap; }
.pmx-who-v {
  flex: 0 0 auto; font-size: 0.74em; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
}
/* NOT STARTED IS GREY, NOT RED. Somebody who has not reached a lesson is not
   failing it, and colouring them as though they were is the mistake this
   dashboard keeps having to unlearn. */
.pmx-who-v.done { background: #dcfce7; color: #166534; }
.pmx-who-v.part { background: #fef3c7; color: #854d0e; }
.pmx-who-v.none { background: #f1f5f9; color: #64748b; }
.pmx-who-empty { font-size: 0.85em; color: var(--text-light); padding: 10px 14px; margin: 0; }
/* The one thing a drill-down still hands off to: Level 2's most-missed
   questions, which answers a different question from "who is where". */
.pmx-who-more { padding: 8px 14px 2px; }

@media (max-width: 640px) {
  .pmx-who-row { flex-wrap: wrap; gap: 4px 8px; }
  .pmx-who-d { flex: 1 1 100%; order: 3; }
}