/* ============================================================
   Soft Physical UI — 按钮与图标组件规范
   规格来源：兔兔 2026-07-27 晚给的完整描述（她和 GPT 一起写的）
   落地形态说明：这个项目是单文件静态页，没有 React/构建系统，
   所以"可复用组件"在这儿 = 一份公共的 token + 组件样式表。
   别的页面 <link> 进来就能直接用 .su-* 这套类，不用各写各的。

   用法：
     <link rel="stylesheet" href="/css/soft-ui.css">
     <button class="su-btn su-btn--primary">记录今天</button>
     <button class="su-icon-btn"><svg class="su-icon">…</svg></button>
   所有数值都走下面的 token，组件里不写死任意值。
   ============================================================ */

:root {
  /* ---- 表面与文字 ----
     2026-07-27 深夜第二份规范（专门针对桌面页）细化过这批色值，
     跟同天早些时候第一份的数值差半个色阶——这里统一按第二份（更晚、更具体）来，
     第一份视为已被覆盖，不要再对旧值。 */
  --su-bg:            #F1ECEB;   /* 页面背景，温暖低饱和灰粉，不用纯白 */
  --su-bg-alt:        #F3EFEE;   /* 页面背景备用色 */
  --su-surface-1:     #FBF9F7;   /* 一级：主卡片、按钮、输入框、导航栏 */
  --su-surface-2:     #F6F1F0;   /* 二级：选项、标签、内嵌模块 */
  --su-surface-hover: #FFFDFC;   /* 悬停表面 */
  --su-text:          #2D292A;
  --su-text-2:        #777173;
  --su-text-3:        #9B9496;   /* 辅助文字 */
  --su-text-disabled: #B8B1B2;
  --su-divider:       #E5DEDD;

  /* ---- 图标 ---- */
  --su-icon:          #575153;   /* 默认单色图标 */
  --su-icon-2:        #7D7678;   /* 次要图标 */
  --su-icon-inactive: #5F595B;   /* 底部导航未选中 */
  --su-icon-stroke:   2;         /* 规范 1.8–2.2，图标不要显得细弱空洞，取上限 */

  /* ---- 低饱和强调色：只用于选中态、通知、小标签、图表、重要操作 ---- */
  --su-rose:      #D6A6B0;
  --su-lavender:  #B9B0C9;
  --su-fog:       #AFC1CC;
  --su-sage:      #B8C4BA;
  --su-sand:      #D8C6AA;
  --su-peach:     #DFC0B2;

  /* ---- 选中态 ---- */
  --su-selected-bg:   #F0DEE2;
  --su-selected-icon: #B87989;
  --su-selected-text: #393233;

  /* ---- 禁用态：靠降对比度，不是调透明度 ---- */
  --su-disabled-bg: #F0ECEB;
  --su-disabled-fg: #B4ADAE;

  /* ---- 聚焦环 ---- */
  --su-focus-ring:   2px solid rgba(183, 121, 137, .55);
  --su-focus-offset: 2px;

  /* ---- 阴影：柔和、扩散、带一道内高光，不用硬黑影 ---- */
  --su-shadow:
    0 16px 40px rgba(72, 57, 63, .08),
    0 3px 10px rgba(72, 57, 63, .035),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  --su-shadow-hover:
    0 18px 42px rgba(72, 57, 63, .10),
    0 5px 12px rgba(72, 57, 63, .05),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  --su-shadow-press:
    0 4px 12px rgba(72, 57, 63, .06),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  --su-shadow-selected:
    0 16px 38px rgba(72, 57, 63, .10),
    0 4px 10px rgba(72, 57, 63, .05),
    inset 0 1px 0 rgba(255, 255, 255, .76);
  /* 底部悬浮导航栏专用——她给的数值比普通卡片再重一档 */
  --su-shadow-nav:
    0 14px 38px rgba(72, 57, 63, .10),
    0 3px 10px rgba(72, 57, 63, .04),
    inset 0 1px 0 rgba(255, 255, 255, .76);

  /* ---- 尺寸 ----
     规范原文写的是圆形图标按钮 56、普通按钮 56–60。真机上下来偏大：兔兔 7/27 晚看着
     iPhone 说"那几个按钮把输入框都快挡住了，比下面导航点了之后还大"——底部导航选中的
     深色圆是 42px，头部/输入区那几个 56px 的圆比它还大一圈，不像一家人。
     所以按真机观感往下收了一档：圆形按钮 46（仍高于 44 的触控下限，跟导航的 42 是同一
     个量级），普通按钮 50。这是拿真机推翻规范纸面数值，不是没照做。 */
  --su-icon-btn:   46px;   /* 圆形图标按钮 */
  --su-btn-h:      50px;   /* 普通按钮高度 */
  --su-btn-pad-x:  24px;
  --su-btn-radius: 25px;   /* 保持完整胶囊 = 高度的一半 */
  --su-chip-h:     38px;   /* 小型标签按钮，规范 36–40 */
  --su-chip-radius:19px;   /* 规范 18–20 */
  --su-tap-min:    44px;   /* 触控区域下限，任何组件不得低于这个 */

  /* ---- 动效：快、自然、克制 ---- */
  --su-dur-hover:  200ms;  /* 规范 180–220 */
  --su-dur-press:  120ms;  /* 规范 100–140 */
  --su-dur-select: 230ms;  /* 规范 200–260 */
  --su-ease:       cubic-bezier(.22, .68, .32, 1);
}

