/* ============================================================================
 * parent.css —— 家长看板与家长口令页
 *
 * 依据：docs/页面结构.md §10（看板）与 §1.4（角落入口 → 独立口令页）
 * 组件：C14 统计小图（横向条形图）、C9 进度条、C16 空状态
 *
 * ⛔ 只有一套，不随孩子年级切字号（家长端写 `data-grade="parent"`：值与 middle 逐令牌相同，
 *    见 tokens.css 的「家长档 parent」块 —— 它是**常驻档名**，不是随孩子切换的学段档）
 * ⛔ 不排行、不对比两个孩子、不显示作答时间与设备
 * ⛔ 只引用 tokens.css 的变量
 * ========================================================================== */

/* ---------------------------------------------------------------- 家长口令页 */
.parent-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.parent-back {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + var(--safe-bottom));
  color: var(--color-text-hint);
}

/* ---------------------------------------------------------------- 看板 */
.parent-page {
  background: var(--color-bg);
}

.parent-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

.parent-title {
  color: var(--color-text-title);
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

/* 孩子切换器：两个头像并排，当前选中的加主色描边；**只显示代号** */
.kid-switch {
  display: flex;
  gap: var(--space-xs);
}

.kid-switch__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: var(--touch-min);
  padding: var(--space-2xs);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.kid-switch__item.is-current {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-soft);
}

.kid-switch__avatar {
  font-size: 22px;
  line-height: 1;
}

.kid-switch__name {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: 1;
}

.kid-switch__item.is-current .kid-switch__name {
  color: var(--color-primary-ink);
  font-weight: var(--weight-medium);
}

/* 切换中：顶部细进度条 + 卡片整体置灰（**明确"正在换人"**，防止误读数据） */
.switch-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.switch-bar__fill {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--color-primary);
  animation: switch-slide 900ms ease-in-out infinite;
}

@keyframes switch-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.parent-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
  transition: opacity 140ms ease-out;
}

.parent-body.is-switching {
  opacity: 0.45;
  pointer-events: none;
}

.range-chips {
  display: flex;
  gap: var(--space-xs);
}

/* ---------------------------------------------------------------- 四个指标卡（2×2） */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* 「待复习」是唯一"可行动"的指标：主色浅底突出（⛔ 不做红黄绿灯评价） */
.metric-card.is-action {
  background: var(--color-primary-soft);
}

.metric-card__label {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  line-height: var(--leading-tight);
}

