/* ==========================================================================
   course.css — 课程自学 / 时间块样式（v2 增量）
   沿用 style.css 的薄荷绿 token，只补课程进度、周预算、单双周时间表的布局。
   所有颜色只用 var(--*)，深浅主题自动适配。触控目标 ≥ 44×44。
   ========================================================================== */

/* ---------------- 周预算卡 ---------------- */
.week-budget-card {
  display: block;
  margin-bottom: 14px;
}
.week-budget-card .hero-num {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-top: 2px;
}
.week-budget-card .hero-num small {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-2);
  margin-left: 6px;
}

/* ---------------- Mode 二选一（课程表单） ---------------- */
.seg .seg-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.3;
}
.seg button {
  min-height: 44px;
}
.seg-col button {
  text-align: left;
  padding: 10px 12px;
  line-height: 1.3;
}

/* ---------------- 课程卡 ---------------- */
.course-card {
  margin-bottom: 10px;
}
.course-card .r1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.course-card .r2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* 进度条 */
.prog-bars {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.prog-row {
  display: grid;
  grid-template-columns: 56px 1fr 44px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.prog-row .pl { color: var(--text-2); }
.prog-row .pn { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.prog-row .bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.prog-row .bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--green);
  transition: width var(--ease) .3s;
}
.prog-row.total {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-weight: 650;
  color: var(--text);
}
.prog-row.total .bar { background: var(--surface-3); }
.prog-row.total .bar i { background: var(--green-dark); }
.prog-row.total .pn { color: var(--text); }

/* ---------------- 行内编辑行（课程详情 sheet） ---------------- */
.inline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.inline-row:last-child { border-bottom: 0; }
.inline-row .input,
.inline-row .select {
  min-height: 40px;
}

/* ---------------- 时间表面板 ---------------- */
.kind-legend {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  min-height: 32px;
}
.legend-desc { flex: 1; }

.week-nav-card {
  margin-bottom: 12px;
}

.day-block {
  margin-bottom: 8px;
}
.day-block.today {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green-light);
}
.day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.day-name {
  font-weight: 650;
  font-size: 14px;
  color: var(--text);
}
.day-date {
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.block-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  min-height: 48px;
}
.block-time {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 96px;
  font-variant-numeric: tabular-nums;
}
.block-body { flex: 1; min-width: 0; }
.block-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

/* 不同类型块的左侧色调（用现有 tag 语义色做浅底） */
.block-row.tone-danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.block-row.tone-info { background: color-mix(in srgb, var(--info) 8%, var(--surface-2)); }
.block-row.tone-violet { background: color-mix(in srgb, var(--violet) 8%, var(--surface-2)); }
.block-row.tone-plain { background: var(--surface-2); }

/* 深色主题下 color-mix 仍能工作（基于变量本身的色值） */
@media (prefers-color-scheme: dark) {
  .block-row.tone-danger { background: color-mix(in srgb, var(--danger) 18%, var(--surface-2)); }
  .block-row.tone-info { background: color-mix(in srgb, var(--info) 18%, var(--surface-2)); }
  .block-row.tone-violet { background: color-mix(in srgb, var(--violet) 18%, var(--surface-2)); }
}

/* 触控目标：图标按钮在块行里也要够大 */
.block-row .icon-btn {
  min-width: 44px;
  min-height: 44px;
}