/* ============================================================
   共用底座：所有 su 组件的材质、状态反馈都从这里继承
   ============================================================ */
.su-surface {
  background: var(--su-surface-1);
  color: var(--su-text);
  border: none;
  box-shadow: var(--su-shadow);
  transition:
    transform  var(--su-dur-hover) var(--su-ease),
    box-shadow var(--su-dur-hover) var(--su-ease),
    background var(--su-dur-hover) var(--su-ease),
    color      var(--su-dur-hover) var(--su-ease);
}

/* hover 只在真有指针的设备上生效——手机上 :hover 会黏在最后点过的元素上不松开 */
@media (hover: hover) and (pointer: fine) {
  .su-surface:hover:not(:disabled):not(.is-loading) {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--su-shadow-hover);
  }
}
.su-surface:active:not(:disabled):not(.is-loading) {
  transform: translateY(1px) scale(.98);
  box-shadow: var(--su-shadow-press);
  transition-duration: var(--su-dur-press);
}
.su-surface:focus-visible {
  outline: var(--su-focus-ring);
  outline-offset: var(--su-focus-offset);
}
.su-surface:disabled,
.su-surface.is-disabled {
  background: var(--su-disabled-bg);
  color: var(--su-disabled-fg);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.su-surface:disabled .su-icon,
.su-surface.is-disabled .su-icon { color: var(--su-disabled-fg); }

/* 选中态：浅色底 + 深色强调图标，轻微抬高，不用高饱和纯色，不发光 */
.su-surface.is-selected,
.su-surface[aria-selected="true"],
.su-surface[aria-pressed="true"] {
  background: var(--su-selected-bg);
  color: var(--su-selected-text);
  box-shadow: var(--su-shadow-selected);
  transform: translateY(-1px);
  transition-duration: var(--su-dur-select);
}
.su-surface.is-selected .su-icon,
.su-surface[aria-selected="true"] .su-icon,
.su-surface[aria-pressed="true"] .su-icon { color: var(--su-selected-icon); }

/* ============================================================
   图标：统一 outline、统一线宽、圆头圆角、单色
   ============================================================ */
.su-icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--su-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--su-icon);
  flex-shrink: 0;
  transition: color var(--su-dur-select) var(--su-ease);
}
.su-icon--secondary { color: var(--su-icon-2); }
.su-icon--inactive  { color: var(--su-icon-inactive); }
/* 选中时允许从描边换成填充，但尺寸不变 */
.su-icon--filled { fill: currentColor; stroke: none; }