.metric-card__value {
  color: var(--color-text-title);
  font-family: var(--font-mono);
  font-size: var(--text-score);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.metric-card.is-action .metric-card__value {
  color: var(--color-primary-ink);
}

.metric-card__sub {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: var(--leading-tight);
}

/* ---------------------------------------------------------------- 区块卡片 */
.parent-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.parent-card__title {
  color: var(--color-text-title);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.parent-hint {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

.parent-foot {
  text-align: center;
}

/* ---------------------------------------------------------------- 薄弱知识点（C14 横向条形图）
   条高 32px（这里是"错误次数条"，与知识点行等高），**每条都带数值标签** */
.weak-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.weak-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.weak-row__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.weak-row__name {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.weak-row__value {
  flex: 0 0 auto;
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: var(--leading-tight);
}

.weak-row__bar {
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.weak-row__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

.weak-row__action {
  display: flex;
  justify-content: flex-end;
}

/* K8.2「印一份重练卷」：它是个**链接**（新窗口打开），长得像按钮但语义是导航 ——
   所以不下 `button` 标签（键盘/读屏会把它当"提交表单"读）。 */
.remedy-link {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* 拿不到 kp_id 时的兜底话（不给空按钮，只给一句人话） */
.weak-row__todo {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  align-self: center;
}

.weak-row__teaching {
  padding: 2px 0 4px;
}

.weak-row__tip {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

/* ---------------------------------------------------------------- 最近错因分布（C15） */
.cause-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cause-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.cause-row__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.cause-row__name {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--leading-tight);
}

.cause-row__value {
  flex: 0 0 auto;
  color: var(--color-text-sub);
  font-size: var(--text-caption);
}

.cause-row__bar {
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.cause-row__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

/* ---------------------------------------------------------------- 趋势 */
.trend {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trend-svg {
  width: 100%;
  height: 96px;
}

.trend-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.trend-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-dot {
  fill: var(--color-primary);
}

.trend-labels {
  display: flex;
  gap: var(--space-2xs);
}

.trend-label {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.trend-label__date {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  line-height: 1;
}

.trend-label__value {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 留空的那天：不给它画数（⛔ 不能画成 0%） */
.trend-label.is-blank .trend-label__value {
  color: var(--color-text-hint);
}

/* ---------------------------------------------------------------- 列表与空状态 */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.recent-line {
  color: var(--color-text);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

/* 一行记录 + 右侧动作（如"打印这份卷子"） */
.recent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 0.5pt solid var(--color-border);
}

.recent-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.recent-row__action {
  flex: 0 0 auto;
  font-size: var(--text-caption);
  text-decoration: none;
}

.parent-empty {
  padding: var(--space-md) 0;
  text-align: center;
}

.parent-empty__text {
  color: var(--color-text-hint);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.skeleton-row {
  height: 44px;
}

/* ---------------------------------------------------------------- 退步卡（P0-8）
   这块是"家长 30 秒看懂"的第一屏：只说这一块自己的**前后变化**，
   ⛔ 不排名、不跟兄弟姐妹比、不用红色警报（孩子退步是常事，不是事故）。
   用「待复习」那支暖色就够了 —— 是要"留意一下"，不是"出事了"。 */
.regress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.regress-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-pending-soft);
}

.regress-row__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.regress-row__name {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.regress-row__delta {
  flex: 0 0 auto;
  color: var(--color-pending);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.regress-row__change {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

.regress-row__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.regress-row__step {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

/* 退步行末尾的动作（K8.2）：单独留一点上边距，免得和后一句"下一步"贴成一段 */
.regress-row__step--action {
  margin-top: 4px;
}

/* 表头那句人话按结论分色：有退步 = 暖色提醒；比过了都稳 = 绿色说一句"保持住" */
.parent-hint.is-attention {
  color: var(--color-pending);
}

.parent-hint.is-good {
  color: var(--color-review-mastered);
}

/* ---------------------------------------------------------------- 加一个孩子（A37）
   计划书 Ch02「动态档案墙 / 不限孩子数」。
   · 可折叠：收起时只占一行（看板的第一屏留给数据）
   · 年级/头像都是**按钮网格**：手机上不用展开下拉框，一次点中
   · 选中态用 `[aria-pressed="true"]` 表达（与看板上「本周/本月/全部」的 chip 同一套写法），
     ⛔ 不用 role="radio" —— 那套语义预期方向键能移动，我们没实现，别假装有 */
.add-child {
  gap: var(--space-2xs);
}

.add-child__summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  color: var(--color-text-title);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  cursor: pointer;
}

/* summary 一旦 display:flex，浏览器自带的三角就没了 —— 自己补一个"点得开"的记号
   （没有这个记号，收起时它看起来就是一行普通标题，家长不会去点它） */
.add-child__summary::after {
  content: '›';
  margin-left: auto;
  color: var(--color-text-hint);
  font-size: var(--text-body);
  transition: transform 140ms ease-out;
}

.add-child[open] .add-child__summary::after {
  transform: rotate(90deg);
}

.add-child__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.add-child__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.add-child__label {
  color: var(--color-text-sub);
  font-size: var(--text-caption);
  line-height: var(--leading-tight);
}

.add-child__input {
  min-height: var(--touch-min);
  padding: 0 var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-input);
  font-family: var(--font-sans);
}

.add-child__input:focus,
.add-child__input:focus-visible {
  border-color: var(--color-focus);
  outline: none;
}

.add-child__grades,
.add-child__avatars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.add-child__grade {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-caption);
  font-family: var(--font-sans);
}

.add-child__grade[aria-pressed="true"] {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.add-child__grade-label {
  font-size: var(--text-caption);
  line-height: 1;
}

/* 「有教材 / 暂无教材」这枚小签：**说事实，不是拦人**
   （没有教材的年级照样能选、能建，只是先告诉家长孩子进去会看到空页） */
.add-child__grade-tag {
  color: var(--color-review-mastered);
  font-size: var(--text-caption);
  line-height: 1;
}

.add-child__grade-tag.is-blank {
  color: var(--color-text-hint);
}

.add-child__avatar {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.add-child__avatar[aria-pressed="true"] {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-soft);
}

.add-child__avatar-glyph {
  font-size: 22px;
  line-height: 1;
}