/* ============================================================
   教学 · 课程（engstudy/pages/teach.html 课程列表 / pages/project.html 课程内页）
   参照学习通的课程视图：左侧课程信息 + 分区导航，右侧内容面板。
   ============================================================ */

/* ---------- 课程列表卡片 ---------- */
.course-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* 课程卡：标记已换公共交互卡（.quick + .quick--media），私有形状删除。
   由 teach.js 的 cardHTML() 生成；.course-cell 外壳与编号/移出仍在下文。 */

/* ---------- 课程内页：单列整幅（课程卡已上移到页头右侧） ---------- */
.course-shell {
    display: block;
    width: 100%;
    margin-top: 22px;
}

.course-main { width: 100%; min-width: 0; }

/* 课程封面：页头右侧只放一张封面；课程名 / 教师 / 章节数在下面的概览面板里。
   不放文字，所以卡片退成「一层薄边 + 封面」；表面走全站卡片档。 */
.course-card {
    flex: 0 0 auto;
    padding: 6px;
    line-height: 0;
}

.course-card__cover {
    display: block;
    width: 220px;
    aspect-ratio: 240 / 130;
    overflow: hidden;
    border-radius: var(--mz-radius);
    background: var(--mz-accent-wash);
}

.course-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card__cover--none {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mz-accent);
}

/* ---------- 右侧面板（表面走全站卡片档）---------- */
.course-panel {
    padding: 22px;
}

.course-panel[hidden] { display: none; }

.course-panel__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mz-line);
}

.course-panel__head h2 {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 700;
}

.course-panel__head .tz-mono { margin-left: auto; }

/* 概览面板：封面已上移到页头那张课程卡，这里只留名称 / 简介 / 事实 / 按钮 */
.course-hero {
    display: block;
    width: 100%;
}

.course-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

/* ---------- 学生端章节：面板页头里的搜索框 ----------
   目录树已改「胶囊 + 列表两段式」：章 = .mz-chips / .mz-chip（公共层），
   节 = .mz-grid + .quick（公共层），私有 .toc-* 规则整段删除。
   这里只剩面板页头那颗搜索框的尺寸微调（页面级 css 只做微调，不另起一套）。 */
.panel-search {
    width: 180px;
    min-height: 34px;
    padding: 6px 12px;
    font-size: .84rem;
}

@media (max-width: 560px) {
    .panel-search { width: 100%; }
}

@media (max-width: 900px) {
    .course-shell { display: block; }
    .course-card { width: 100%; }
    .course-card__cover { width: 100%; }
}

/* ---------- 课程内的工具（课堂工具条目并进课程分区） ---------- */
.course-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.course-tool {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    background: var(--mz-glass-2);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s, background .18s, transform .18s;
}

.course-tool:hover {
    border-color: var(--mz-accent-line);
    background: var(--mz-accent-wash);
    transform: translateY(-2px);
}

.course-tool__role {
    font-family: var(--mz-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mz-ink-4);
}

.course-tool__t {
    font-size: .96rem;
    font-weight: 700;
    color: var(--mz-ink);
}

.course-tool__d {
    font-size: .8rem;
    line-height: 1.65;
    color: var(--mz-ink-2);
}

.course-tool__go {
    margin-top: 4px;
    font-size: .78rem;
    color: var(--mz-accent);
}

.course-todo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* ============================================================
   课程列表页（teach.html）：我的课程 + 我的工具
   ============================================================ */

/* ---------- 加入课程：编号就是准入凭证，做成一条「入场条」 ---------- */
.joinbar {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px dashed var(--mz-line-strong);
    border-radius: var(--mz-radius);
    background: var(--mz-glass-2);
}

/* 未登录时整条收起：display 规则会盖掉 [hidden]，这里显式声明一次 */
.joinbar[hidden] { display: none !important; }

.joinbar__label {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mz-ink-4);
}

.joinbar__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.joinbar__input {
    flex: 1 1 220px;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius-pill);
    background: var(--mz-glass);
    color: var(--mz-ink);
    font-family: var(--mz-mono);
    font-size: .92rem;
    letter-spacing: .04em;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}

.joinbar__input::placeholder {
    font-family: var(--mz-sans);
    letter-spacing: 0;
    color: var(--mz-ink-4);
}