/* 一组图标里禁止混线宽——真需要更细的场合显式声明，别就地改数值 */
.su-icon--hairline { stroke-width: 1.5; }

/* ============================================================
   Button：普通按钮
   ============================================================ */
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--su-btn-h);
  min-width: var(--su-tap-min);
  padding: 0 var(--su-btn-pad-x);
  border-radius: var(--su-btn-radius);
  font: 500 15.5px/1.2 inherit;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  /* 继承 .su-surface 的材质与状态 */
  background: var(--su-surface-1);
  color: var(--su-text);
  border: none;
  box-shadow: var(--su-shadow);
  transition:
    transform  var(--su-dur-hover) var(--su-ease),
    box-shadow var(--su-dur-hover) var(--su-ease),
    background var(--su-dur-hover) var(--su-ease),
    color      var(--su-dur-hover) var(--su-ease);
}
.su-btn--secondary { background: var(--su-surface-2); }
/* 主操作：强调色只给这一个，不大面积铺 */
.su-btn--primary {
  background: var(--su-rose);
  color: #fff;
  box-shadow:
    0 14px 34px rgba(183, 121, 137, .26),
    0 3px 9px rgba(183, 121, 137, .16),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}
.su-btn--primary .su-icon { color: #fff; }
.su-btn--quiet {
  background: transparent;
  box-shadow: none;
  color: var(--su-text-2);
}

/* ---- Loading：宽度不许变，避免布局跳动 ---- */
.su-btn.is-loading { cursor: progress; pointer-events: none; }
.su-btn.is-loading .su-btn__label { visibility: hidden; }
.su-btn.is-loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;   /* 单色小圈，不用彩虹渐变、不用发光环 */
  opacity: .75;
  animation: su-spin .7s linear infinite;
}
@keyframes su-spin { to { transform: rotate(360deg); } }

/* ============================================================
   IconButton / FloatingIconButton：圆形图标按钮
   ============================================================ */
.su-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--su-icon-btn); height: var(--su-icon-btn);
  border-radius: 50%;
  padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--su-surface-1);
  color: var(--su-icon);
  border: none;
  box-shadow: var(--su-shadow);
  transition:
    transform  var(--su-dur-hover) var(--su-ease),
    box-shadow var(--su-dur-hover) var(--su-ease),
    background var(--su-dur-hover) var(--su-ease),
    color      var(--su-dur-hover) var(--su-ease);
}
.su-icon-btn--bare { background: transparent; box-shadow: none; }
/* Floating：浮在内容之上的那种，阴影更明显一档 */
.su-icon-btn--floating { box-shadow: var(--su-shadow-hover); }
.su-icon-btn--accent {
  background: var(--su-rose); color: #fff;
  box-shadow:
    0 14px 34px rgba(183, 121, 137, .26),
    0 3px 9px rgba(183, 121, 137, .16),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}
.su-icon-btn--accent .su-icon { color: #fff; }

/* ============================================================
   Chip：小型标签按钮
   ============================================================ */
.su-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--su-chip-h);
  padding: 0 15px;
  border-radius: var(--su-chip-radius);
  font: 400 13.5px/1.2 inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--su-surface-1);
  color: var(--su-text);
  border: none;
  box-shadow:
    0 8px 20px rgba(76, 62, 67, .06),
    0 2px 5px rgba(76, 62, 67, .035),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  transition:
    transform  var(--su-dur-hover) var(--su-ease),
    box-shadow var(--su-dur-hover) var(--su-ease),
    background var(--su-dur-hover) var(--su-ease),
    color      var(--su-dur-hover) var(--su-ease);
}
/* chip 比触控下限矮，靠伪元素把可点区域撑到 44px，不改视觉高度 */
.su-chip::before {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: var(--su-tap-min); transform: translateY(-50%);
}
.su-chip { position: relative; }

