/* 今天的账本 —— 首屏
   目标：一屏只回答一个问题「今天从你这里拿走了多少时间」。
   其余信息（构成、趋势、器官）一律降到次级位置。 */

.today{
  max-width:720px;
  margin:0 auto;
  padding:42px 0 80px;
  display:flex;
  flex-direction:column;
  gap:30px;
}

/* ---------- 入场：从下往上、从浅到深 ----------
   只动 transform 与 opacity，避免触发布局重算。
   节奏是「先出现骨架，再出现细节」，所以区块用 40–380ms 递进，
   区块内部的按钮再往后接一段，总时长控制在 1 秒内。 */
@keyframes rise-in{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}
@keyframes fade-only{
  from{opacity:0}
  to{opacity:1}
}

.today > *{
  animation:rise-in var(--dur-enter) var(--ease-out-expo) both;
}
.today > :nth-child(1){animation-delay:40ms}
.today > :nth-child(2){animation-delay:130ms}
.today > :nth-child(3){animation-delay:210ms}
.today > :nth-child(4){animation-delay:270ms}
.today > :nth-child(5){animation-delay:320ms}
.today > :nth-child(6){animation-delay:360ms}

/* 主数字单独走一条更慢的曲线：它是这一屏唯一的焦点，
   晚到一点、幅度大一点，视线自然会先落在它上面。 */
.hero-number{
  animation:figure-in 820ms var(--ease-out-expo) 120ms both;
}
@keyframes figure-in{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}

/* ---------- 焦点一：今天的时间 ---------- */
/* 两栏：左边是数字和人话，右边是这些时间落在了哪里。
   人体不占额外高度，它和数字并排，避免首屏被撑长。 */
.today-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 156px;
  align-items:center;
  gap:10px;
  text-align:center;
  padding-bottom:8px;
}
.hero-main{min-width:0}
/* eyebrow 是 flex 容器，text-align:center 对它不起作用，
   不单独指定的话它会贴着左栏边缘，和下面的居中文字脱节。 */
.hero-main .eyebrow{justify-content:center}

.hero-body{
  position:relative;
  justify-self:end;
  align-self:center;
  width:156px;
  animation:fade-only 900ms var(--ease-out-expo) 260ms both;
}
.body-figure{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
/* 只留描边，不填充。肉色渐变是廉价感的来源，也是「半写实」最难看的那一段。
 *
 * 透明度从 .30 提到 .60、线宽从 1.15 提到 1.5：人体只有 156px 宽、画布 400，
 * 缩放 0.39，原来的线实际画出来只有 0.45 像素、三成不透明度，等于没画。
 * 结果是右边那 7 个器官光点在亮，却看不出它们挂在谁身上。 */
.body-outline path{
  fill:none;
  stroke:rgba(180,186,161,.60);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round;
}

/* 器官点默认只是一粒几乎看不见的灰点：身体在那里，但今天还没事发生。
   被记录点亮之后才变成铜色。这是二值状态，深浅不随剂量变化——
   因为剂量到器官损伤的换算并不存在，做出来就是编的。 */
.organ-dot .dot-core{
  fill:#3a494e;
  transform-box:fill-box;
  transform-origin:center;
  transition:fill .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
}
.organ-dot .dot-ring{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.organ-dot.is-hit{color:var(--copper)}
.organ-dot.is-gain{color:var(--mint)}
.organ-dot.is-hit .dot-core,
.organ-dot.is-gain .dot-core{transform:scale(1.22)}
.organ-dot.is-hit .dot-core{fill:var(--copper)}
.organ-dot.is-gain .dot-core{fill:var(--mint)}
.organ-dot.is-flashing .dot-ring{
  animation:dot-pulse 1.4s var(--ease-out-expo) both;
}
@keyframes dot-pulse{
  0%{opacity:.85;transform:scale(1)}
  70%{opacity:.2}
  100%{opacity:0;transform:scale(3.4)}
}

/* 飞行粒子：从刚点的按钮出发，抛一条弧线落到器官上。
   到达那一刻器官才亮，因果顺序不能反——反了就只是特效。 */
.ledger-particle{
  position:fixed;
  left:0;top:0;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 10px rgba(230,164,140,.8);
  pointer-events:none;
  z-index:90;
  will-change:transform,opacity;
}
.ledger-particle.is-gain{
  background:var(--mint);
  box-shadow:0 0 10px rgba(156,222,201,.75);
}

/* 文字版的落点：圆点本身不说明是哪个器官，这行补上名字。
   移动端人体不显示时，它就是唯一的信息来源，所以不能省。 */
.hero-organs{
  margin-top:9px;
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--faint);
}
.hero-organs b{
  font-weight:400;
  color:var(--muted);
}

.hero-label{
  margin-top:18px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.06em;
}
.hero-figure{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin:14px 0 4px;
}
.hero-number{
  font-size:clamp(64px,11vw,104px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--copper);
  font-variant-numeric:tabular-nums;
  transition:color .45s ease;
}
.hero-number.is-empty{
  color:var(--faint);
  font-size:30px;
  font-weight:400;
  letter-spacing:.04em;
  align-self:center;
}
.hero-number.is-credit{color:var(--mint)}
.hero-unit{
  font-size:14px;
  color:var(--faint);
  letter-spacing:.14em;
}
.hero-anchor{
  min-height:22px;
  font-size:15px;
  color:var(--muted);
  letter-spacing:.02em;
}
/* 类比是这一屏的第二层次：数字给量，它给画面。
   所以它要比正文更亮、更大一点，否则整块只剩一个孤零零的数。 */
.hero-anchor em{
  font-style:normal;
  color:var(--text);
  font-size:17px;
  letter-spacing:.01em;
  margin:0 2px;
}
.hero-compare{
  min-height:22px;
  margin-top:14px;
  font-size:12.5px;
  color:var(--faint);
}
.hero-compare .up{color:var(--mint)}
.hero-compare .down{color:var(--copper)}

/* ---------- 焦点二：记一笔 ---------- */
/* 分隔线两端淡出，比一条通栏实线更少「表格感」 */
.today-entry{
  position:relative;
  padding-top:22px;
}
.today-entry::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,53,56,.95) 14%,rgba(38,53,56,.95) 72%,transparent);
}
.entry-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  margin-bottom:14px;
}
.entry-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.entry-chip{
  position:relative;
  border:1px solid #2b3d40;
  background:transparent;
  color:var(--muted);
  font-size:12.5px;
  padding:7px 13px;
  border-radius:999px;
  transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,background var(--dur-fast) ease;
  animation:rise-in 520ms var(--ease-out-expo) both;
  animation-delay:calc(180ms + var(--i,0) * 34ms);
}
.entry-chip:hover{color:var(--text);border-color:#3d5457;filter:none}
/* 选中态用一条从中间向两侧展开的底线，而不是整体变色——
   动效本身在说明「这一项被展开了」，比换颜色更省动作也更准确。 */
.entry-chip::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:-1px;
  height:1px;
  background:var(--mint);
  transition:left 300ms var(--ease-out-quart),right 300ms var(--ease-out-quart);
}
.entry-chip.is-picked{
  color:var(--mint);
  border-color:rgba(156,222,201,.5);
  background:rgba(156,222,201,.07);
}
.entry-chip.is-picked::after{left:13px;right:13px}
.entry-qty{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:15px;
  min-height:36px;
}
.qty-hint{
  font-size:11px;
  color:var(--faint);
  margin-left:4px;
  letter-spacing:.03em;
}
.qty-btn{
  border:1px solid #2b3d40;
  background:#111e21;
  color:var(--text);
  font-size:12.5px;
  padding:7px 12px;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out-quart);
  animation:rise-in 460ms var(--ease-out-expo) both;
  animation-delay:calc(60ms + var(--i,0) * 40ms);
}
.qty-btn:hover{
  border-color:var(--mint);
  color:var(--mint);
  background:rgba(156,222,201,.05);
  filter:none;
}
.qty-btn:active{transform:scale(.96)}
.qty-cancel{
  border:0;
  background:none;
  color:var(--faint);
  font-size:11.5px;
  padding:7px 4px;
}
.qty-cancel:hover{color:var(--text);filter:none}

/* ---------- 焦点三：今天记了什么 ---------- */
.today-log{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.log-head{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  margin-bottom:12px;
}
.log-line{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:13px 2px;
  border-bottom:1px solid rgba(38,53,56,.55);
  font-size:13.5px;
}
.log-line .who{flex:1;color:var(--text)}
.log-line .who b{font-weight:500;color:var(--text)}
.log-line .who span{color:var(--faint);margin-left:8px;font-size:12px}
.log-value{
  font-variant-numeric:tabular-nums;
  color:var(--copper);
  font-size:13.5px;
}
.log-value.qualitative{
  color:var(--faint);
  font-size:11.5px;
  letter-spacing:.04em;
}
.log-value.has-range{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  cursor:help;
}
.log-value.has-range em{
  font-style:normal;
  font-size:11.5px;
  color:var(--faint);
}
.log-value.has-range small{
  color:#6b7f80;
  font-size:10.5px;
  letter-spacing:.02em;
}
.log-del{
  border:0;background:none;color:#4c6062;
  font-size:15px;line-height:1;padding:2px 4px;
  border-radius:6px;
}
.log-del:hover{color:var(--copper);filter:none}
.log-empty{
  padding:26px 2px;
  font-size:13px;
  color:var(--faint);
  line-height:1.9;
}
.log-empty b{color:var(--muted);font-weight:500}

/* ---------- 次级：近 7 天 ---------- */
.today-trend{position:relative;padding-top:22px}
.today-trend::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,53,56,.95) 14%,rgba(38,53,56,.95) 72%,transparent);
}
.trend-head{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--muted);letter-spacing:.08em;
  margin-bottom:18px;
}
.trend-bars{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:66px;
}
.trend-days{
  display:flex;
  gap:10px;
  margin-top:9px;
}
.trend-col{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  height:100%;
  min-width:0;
}
.trend-days .trend-col{height:auto}
.trend-bar{
  width:100%;
  max-width:34px;
  flex:0 0 auto;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgba(230,164,140,.85),rgba(230,164,140,.25));
  transition:height .5s cubic-bezier(.2,.7,.3,1);
}
.trend-col.is-today .trend-bar{
  background:linear-gradient(180deg,var(--copper),rgba(230,164,140,.4));
}
.trend-col.is-zero .trend-bar{
  background:#243337;
  height:2px !important;
}
.trend-day{
  font-size:10px;
  color:var(--faint);
  letter-spacing:.06em;
  white-space:nowrap;
}
.trend-col.is-today .trend-day{color:var(--text)}

