/* 学习计划模块样式 —— 周次横幅 / 17 周路线图 / 日期输入 */
/* 令牌全部来自 styles.css 的 :root，本文件不出现任何十六进制色值 */

/* ---------- 周次横幅 ---------- */
.week-banner { display: grid; gap: var(--space-2); }
.week-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fs-sm); line-height: 1.5;
}
.week-head > i, .week-head > svg { color: var(--color-primary); }
.week-goal { color: var(--color-text-muted); }

/* ---------- 学习计划路线图 ---------- */
.plan {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-surface);
}
.plan-month + .plan-month { border-top: 1px solid var(--color-border); }
.plan-month-head {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 52px; padding: var(--space-3) var(--space-4); text-align: left;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.plan-month-head:hover { background: var(--color-surface-2); }
.plan-month-name { flex: none; font-size: var(--fs-sm); font-weight: 600; }
.plan-month-focus { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.plan-caret { transition: transform var(--motion-fast) var(--motion-ease); }
[aria-expanded="true"] > .plan-caret { transform: rotate(180deg); }
.plan-weeks { background: var(--color-surface-2); border-top: 1px solid var(--color-border-soft); }
.plan-week {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 44px; padding: var(--space-2) var(--space-4); cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.plan-week + .plan-week, .plan-week-body + .plan-week { border-top: 1px solid var(--color-border-soft); }
.plan-week:hover { background: var(--color-surface); }
.plan-week.is-current { background: var(--color-primary-soft); }
.plan-week.is-future { color: var(--color-text-subtle); }
.plan-dot {
  flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-border);
}
.plan-week.is-past .plan-dot { background: var(--color-success); }
.plan-week.is-current .plan-dot { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.plan-w { flex: none; width: 26px; font-size: var(--fs-xs); font-weight: 600; }
.plan-week.is-current .plan-w { color: var(--color-primary); }
.plan-goal { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.plan-rate { flex: none; width: 36px; text-align: right; }
.plan-week-body {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-top: 1px solid var(--color-border-soft);
}
.plan-feynman {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.5;
}
.plan-cards { display: grid; gap: var(--space-1); }
.plan-card-row {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: 44px; padding: var(--space-2) var(--space-3); text-align: left;
  border-radius: var(--radius-sm); background: var(--color-surface-2);
  transition: background-color var(--motion-fast) var(--motion-ease);
}
button.plan-card-row:hover { background: var(--color-primary-soft); }
.plan-card-row.is-locked { color: var(--color-text-subtle); background: none; }

/* ---------- 日期输入 ---------- */
.date-input {
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-mono); font-size: var(--fs-sm);
}
.date-input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }