/* ============================================================
   KidDaily 首页 index.html — 基础 + 顶栏 + 宝贝档案 + 成长曲线 + 荣誉墙
   由原型机械抽取，裸 hex 全部收编为 var() Token（tokens.css / 本文件别名）
   ============================================================ */

/* 页面级别名补充：tokens.css 未收编的 4 个 hover 变体（DESIGN §9 机制） */
:root{
  --thumb-hover:#C6BAA9;
  --done-hover:#35AD71;
  --pending-hover:#F0B840;
  --day-hover:#F5F1EA;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--stage-bg);
  font-family:var(--font-cn);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input,textarea{font-family:inherit;}

/* ---------- 舞台与缩放 ---------- */
.stage{position:fixed;inset:0;overflow:hidden;}

.page{
  position:absolute;top:0;left:0;
  width:1920px;height:1080px;
  transform-origin:top left;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:24px;padding:30px;
  overflow:hidden;
}
/* 首页含 kidwiki 页脚横条（64px+24 间距），舞台加高保持六卡零回归 */
.page[data-stage-h="1108"]{height:1108px;}

/* ---------- 顶部栏 ----------
   position + z-index：卡片带入场动画会各自生成层叠上下文，
   若不抬升顶栏层级，右上下拉菜单会被卡片覆盖（异常修复） */
.topbar{
  position:relative;z-index:15;
  width:1860px;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  width:42px;height:42px;border-radius:var(--radius-logo);background:var(--coral);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;gap:3px;}
.brand-title{font-size:21px;line-height:27px;font-weight:700;color:var(--ink);}
.brand-sub{font-size:12.5px;line-height:17px;font-weight:400;color:var(--muted);}

.user-area{display:flex;align-items:center;gap:12px;}
.status-pill{
  min-width:156px;height:38px;border-radius:var(--radius-pill);
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--status-dot);flex:0 0 auto;}
.status-text{font-size:13px;font-weight:500;color:var(--ink-3);white-space:nowrap;}
.avatar{
  width:42px;height:42px;border-radius:21px;overflow:hidden;
  flex:0 0 auto;background:var(--avatar-bg);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- 卡片网格 ---------- */
.grid{width:1860px;display:flex;flex-direction:column;gap:24px;flex:0 0 auto;}
.row{display:flex;gap:24px;height:459px;}

.card{
  width:604px;height:459px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:27px;                /* 27 + 1px 描边 = 设计稿 28px 内边距 */
  overflow:hidden;
  display:flex;
}
.card--profile{flex-direction:row;gap:24px;}
.card--growth{flex-direction:column;gap:18px;}
.card--honor{flex-direction:column;gap:14px;}
.card--points{flex-direction:row;gap:20px;}
.card--calendar{flex-direction:column;gap:10px;}
.card--wish{flex-direction:column;gap:12px;}

/* ---------- 卡片 1 · 宝贝档案 ---------- */
.portrait-wrap{
  position:relative;width:227px;height:403px;flex:0 0 auto;
}
.portrait{
  width:100%;height:100%;border-radius:20px;
  overflow:hidden;background:var(--tile-age);
  display:flex;align-items:center;justify-content:center;
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait .portrait-initial{font-size:64px;font-weight:700;color:var(--coral-deep);}

/* 更换宝贝照片（管理员，悬浮于档案照底部，hover / 键盘聚焦时浮现） */
.portrait-edit{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  height:30px;padding:0 12px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;gap:6px;
  background:var(--overlay-dark);color:#fff;
  font-size:11.5px;font-weight:500;line-height:16px;white-space:nowrap;
  opacity:0;transition:opacity .18s ease,background-color .18s ease;
}
.portrait-wrap:hover .portrait-edit,
.portrait-edit:focus-visible{opacity:1;}
.portrait-edit:hover{background:var(--overlay-darker);}
.portrait-edit svg{flex:0 0 auto;}

.profile-info{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:20px;
}
.profile-top{display:flex;align-items:center;justify-content:space-between;height:36px;}
.eyebrow{
  font-size:12px;font-weight:500;color:var(--label);
  letter-spacing:2px;line-height:17px;
}
.name-row{display:flex;align-items:center;gap:10px;height:46px;}
.child-name{font-size:32px;font-weight:700;color:var(--ink);line-height:46px;}
.class-tag{
  height:26px;border-radius:var(--radius-pill);background:var(--coral-soft);
  padding:0 12px;display:flex;align-items:center;
}
.class-tag span{font-size:12px;font-weight:500;color:var(--coral-deep);line-height:16px;}

.tiles{
  width:297px;
  display:flex;flex-wrap:wrap;gap:12px;
  align-content:flex-start;
}
.tile{
  width:142px;height:140px;border-radius:16px;
  padding:18px 12px;display:flex;flex-direction:column;
  gap:8px;justify-content:center;
}
.tile--age{background:var(--tile-age);}
.tile--height{background:var(--tile-height);}
.tile--weight{background:var(--tile-weight);}
.tile--eye{background:var(--tile-eye);}
.tile-label{display:flex;align-items:center;gap:6px;}
.tile-label i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto;}
.tile-label span{font-size:12px;font-weight:500;color:var(--muted);line-height:17px;}
.tile-value{font-size:16px;font-weight:600;color:var(--ink);line-height:24px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}

/* ---------- 通用卡片头 ---------- */
.card-head{
  width:100%;height:40px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.head-title{display:flex;flex-direction:column;gap:3px;}
.head-title h2{font-size:16px;font-weight:700;color:var(--ink);line-height:22px;}
.head-title p{font-size:12px;font-weight:400;color:var(--muted);line-height:17px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);transition:transform .16s ease,box-shadow .16s ease,
    background-color .16s ease,border-color .16s ease,color .16s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px) scale(.985);}