.joinbar__input:focus {
    border-color: var(--mz-accent-line);
    box-shadow: 0 0 0 3px var(--mz-accent-wash);
}

.joinbar__btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 24px;
}

.joinbar__msg {
    margin: 0;
    min-height: 1.15em;
    font-size: .8rem;
    color: var(--mz-ink-3);
}

.joinbar__msg[data-kind="error"] { color: var(--mz-danger); }
.joinbar__msg[data-kind="ok"] { color: var(--mz-ok); }

/* ---------- 课程卡片：卡片 + 编号 / 移出 ---------- */
.course-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.course-cell .course-card { flex: 1 1 auto; }

.course-cell__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
}

.course-cell__code {
    font-family: var(--mz-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--mz-ink-4);
}

.course-cell__exit {
    margin-left: auto;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .74rem;
    color: var(--mz-ink-4);
    cursor: pointer;
    transition: color .16s;
}

.course-cell__exit:hover {
    color: var(--mz-danger);
    text-decoration: underline;
}

/* ---------- 登录门禁 / 空状态：占满整行，语气是「请你做一件事」 ---------- */
.teach-gate {
    grid-column: 1 / -1;
    padding: 22px;
    border: 1px dashed var(--mz-line-strong);
    border-radius: var(--mz-radius-l);
    background: var(--mz-glass-2);
}

.teach-gate b {
    display: block;
    font-size: 1rem;
    color: var(--mz-ink);
}

.teach-gate p {
    margin: 8px 0 0;
    font-size: .86rem;
    line-height: 1.75;
    color: var(--mz-ink-3);
}

.teach-gate .btn { margin-top: 14px; }

/* ---------- 我的工具 ---------- */
.tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
}

@media (max-width: 560px) {
    .joinbar__input { flex: 1 1 100%; }
    .joinbar__btn { width: 100%; }
}

/* ---------- 课程内页：推送到本课的作业 / 考试 / 讨论 ---------- */
.push-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.push-item {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    background: var(--mz-glass-2);
    color: inherit;
    text-decoration: none;
    transition: border-color .16s, background .16s;
}

a.push-item:hover,
a.push-item:focus-visible {
    border-color: var(--mz-accent-line);
    background: var(--mz-accent-wash);
    outline: none;
}

.push-item__title {
    font-size: .94rem;
    font-weight: 700;
    color: var(--mz-ink);
}

.push-item__desc {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--mz-ink-2);
}

.push-item__at {
    font-family: var(--mz-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--mz-ink-4);
}

.push-empty {
    padding: 18px;
    border: 1px dashed var(--mz-line-strong);
    border-radius: var(--mz-radius);
    font-size: .86rem;
    line-height: 1.7;
    color: var(--mz-ink-4);
}

.push-more {
    margin: 12px 0 0;
    font-size: .84rem;
}

.push-more a {
    color: var(--mz-accent);
    text-decoration: none;
}

.push-more a:hover { text-decoration: underline; }

/* ============================================================
   课程内页：右栏定宽 + 分区胶囊（2026 改版）
   ------------------------------------------------------------
   规格：左课程卡 / 右内容卡，01–05 改横向胶囊。
   右栏宽度由 .course-shell 的栅格列决定，这里再锁一道，
   防止某个面板内容把整列顶宽（表现为切面板时整页自己变宽）。
   ============================================================ */
.course-shell > .course-main {
    min-width: 0;
    width: 100%;
}

/* 严格按规格：课程卡已在页头，内容区单列整幅，不会被内容顶宽 */
.course-shell {
    display: block;
    width: 100%;
}

.course-main .mz-chips { margin-bottom: 14px; }

.course-panel {
    width: 100%;
    box-sizing: border-box;
}

/* ---------- 容器尺寸（放在最后加载的样式表里，确保不被前面的规则盖掉） ----------
   规格：页面左右撑满、基准 1280、页边 24、禁止内容贴屏幕边。
   双类名写法只为一件事：d 掉别处可能存在的同名单类规则。 */
.shell.shell {
    width: 100%;
    max-width: var(--mz-wrap, 1280px);
    margin: 0 auto;
    padding-left: var(--mz-gutter, 24px);
    padding-right: var(--mz-gutter, 24px);
    box-sizing: border-box;
}

.shell.shell > .main {
    width: 100%;
    max-width: none;
    min-width: 0;
}