/* 面板 · 课程页和手机上的课程目录 的样式（pages/courses.js、pages/coursepanes.js）。归 M2 课程中心 Fomalhaut647。只写这一页自己的类，类名带 co- 前缀；共用的在 shell.css。
   课程页（docs/specs/479-course-nav.md，尺寸照 docs/mockups/course-nav/README.md 第 2.2、2.5 节）：纸里左边课内侧栏 156 宽，右边正文最宽 940 居中、自己滚；
   窗口 760–959 时课内侧栏换成课名下面一排标签；手机上整页往下排（手机那一套由下一步做）。「其他」照以前一列（.co、.co-h）。 */

/* ---------------------------------------------------------------- 外框：课内侧栏 + 正文（正文自己滚，系统滚动条藏掉，换成浮着的 .u-thumb） */
.co-page { display: flex; height: calc(100vh - 16px); height: calc(100dvh - 16px); min-width: 0; overflow-wrap: anywhere; }
.co-page.is-bare > .co-sub { display: none; }
/* 宽 180：样式稿是 156，放不下「在 P-Lib 打开」和右边三位数的份数（2026-10-22 放宽） */
.co-sub { flex: none; display: flex; flex-direction: column; width: 180px; padding: 22px 10px 16px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.co-sub::-webkit-scrollbar, .co-body::-webkit-scrollbar { display: none; }
.co-sub-h { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 8px 16px; }
.co-sub .cmono.co-mono { width: 36px; height: 36px; border-radius: 10px; background: var(--tint-soft); color: var(--tint); font-size: 16px; font-weight: 600; }
.co-sub .cmono.co-mono .ic { width: 20px; height: 20px; color: var(--tint); }
.co-sub-name { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; word-break: break-all; }
.co-sub-line { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.co-tabs { display: flex; flex-direction: column; gap: 2px; }
button.co-tab { display: flex; align-items: center; gap: 9px; height: 36px; margin: 0; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
button.co-tab:hover { background: var(--soft); color: var(--ink); transform: none; }
button.co-tab.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
button.co-tab .ic { flex: none; width: 18px; height: 18px; }
button.co-tab.on .ic { color: var(--tint); }
.co-tab-mk { display: flex; margin-left: auto; }
.co-tab-mk:empty { display: none; }
.co-tab-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--soft-2); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; }
.co-tab-n.hot { background: var(--red); color: #fff; }
.co-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
/* 最下面两项：和上面几栏同一种行（图标对齐、灰字、悬停变深），字小一号，上面一条细线隔开 */
.co-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; }
.co-foot::before { content: ""; display: block; height: 1px; margin: 0 10px 10px; background: var(--line); }
.co-foot-b, button.co-foot-b { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; margin: 0; padding: 0 10px; border: 0; border-radius: 9px; background: none;
  color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.co-foot-b:hover, button.co-foot-b:hover { background: var(--soft); color: var(--ink); text-decoration: none; transform: none; }
.co-foot-b .ic { flex: none; width: 16px; height: 16px; }
.co-foot-n { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }   /* 「在 P-Lib 打开」右边的资料份数 */

.co-wrap { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.co-body { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.co-body:focus { outline: none; }
.co-in { max-width: 940px; margin: 0 auto; padding: 28px 40px 56px; }
/* 浮着的滚动条（ui.js 的 floatBar）：宽 6、离右边 3；滚动时出现，停下后淡出；电脑上能拖（拖的时候、移上去时一直显示） */
.u-thumb { position: absolute; right: 3px; z-index: 2; width: 6px; border-radius: 3px; background: rgba(0, 0, 0, .32); opacity: 0; pointer-events: none;
  transition: opacity .4s ease, width .15s ease, right .15s ease; }
.u-thumb.on { opacity: 1; pointer-events: auto; cursor: default; transition-duration: .1s; }
.u-thumb.on:hover, .u-thumb.is-drag { right: 2px; width: 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); }
.u-thumb[hidden] { display: none; }

/* ---------------------------------------------------------------- 正文的标题、卡片 */
.co-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.co-head-l { min-width: 0; }
.co-crumb { color: var(--muted); font-size: 12.5px; }
.co-head h1 { margin: 2px 0 0; color: var(--ink); font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.co-head-r { flex: none; margin-left: auto; padding-bottom: 3px; color: var(--muted); font-size: 13px; }
.co-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
/* 一竖排的网格要写明列宽 minmax(0, 1fr)：不写的话那一列至少有里面最宽一行那么宽，附件那一行不换行的长文件名、大文件说明会把整列撑得比窗口还宽，
   压到右列底下（2026-10-21 课件里两份 200 MB 的 PPTX 踩到） */
.co-page .sec-box { padding: 14px 16px 12px; border-radius: 14px; box-shadow: none; }
.co-page .sec-h { align-items: center; min-height: 28px; margin: 0 2px 6px; }
button.co-all { display: inline-flex; align-items: center; gap: 1px; padding: 0; border: 0; background: none; color: var(--tint); font-size: 13px; font-weight: 400; cursor: pointer; }
button.co-all:hover { text-decoration: underline; text-underline-offset: .2em; transform: none; background: none; }
button.co-all .ic { width: 14px; height: 14px; }
.co-empty { margin: 4px 2px 6px; color: var(--muted); font-size: 13.5px; }
/* 右键菜单开着时（menu.js 加 is-menu）：那一行、那张考试卡片保持选中的样子 */
.co-page .tk-row.is-menu { --row-bg: var(--sel); margin: 0 -10px; padding-left: 14px; padding-right: 14px; border-radius: 10px; border-top-color: transparent; }
.co-page .tk-row.is-menu + .tk-row { border-top-color: transparent; }
.co-page button.ex-tile.is-menu { background: var(--soft-2); }
.co-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }

/* 主页：左右两列，窗口窄于 1180 时右列排到左列下面 */
.co-home { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 20px; align-items: start; }
.co-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
button.co-nl, button.co-rl { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 8px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; }
button.co-nl:hover, button.co-rl:hover { background: var(--soft); transform: none; }
.co-nl-t, .co-rl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-nl-d, .co-rl-d { flex: none; color: var(--muted); font-size: 12.5px; }
button.co-rl { gap: 12px; padding: 8px 6px; }
.co-rl-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--muted); }
.co-rl-ic .ic { width: 18px; height: 18px; }
.co-info { display: grid; gap: 12px; margin: 2px 2px 4px; }
.co-info-r { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.55; }
.co-info-r dt { color: var(--muted); }
.co-info-r dd { margin: 0; color: var(--text); }
.co-wk { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--soft-2); overflow: hidden; }
.co-wk i { display: block; height: 100%; border-radius: 2px; background: var(--tint); }
.co-bar { display: flex; gap: 2px; height: 8px; margin: 4px 2px 12px; border-radius: 4px; overflow: hidden; }
.co-bar i { flex-basis: 0; min-width: 0; }
.co-bar i.co-bar-rest { background: var(--soft-2); }   /* 只有部分项给了占比：没覆盖到的那段 */

/* 主页的考试卡片（样式稿的 .exam）：和下面几块一样宽，一场一张竖着排 */
.co-exams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
button.co-exam { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 16px 18px; border: 1px solid rgba(217, 48, 37, .16); border-radius: 14px;
  background: var(--red-soft); color: inherit; font-weight: 400; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
button.co-exam:hover { background: rgba(217, 48, 37, .12); transform: none; }
button.co-exam.is-menu { box-shadow: 0 0 0 2px var(--tint); }
.co-exam-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-exam-k { color: var(--red); font-size: 12px; font-weight: 600; }
.co-exam-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.co-exam-t b { min-width: 0; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.co-exam-w { color: #5c5c61; font-size: 13px; }
.co-exam-n { flex: none; color: var(--red); text-align: right; }
.co-exam-n b { display: block; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.co-exam-n small { font-size: 12px; }
.co-exam-n.is-tbd, .co-exam-n.is-past { font-size: 15px; font-weight: 600; }
/* 过了时间还没勾掉的：整张变灰 */
button.co-exam.is-past { border-color: var(--line); background: var(--soft); }
button.co-exam.is-past:hover { background: var(--soft-2); }
button.co-exam.is-past .co-exam-k, .co-exam-n.is-past { color: var(--muted); }
.co-home .co-pie-lg { margin: 0 2px 4px; }

/* 通知栏的一条（公告、通知类事项）；课件的一条 */
.co-nt { padding: 16px 2px; border-top: 1px solid var(--line); }
.co-nt:first-child { padding-top: 4px; border-top: 0; }
.co-nt-h { display: flex; align-items: center; gap: 8px; }
.co-nt-t { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; text-decoration: none; }
a.co-nt-t:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
button.co-nt-b { margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
button.co-nt-b:hover { background: none; color: var(--tint); transform: none; }
.co-nt-d { flex: none; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.co-nt-p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.7; white-space: pre-line;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.co-nt > .fl { margin-top: 10px; }
.co-nt-f { margin-top: 10px; }
.co-fp { padding: 14px 2px; border-top: 1px solid var(--line); }
.co-fp:first-child { padding-top: 4px; border-top: 0; }
.co-compact .co-fp { padding: 10px 2px; }
.co-compact .co-fp:first-child { padding-top: 2px; }
.co-fp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.co-fp-w { flex: none; width: 44px; color: var(--muted); font-size: 12px; }
.co-fp-t { min-width: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
a.co-fp-t:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.co-fp-d { flex: none; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.co-fp > .fl { margin: 10px 0 0 54px; }
.co-compact .co-fp > .fl { margin-top: 8px; }
.co-fp.no-wk > .fl { margin-left: 0; }

/* 成绩构成、考勤：饼图照样式稿，前四个颜色校验过色盲区分度，后四个是事项类型的颜色。成绩栏是环形（中间空 68），主页是分段横条 */
:root { --pie-1: #2a78d6; --pie-2: #eb6834; --pie-3: #1baf7a; --pie-4: #eda100; --pie-5: #7a4cc2; --pie-6: #0f8b8d; --pie-7: #d93025; --pie-8: #8a96a5; }
.co-pie-wrap { display: flex; align-items: center; gap: 24px; padding: 4px 2px 6px; }
.co-pie { flex: none; width: 112px; height: 112px; }
.co-pie path, .co-pie circle { stroke: var(--panel); stroke-width: 2; stroke-linejoin: round; transition: opacity .15s; }
.co-pie path:hover { opacity: .82; }
.co-pie .co-pie-hole { fill: var(--panel); stroke: none; }
.co-pie-lg { flex: 1; min-width: 0; display: grid; gap: 8px; }
.co-pie-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: 13.5px; }
.co-pie-row i { width: 10px; height: 10px; border-radius: 3px; }
.co-pie-n { min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-pie-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 「其他」一页（一列）和手机上的课程目录 */
.co { display: grid; gap: 28px; min-width: 0; }
.co-h { display: flex; align-items: center; gap: 16px; }
.co-h h1 { margin: 0; }
.cmono.co-mono { width: 52px; height: 52px; border-radius: 14px; font-size: 24px; font-weight: 650; }
.cmono.co-mono .ic { width: 26px; height: 26px; }
.co-tree .ct-h { position: static; padding-left: 4px; }
.co-tree + .co-grades { margin: 18px 0 0 4px; }   /* 手机「课程」标签最下面的「成绩 ›」（docs/specs/grades.md） */

@media (max-width: 1179.98px) {
  .co-home { grid-template-columns: minmax(0, 1fr); }
}
/* 中等宽度：课内侧栏换成课名下面一排能左右滑的标签，最下面两项不显示（用右键菜单） */
@media (max-width: 959.98px) {
  .co-page { flex-direction: column; }
  .co-sub { width: auto; padding: 14px 20px 0; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .co-sub-h { flex-direction: row; align-items: center; gap: 10px; padding: 0 0 10px; }
  .co-sub .cmono.co-mono { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
  .co-sub-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .co-sub-line { margin-top: 0; }
  .co-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .co-tabs::-webkit-scrollbar { display: none; }
  button.co-tab { flex: none; }
  .co-foot { display: none; }
  .co-in { padding: 24px 28px 48px; }
}
/* 手机（窄于 760，需求说明「四、手机」）：整页往下排（系统滚动条本来就是浮着的）。课内侧栏换成顶上一条（mcourse.css 的 .mco-top）和分段按钮（.mco-seg），
   分段按钮贴在顶上一条下面；主页不显示标题（顶上的胶囊就是课名），别的栏标题是栏名、上面不写课名 */
.co-seg { display: none; }
@media (max-width: 759.98px) {
  .co-page { display: block; height: auto; }
  .co-sub { display: none; }
  .co-seg { position: sticky; top: 52px; z-index: 19; display: block; padding: 8px 12px 10px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .co-seg .mco-seg { margin: 0; }
  .co-wrap, .co-body { display: block; overflow: visible; }
  .co-body { overflow-x: clip; }
  .u-thumb { display: none; }
  .co-in { padding: 16px 16px 24px; }
  .co-head { margin-bottom: 16px; }
  .co-head.is-home, .co-crumb { display: none; }
  .co-head h1 { margin: 0; font-size: 22px; }
  .co-fp > .fl { margin-left: 0; }
  .co-fp-w { width: auto; }
  .co { gap: 22px; }
  .cmono.co-mono { width: 44px; height: 44px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  button.co-tab, .co-foot-b, .u-thumb { transition-duration: .01ms; }
}

/* 成绩构成没读出来：留一个空框加号，同学自己填（coursepanes.js 的 gradingBox）；填好的照样画横条、环形，标题右边改、删 */
button.co-gd-add { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 4px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  background: none; color: var(--muted); font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
button.co-gd-add:hover { background: var(--soft); color: var(--ink); transform: none; }
.co-gd-plus { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--soft-2); color: var(--ink); }
.co-gd-plus .ic { width: 16px; height: 16px; }
.co-gd-acts { display: inline-flex; gap: 2px; }
.co-gd-was { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.co-gd-was button.lnk { margin-left: 4px; font-size: 12.5px; }
.co-gd-form { display: grid; gap: 8px; padding: 2px 2px 4px; }
.co-gd-form > button.btn { justify-self: start; }
.co-gd-tip { margin: 0 0 2px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.co-gd-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; align-items: center; gap: 8px; }
input.co-gd-in { width: 100%; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 14px; }
input.co-gd-in:focus { outline: none; border-color: var(--tint); }
input.co-gd-in::placeholder { color: var(--faint); }
.co-gd-pc { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.co-gd-sum { margin: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.co-gd-sum:empty { display: none; }
.co-gd-sum.is-over { color: var(--orange); }
.co-gd-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

/* 自己建的课（#735 第 11 节，owncourse.js）：左栏跟着的课最下面「＋ 加一门课」、手机课程目录最下面一行、建课和改课的窗口、课名旁「改」 */
.ct .ct-add { margin-top: 2px; }
button.ct-add-b { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.ct-add-b:hover, button.ct-add-b:active { background: none; transform: none; }
.ct-add-b .cn-name { color: var(--muted); }
.ct .cn-row .cmono.ct-add-i { background: none; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
button.mco-row.mco-add { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.mco-add .mco-ic { color: var(--muted); font-size: 18px; }
.mco-add .mco-n { color: var(--muted); }
.oc-form { gap: 14px; }
.oc-slots-w { display: grid; gap: 6px; }
.oc-slots { display: grid; gap: 6px; }
.oc-slot { display: grid; grid-template-columns: 76px auto 10px auto minmax(0, 1fr) 28px; align-items: center; gap: 6px; }
.oc-slot select.oc-wd, .oc-slot input.oc-where { min-width: 0; height: 34px; }
.oc-dash { color: var(--muted); text-align: center; }
.oc-x { width: 28px; height: 28px; color: var(--muted); font-size: 18px; }
button.link.oc-add-slot { justify-self: start; font-size: 13.5px; }
input.oc-short { max-width: 12em; }
input.oc-until { justify-self: start; }
button.link.oc-del { justify-self: center; color: var(--red); font-size: 14px; }
button.link.co-own-ed { margin-left: 10px; font-size: 14px; font-weight: 400; vertical-align: middle; }
@media (max-width: 759.98px) {
  .oc-slot { grid-template-columns: 70px auto 10px auto 28px; }
  .oc-slot input.oc-where { grid-column: 1 / 5; }
}

/* #887 本周下载：课程页与手机课程目录共用 */
.co-week-entry { white-space: nowrap; font-size: 13px; margin: 8px; }
.week-dl { max-height: 88vh; overflow: auto; width: min(600px, 94vw); }
.week-dl h2 { margin: 0; }
.week-dl-courses { max-height: 28vh; overflow: auto; margin: 12px 0; }
.week-dl-courses label { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; }
.week-dl-courses input { width: 18px; height: 18px; flex: 0 0 auto; }
.week-dl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.week-dl-progress { overflow-wrap: anywhere; }
.week-dl-progress li { margin-bottom: 6px; }
.week-dl-progress a { display: inline-block; padding: 8px 14px; border-radius: 8px; }