/* ============================================================
   SegmentedControl
   ============================================================ */
.su-segmented {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  border-radius: calc(var(--su-btn-radius) + 4px);
  background: var(--su-surface-2);
  box-shadow: inset 0 1px 3px rgba(76, 62, 67, .05);
}
.su-segment {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--su-tap-min);
  padding: 0 18px;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--su-btn-radius);
  font: 400 14.5px/1.2 inherit;
  color: var(--su-text-2);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--su-dur-select) var(--su-ease),
    color      var(--su-dur-select) var(--su-ease),
    box-shadow var(--su-dur-select) var(--su-ease);
}
.su-segment.is-selected,
.su-segment[aria-selected="true"] {
  background: var(--su-surface-1);
  color: var(--su-selected-text);
  box-shadow: var(--su-shadow-press);
}

/* ============================================================
   BottomNavigation / NavigationItem
   未选中：透明底、灰 outline 图标、次要文字色、无独立阴影
   选中：柔和灰粉胶囊底 + 深强调图标（或换填充）+ 文字加深
   不只靠颜色区分——形状、填充、字重同时变
   ============================================================ */
.su-nav {
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--su-surface-1);
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 4px);
}
.su-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--su-tap-min);
  padding: 4px 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--su-text-2);
  font: 400 10.5px/1.4 inherit; letter-spacing: .05em;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--su-dur-select) var(--su-ease);
}
.su-nav-item .su-icon {
  width: 24px; height: 24px;
  padding: 8px; box-sizing: content-box;
  border-radius: 999px;                    /* 柔和胶囊，不给每项加独立边框 */
  color: var(--su-icon-inactive);
  background: transparent;
  transition:
    background var(--su-dur-select) var(--su-ease),
    color      var(--su-dur-select) var(--su-ease),
    transform  var(--su-dur-select) var(--su-ease);
}
.su-nav-item.is-selected,
.su-nav-item[aria-selected="true"] {
  color: var(--su-selected-text);
  font-weight: 500;
}
.su-nav-item.is-selected .su-icon,
.su-nav-item[aria-selected="true"] .su-icon {
  background: var(--su-selected-bg);
  color: var(--su-selected-icon);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(76, 62, 67, .07);
}
.su-nav-item:active .su-icon { transform: scale(.94); }

/* ============================================================
   SearchInput
   ============================================================ */
.su-search {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--su-btn-h);
  padding: 0 20px;
  border-radius: var(--su-btn-radius);
  background: var(--su-surface-1);
  box-shadow: var(--su-shadow);
  transition: box-shadow var(--su-dur-hover) var(--su-ease);
}
.su-search:focus-within { box-shadow: var(--su-shadow-hover); }
.su-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font: inherit; font-size: 15px; color: var(--su-text);
}
.su-search input::placeholder { color: var(--su-text-2); }
.su-search .su-icon { color: var(--su-icon-2); }

/* ============================================================
   FloatingCard
   ============================================================ */
.su-card {
  background: var(--su-surface-1);
  border-radius: 22px;
  box-shadow: var(--su-shadow);
  border: none;
}
.su-card--quiet { background: var(--su-surface-2); box-shadow: none; }

/* ============================================================
   无障碍：系统开了"减弱动态效果"就把位移和缩放全撤掉，
   只留颜色和阴影的变化，状态照样看得出来
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .su-surface, .su-btn, .su-icon-btn, .su-chip,
  .su-segment, .su-nav-item, .su-nav-item .su-icon, .su-icon {
    transition-duration: 1ms !important;
  }
  .su-surface:hover, .su-surface:active,
  .su-btn:hover, .su-btn:active,
  .su-icon-btn:hover, .su-icon-btn:active,
  .su-chip:hover, .su-chip:active,
  .su-surface.is-selected, .su-nav-item.is-selected .su-icon {
    transform: none !important;
  }
  .su-btn.is-loading::after { animation-duration: 2s; }
}