/* ---------- 页脚说明 + 出口 ---------- */
.today-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.today-note{
  font-size:11px;
  color:var(--faint);
  line-height:1.85;
  max-width:420px;
}
.today-exit{
  flex-shrink:0;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid #2b3d40;
  padding-bottom:2px;
  white-space:nowrap;
}
.today-exit:hover{color:var(--mint);border-color:var(--mint)}

/* ---------- 存储失败提示 ---------- */
.storage-warn{
  border:1px solid rgba(230,164,140,.35);
  background:rgba(230,164,140,.07);
  border-radius:10px;
  padding:12px 14px;
  font-size:12px;
  color:var(--copper);
  line-height:1.7;
}

@media(max-width:650px){
  .today{padding:34px 0 70px;gap:34px}
  /* 窄屏不显示人体：142px 宽的人体在这个尺寸下器官点会挤成一片，
     与其缩到看不清，不如只留文字版的落点（#today-organs）。 */
  .today-hero{grid-template-columns:1fr}
  .hero-body{display:none}
  .hero-label{font-size:12px}
  .hero-anchor{font-size:13.5px}
  .entry-name{flex-basis:74px;font-size:13px}
  .qty-btn{font-size:12px;padding:7px 10px}
  .today-footer{flex-direction:column;gap:14px}
  .trend-bars{height:62px;gap:7px}
}

@media(prefers-reduced-motion:reduce){
  .hero-number,.trend-bar{transition:none}
  .organ-dot .dot-core{transition:none}
  .organ-dot.is-flashing .dot-ring{animation:none}
  .hero-body{animation:none}
  /* 系统要求减少动态时，入场退化为纯淡入：不位移、不分批延迟，
     内容一次性出现，避免「等它一个个冒出来」的焦虑感。 */
  .today > *,
  .hero-number,
  .entry-chip,
  .qty-btn{
    animation:fade-only 180ms linear both !important;
    animation-delay:0ms !important;
  }
}

/* ---------- 解读区 ---------- */
.today-ai{
  position:relative;
  padding-top:22px;
}
.today-ai::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,53,56,.95) 14%,rgba(38,53,56,.95) 72%,transparent);
}
.ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.ai-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--faint);
  border:1px solid rgba(38,53,56,.95);
  border-radius:999px;
  padding:3px 9px;
  line-height:1.2;
  transition:color .3s ease,border-color .3s ease;
}
.ai-tag::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.7;
}
.ai-tag[data-source="model"]{
  color:var(--mint);
  border-color:rgba(156,222,201,.4);
}
.ai-tag[data-source="busy"]{
  color:var(--copper);
  border-color:rgba(230,164,140,.35);
}
.ai-tag[data-source="busy"]::before{
  animation:ai-blink 1.1s ease-in-out infinite;
}
.ai-retry{
  border:0;
  background:none;
  padding:4px 2px;
  font-size:11.5px;
  color:var(--faint);
  letter-spacing:.02em;
  transition:color .2s ease;
}
.ai-retry:hover{color:var(--text);filter:none}
.ai-lead{
  margin:0 0 9px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--text);
  letter-spacing:.01em;
  min-height:1px;
}
.ai-body{
  margin:0;
  font-size:13.5px;
  line-height:1.9;
  color:var(--muted);
  max-width:44em;
  min-height:1.9em;
}
.ai-body.is-live::after{
  content:"";
  display:inline-block;
  width:2px;
  height:13px;
  margin-left:3px;
  background:var(--mint);
  vertical-align:-2px;
  animation:ai-caret 1s steps(1) infinite;
}
.ai-note{
  margin:10px 0 0;
  font-size:11.5px;
  line-height:1.7;
  color:var(--faint);
}
@keyframes ai-blink{
  0%,100%{opacity:.25}
  50%{opacity:1}
}
@keyframes ai-caret{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ai-tag[data-source="busy"]::before,
  .ai-body.is-live::after{animation:none}
}
.ai-hint{
  margin:13px 0 0;
  padding-left:11px;
  border-left:2px solid rgba(156,222,201,.45);
  font-size:12.5px;
  line-height:1.8;
  color:var(--text);
  max-width:42em;
}