/* 面板 · 首页 的样式（pages/home.js）。归 M1 平台。只写这一页自己的类，类名带这一页的前缀 hm-；共用的在 shell.css（区块、紧凑的一行、考试卡片）、
   chat.css（右边一栏的对话和它的摆法 .chat-host）。2026-10-17 晚改成待办为主：问好、要你处理的、「接下来 7 天」一条，下面是待办清单（样式在 pages/todo.css）。 */

/* 整页：区块之间 28px（手机 22px）。用 gap 不用段距：平时空着、藏起来的块（顶上的提示、演示那一行、宽屏的输入条）不占位置 */
.page.hm-page { display: flex; flex-direction: column; gap: 28px; max-width: 880px; }
.page.hm-page > * + * { margin-top: 0; }
.hm-page > [hidden] { display: none; }
.hm-page > [data-sec]:empty { display: none; }   /* 顶上的提示平时是空的：别占一道间距 */
.page.hm-page > [data-sec]:first-child + * { margin-top: 0; }   /* app.css 给第一块后面加的 28px：首页用 gap 排，不要它 */

/* 顶上的提示（只在要学生处理时出现：助手出了问题、暂停中，教学网同步暂停了）：浅灰底的一条，左边状态圆点，右边处理的入口 */
.hm-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--soft); font-size: 14px; color: var(--text); }
.hm-alert-x { flex: 1 1 240px; min-width: 0; margin: 0; line-height: 1.55; }
.hm-alert-x b { font-weight: var(--fw-head); color: var(--ink); }
.hm-alert-why { margin-left: 8px; color: var(--muted); font-size: 13px; }
.hm-alert-a { display: flex; flex: none; align-items: center; gap: 10px; }
.hm-alert-a > button { padding: 5px 14px; font-size: 13px; }
.hm-alert-a > a { font-size: 13px; }
.hm-page > [data-sec] > * + * { margin-top: 12px; }

/* 还差 N 步（#736）：没做完的接微信、接北大邮箱、读课表，一项一行：左边图标和名字（点了打开那一步），右边浅色的「不用了」 */
.hm-left { padding: 14px 20px 8px; }
.hm-left .sec-h { margin-bottom: 2px; }
.hm-left-r { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.hm-left .sec-h + .hm-left-r { border-top: 0; }
button.hm-left-go { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; border: 0; background: none; color: var(--ink); text-align: left; font-size: 14px; }
button.hm-left-go:hover { background: none; }
button.hm-left-go b { flex: 1; font-weight: 500; }
button.hm-left-go > svg { width: 16px; height: 16px; color: var(--faint); transition: transform var(--dur-2) ease, color var(--dur-2) ease; }
button.hm-left-go:hover > svg { color: var(--ink); transform: translateX(2px); }
.hm-left-ic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--ink); }
.hm-left-ic svg { width: 18px; height: 18px; }
button.lnk.hm-left-no { flex: none; color: var(--muted); }

/* 第一份报告（#736）：读的时候一张进度卡（转圈、一句话、细进度条），读完换成报告卡片：一段一行，左边小标题、右边内容（手机上下排），
   底下「能做 / 不能做」小卡（abilities.css）和「知道了」 */
.hm-fr-read { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 20px; }
.hm-fr-read > b { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hm-fr-spin { flex: none; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--tint); border-radius: 50%; animation: hm-fr-spin 1s linear infinite; }
@keyframes hm-fr-spin { to { transform: rotate(360deg); } }
.hm-fr-bar { flex: 1 0 100%; height: 4px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.hm-fr-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--tint); transition: width var(--dur-4) ease; }
.hm-fr { display: flex; flex-direction: column; padding: 18px 20px 16px; }
.hm-fr .sec-h { margin-bottom: 4px; font-size: 16px; }
.hm-fr-p { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.hm-fr .sec-h + .hm-fr-p { border-top: 0; }
.hm-fr-k { color: var(--muted); font-size: 13px; line-height: 1.75; }
.hm-fr-v { display: grid; gap: 2px; min-width: 0; }
.hm-fr-v a { color: var(--ink); text-decoration: none; }
.hm-fr-v a:hover { color: var(--tint); text-decoration: underline; text-underline-offset: .2em; }
.hm-fr-names { margin: 0; }
.hm-fr-names .tag { margin-left: 8px; vertical-align: 1px; }
.hm-fr-none { color: var(--muted); }
button.hm-fr-row { display: flex; align-items: baseline; gap: 12px; width: 100%; min-width: 0; margin: 0 -6px; padding: 2px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-weight: 400; text-align: left; font-size: 14px; line-height: 1.6; box-sizing: content-box; }
button.hm-fr-row:hover { background: var(--soft); }
.hm-fr-d { flex: none; width: 78px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-fr-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hm-fr-t b { margin-right: 6px; color: var(--ink); font-weight: 600; }
.hm-fr-g, .hm-fr-c { overflow-wrap: anywhere; }   /* 课名（活动名）后面接着排，放不下就折行 */
.hm-fr-g > a { margin-right: 8px; font-weight: 600; }
.hm-fr-c > :first-child { margin-right: 10px; }
.hm-fr-when { color: var(--muted); font-size: 13px; }
.hm-fr > p.hm-fr-tail { margin: 0 0 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.hm-fr-a { display: flex; justify-content: flex-end; margin-top: 14px; }
.hm-fr-a > button { padding: 7px 22px; }

/* 问好：一行，简短 */
.hm-hello { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.hm-hello h1 { margin: 0; font-size: 26px; }
.hm-hello p { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 要你处理的：等你点头的信、等你确认的事。有才出现，浅黄底、左边一道黄边，一件一行，右边按钮 */
.hm-att { padding: 4px 16px; border: 1px solid var(--yellow-line); border-left: 3px solid var(--yellow); border-radius: var(--radius-sm); background: var(--yellow-soft); }
.hm-att-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--yellow-line); }
.hm-att-row:first-child { border-top: 0; }
.hm-att-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--panel); }
.hm-att-ic .ic { width: 16px; height: 16px; }
.hm-att-ic.mail { color: var(--tint); }
.hm-att-ic.ask { color: var(--yellow); }
.hm-att-b { flex: 1; min-width: 0; }
.hm-att-b b { display: block; color: var(--ink); font-weight: 600; line-height: 1.45; }
.hm-att-b small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-att-acts { flex: none; display: flex; gap: 8px; }

/* 接下来 7 天：从今天起七格一排，今天标出来；每格星期、几号、「● N 件」（圆点是最要紧那一类的颜色，和日历的图例一样；
   有考试或过期的件数标红）、几节课 */
.sec-box.hm-wk { padding-bottom: 16px; }
.hm-wk-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
button.hm-wk-d { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 8px 2px 7px; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: var(--soft); color: inherit; font-weight: 400; line-height: 1.2; }
button.hm-wk-d:hover { border-color: var(--line); background: var(--soft); transform: none; }
.hm-wk-w { color: var(--muted); font-size: 12px; }
.hm-wk-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-wk-d.is-today .hm-wk-n { background: var(--tint); color: #fff; }
.hm-wk-k { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 15px; color: var(--ink); font-size: 12px; font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-wk-k.is-hot { color: var(--red); }
.hm-wk-k i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t-note); }
.hm-wk-k i.k-exam, .hm-wk-k i.k-late { background: var(--t-exam); }
.hm-wk-k i.k-hw { background: var(--t-hw); }
.hm-wk-k i.k-att { background: var(--t-att); }
.hm-wk-k i.k-mine { background: var(--t-mine); }
.hm-wk-k i.k-ext { background: var(--t-ext); }
.hm-wk-c { min-height: 14px; color: var(--faint); font-size: 11px; white-space: nowrap; }
.hm-wk-msg { margin: 12px 0 0; font-size: 13.5px; }

@media (max-width: 759.98px) {
  .page.hm-page { gap: 22px; }
  .hm-hello h1 { font-size: 24px; }
  .hm-fr, .hm-fr-read { padding-inline: 16px; }
  .hm-fr-p { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hm-fr-a > button { flex: 1; }
  .hm-att { padding-inline: 12px; }
  .hm-att-row { flex-wrap: wrap; }
  .hm-att-acts { width: 100%; padding-left: 42px; }
  .hm-wk-row { gap: 3px; }
  .hm-wk-c { font-size: 10px; }
  .hm-wk-k { gap: 3px; font-size: 11px; }   /* 一格只有 40 来像素宽 */
  .hm-wk-k i { width: 5px; height: 5px; }
}

/* 首页区块底色只在 hm-page 内生效；输入条仍用白底 */
.hm-page .hm-left { background: var(--home-step-bg); border-color: var(--home-step-line); }
.hm-page .hm-left-ic { background: var(--panel); }
.hm-page .hm-wk { background: var(--home-week-bg); border-color: var(--home-week-line); }
.hm-page button.hm-wk-d { background: var(--panel); border-color: var(--home-week-day-line); }
.hm-page button.hm-wk-d:hover { border-color: var(--home-week-line); }