.btn:focus-visible{box-shadow:var(--focus-ring);outline:none;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:hover{background:var(--coral-hover);box-shadow:var(--shadow-btn-hover);}
.btn-primary:active{background:var(--coral-active);}
.btn-ghost{
  background:var(--card);color:var(--ink-3);
  border:1px solid var(--line-soft);
}
.btn-ghost:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}

.btn-add{height:36px;padding:0 16px;gap:6px;}
.btn-add span{font-size:13px;font-weight:500;line-height:18px;}

/* ---------- 卡片 2 · 成长曲线 ---------- */
.growth-body{
  flex:1 1 auto;min-height:0;
  display:flex;gap:16px;
}
.chart-box{
  width:436px;height:345px;flex:0 0 auto;position:relative;
}
.chart-box svg,.points-chart svg{display:block;width:100%;height:100%;}

.chart-tip{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--toast-bg);color:#fff;border-radius:10px;
  padding:7px 11px;font-size:12px;line-height:17px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-100%);
  transition:opacity var(--motion-fast) var(--ease-standard);
}
.chart-tip.is-show{opacity:1;}
.chart-tip b{font-family:var(--font-num);font-weight:600;}
.chart-tip i{display:block;font-style:normal;color:var(--faded);font-size:11px;}

.filters{
  width:96px;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.chip{
  width:96px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;gap:7px;
  padding:0 11px;                 /* 11 + 1px 描边 = 设计稿 12px */
  border:1px solid transparent;
  background:var(--field);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.chip i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto;}
.chip span{font-size:12.5px;font-weight:400;color:var(--muted-2);line-height:18px;white-space:nowrap;}
.chip:hover{background:var(--chip-hover);}
.chip.is-active{background:var(--tile-height);border-color:var(--chip-active-border);}
.chip.is-active span{font-weight:600;color:var(--ink);}
.chip.is-active:hover{background:var(--tile-height);}

/* 曲线筛选：未选中的序列淡出 */
.series{transition:opacity .3s ease;}
.series.is-hidden{opacity:0;pointer-events:none;}

/* ---------- 卡片 3 · 荣誉墙 ---------- */
.honor-scroll{position:relative;width:100%;height:349px;flex:0 0 auto;}
.honor-list{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.honor-list::-webkit-scrollbar{display:none;}
.honor-timeline{width:528px;display:flex;flex-direction:column;}

.rec{
  position:relative;width:100%;min-height:92px;
  padding:6px 0 0 30px;
  display:flex;flex-direction:column;gap:6px;
}
.rec::before{
  content:'';position:absolute;left:9px;top:18px;
  width:2px;height:92px;background:var(--line);
}
.rec::after{
  content:'';position:absolute;left:3px;top:12px;
  width:14px;height:14px;border-radius:50%;background:var(--dot-soft);
}
.rec:first-child::after{background:var(--coral);}
.rec:last-child::before{height:60px;}

.rec-meta{display:flex;align-items:center;gap:8px;height:24px;flex:0 0 auto;}
.rec-date{font-size:11.5px;font-weight:500;color:var(--label);line-height:17px;
  font-variant-numeric:tabular-nums;}
.rec-badge{
  height:22px;border-radius:var(--radius-pill);background:var(--coral-soft);
  padding:0 10px;display:flex;align-items:center;flex:0 0 auto;
}
.rec-badge span{font-size:11px;font-weight:500;color:var(--coral-deep);line-height:15px;white-space:nowrap;}
.rec-name{
  font-size:14.5px;font-weight:600;color:var(--ink);line-height:20px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec-org{
  font-size:11.5px;font-weight:400;color:var(--muted);line-height:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.honor-track{
  position:absolute;right:0;top:0;width:6px;height:349px;
  border-radius:3px;background:var(--track);
}
.honor-thumb{
  position:absolute;right:0;top:0;width:6px;height:221px;
  border-radius:3px;background:var(--thumb);cursor:grab;
  transition:background-color .16s ease;
}
.honor-thumb:hover{background:var(--thumb-hover);}
.honor-thumb:active{cursor:grabbing;}