/* Project work that follows the pupil (ProjectWorkController, project-work.js).
   .pw-sofar*  the "Your project so far" panel inside a lesson step
   .pw-box-*   the notes inside a project's Enter Your Work box
   .pw-page*   the My project page (pupil and teacher) */

:root {
    --pw-accent: #0f766e;
    --pw-accent-dark: #134e4a;
    --pw-accent-soft: #ecfdf8;
    --pw-line: #d5e9e5;
    --pw-ink: #1f2330;
    --pw-muted: #5b6474;
}

/* ── the panel ─────────────────────────────────────────────────────────────── */
.project-so-far:empty { display: none; }
.pw-sofar {
    border: 1px solid var(--pw-line);
    border-left: 4px solid var(--pw-accent);
    border-radius: 10px;
    background: #fff;
    margin: 0 0 1rem;
    color: var(--pw-ink);
    text-align: left;
}
.pw-sofar-head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem 1rem; background: var(--pw-accent-soft); border-radius: 8px 8px 0 0;
}
.pw-sofar-head > i { color: var(--pw-accent); font-size: 1.35rem; }
.pw-sofar-heading { flex: 1 1 12rem; min-width: 0; }
.pw-sofar-eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--pw-accent); }
.pw-sofar-title { font-weight: 700; font-size: 1.05rem; color: var(--pw-accent-dark); }
.pw-sofar-open {
    font-size: .9rem; font-weight: 600; color: var(--pw-accent); text-decoration: none;
    border: 1px solid var(--pw-accent); border-radius: 999px; padding: .2rem .8rem; white-space: nowrap;
}
.pw-sofar-open:hover { background: var(--pw-accent); color: #fff; }
.pw-sofar-body { padding: .35rem 1rem .8rem; }
.pw-sofar-note { color: var(--pw-muted); font-size: .9rem; margin: .45rem 0 .35rem; }
.pw-sofar-part { border-top: 1px solid #eef1f5; padding: .4rem 0; }
.pw-sofar-part:first-of-type { border-top: 0; }
.pw-sofar-part > summary {
    cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
    padding: .25rem 0;
}
.pw-sofar-part > summary::-webkit-details-marker { display: none; }
.pw-sofar-part > summary::before {
    content: "\25B8"; color: var(--pw-accent); display: inline-block; width: .9rem; transition: transform .15s;
}
.pw-sofar-part[open] > summary::before { transform: rotate(90deg); }
.pw-part-name { font-weight: 700; color: var(--pw-accent-dark); }
.pw-part-from { color: var(--pw-muted); font-size: .88rem; }
.pw-sofar-work {
    margin: .3rem 0 .2rem 1.5rem; padding: .6rem .8rem; background: #f8faf9; border: 1px solid #e6eeec;
    border-radius: 8px; max-height: 22rem; overflow: auto; overflow-wrap: anywhere;
}
.pw-sofar-work p { margin: 0 0 .4rem; }
.pw-sofar-work img, .pw-work img { max-width: 100%; height: auto; }
.pw-sofar-work table, .pw-work table { border-collapse: collapse; margin: .3rem 0; }
.pw-sofar-work td, .pw-sofar-work th, .pw-work td, .pw-work th { border: 1px solid #d6d9e3; padding: .25rem .5rem; vertical-align: top; }
.pw-empty { color: #8a919d; font-style: italic; margin: .2rem 0 .2rem 1.5rem; }
.pw-sofar.is-teacher .pw-sofar-body ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }

/* ── inside a project box ──────────────────────────────────────────────────── */
.pw-box-note {
    display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--pw-muted);
    background: var(--pw-accent-soft); border: 1px solid var(--pw-line); border-radius: 8px;
    padding: .45rem .7rem; margin: .25rem 0 .6rem;
}
.pw-box-note[hidden] { display: none; }
.pw-box-note i { color: var(--pw-accent); margin-top: .15rem; }
.pw-box-note a { color: var(--pw-accent); font-weight: 600; }
.pw-box-carry:empty { display: none; }
.pw-box-carry { display: block; margin-top: .2rem; color: var(--pw-accent-dark); }

/* ── the My project page ───────────────────────────────────────────────────── */
.pw-page { background: #f4f7f6; min-height: 100vh; padding: 24px 0 56px; color: var(--pw-ink); }
.pw-container { max-width: 900px; }
.pw-header {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e3e9e8; border-radius: 12px; padding: 20px 22px; margin-bottom: 14px;
}
.pw-header-main { flex: 1 1 260px; min-width: 0; }
.pw-eyebrow { letter-spacing: .14em; text-transform: uppercase; color: var(--pw-accent); font-size: .74rem; font-weight: 700; }
.pw-header h1 { font-size: 1.65rem; color: var(--pw-accent-dark); margin: 2px 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.pw-sub { color: var(--pw-muted); margin: 0; }
.pw-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-intro { background: #fff; border: 1px solid #e3e9e8; border-radius: 12px; padding: 12px 18px; margin-bottom: 18px; color: var(--pw-muted); }
.pw-intro p:last-child { margin-bottom: 0; }
.pw-jump { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pw-jump a {
    background: #fff; border: 1px solid var(--pw-line); border-radius: 999px; padding: 4px 14px;
    color: var(--pw-accent-dark); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.pw-project { margin-bottom: 30px; }
.pw-project-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--pw-accent); color: #fff; border-radius: 10px; padding: 10px 16px; margin-bottom: 12px;
}
.pw-project-head h2 { font-size: 1.15rem; margin: 0; flex: 1 1 auto; color: #fff; }
.pw-count { font-size: .88rem; opacity: .9; }
.pw-project-head .btn { background: #fff; color: var(--pw-accent-dark); border-color: #fff; font-weight: 600; }
.pw-entry {
    background: #fff; border: 1px solid #e3e9e8; border-left: 3px solid #14b8a6; border-radius: 9px;
    padding: 14px 16px; margin-bottom: 12px; break-inside: avoid;
}
.pw-entry.is-empty { border-left-color: #cbd5d3; }
.pw-entry h3 { font-size: 1.02rem; margin: 0; color: var(--pw-accent-dark); font-weight: 700; }
.pw-entry-meta { color: var(--pw-muted); font-size: .86rem; margin: 2px 0 10px; }
.pw-entry-meta a { color: var(--pw-accent); }
.pw-work { overflow-x: auto; overflow-wrap: anywhere; }
.pw-work p { margin: 0 0 .45rem; }
.pw-page .pw-empty { margin-left: 0; }
.pw-files { margin-top: 8px; font-size: .9rem; }
.pw-earlier { margin-top: 10px; border-top: 1px dashed #d5e0de; padding-top: 8px; }
.pw-earlier > summary { cursor: pointer; color: var(--pw-accent); font-size: .9rem; font-weight: 600; }
.pw-earlier-copy { margin: 10px 0 0; padding: 10px 12px; background: #f8faf9; border: 1px solid #e6eeec; border-radius: 8px; }
.pw-earlier-copy .pw-entry-meta { margin-top: 0; }

@media (max-width: 575.98px) {
    .pw-page { padding-top: 12px; }
    .pw-header { padding: 16px; }
    .pw-header h1 { font-size: 1.35rem; }
    .pw-sofar-work, .pw-empty { margin-left: 0; }
}

/* Only .pw- rules here: every lesson page loads this file, and a print rule on the site's own header
   or footer hid them on every printed lesson (review, 30 Oct 2026). The My project page hides the site
   around it itself (Views/ProjectWork/Page.cshtml). */
@media print {
    .pw-page { background: #fff; padding: 0; }
    .pw-header, .pw-intro, .pw-entry { border-color: #ccc; }
    .pw-project-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pw-project + .pw-project { break-before: page; }
}