/* ============================================================
   宠物健康相机与写真 · demo 样式
   审美基线：家族四层判据卷（aesthetic-scale SKILL §四层）
   - 令牌配对化：表面色强制绑 -foreground 前景（R30b-01 shadcn 配对令牌）
   - 阴影阶梯：三层影各司其职，浓度随高度增（R30b-04/10）
   - 动效六律：100–250ms、零弹跳、exit<enter、必带 reduced-motion（R29b-01）
   - 禁纯 #000/#fff（R29b-11）；间距出自间距尺 4/8/12/16/24/32（R29b-12）
   气质定位：温暖圆角系（R30a 宠物向映射）——亲和、活泼但不幼稚
   ============================================================ */

:root {
  /* ---- 配对令牌：表面色 × 前景色 成对定义 ---- */
  --paper: #f5f7f2;              /* 暖调纸底：绿中掺暖，不是冷白 */
  --paper-foreground: #2a3129;

  --card: #fdfdfa;               /* 卡面：近白但非 #fff，带暖 */
  --card-foreground: #2a3129;

  --accent: #2e7d5b;             /* 品牌健康绿 */
  --accent-foreground: #f2f8f4;  /* 绿底上的字：暖白非纯白 */

  --accent-soft: #ddefe3;        /* 软绿面 */
  --accent-soft-foreground: #1f5f44; /* 软绿上的小字加深保对比 */

  --warn: #a3541f;
  --warn-soft: #ffe9d6;

  --muted-foreground: #5d6b60;   /* 次要文字：中性掺主色相 */
  --border: #e3e9e1;
  --ring: #2e7d5b;               /* 焦点环独立成 token（R30b-01） */

  --disabled: #b9cfc3;
  --disabled-foreground: #f2f8f4;

  /* ---- 排版尺（中文行高 1.5–1.8 · 辅文 ≥14px · R29b-02） ---- */
  --line-body: 1.65;
  --line-ui: 1.5;
  --line-loose: 1.7;
  --text-caption: 14px;
  --text-section: 18px;          /* 卡片节标题，与 16px 正文拉开级差 */
  --caption-foreground: #4a574c; /* 辅文加深保对比，禁 12–13px */

  color-scheme: light;

  /* ---- 圆角尺：三档收敛（改前六种值） ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ---- 阴影阶梯：1px 描边影 + 近影 + 远影（R30b-04 三层式） ---- */
  --shadow-card:
    0 0 0 1px rgba(42, 49, 41, 0.04),
    0 1px 2px rgba(42, 49, 41, 0.05),
    0 6px 16px -8px rgba(42, 49, 41, 0.10);
  --shadow-raised:
    0 0 0 1px rgba(46, 125, 91, 0.10),
    0 2px 4px rgba(42, 49, 41, 0.06),
    0 10px 24px -10px rgba(46, 125, 91, 0.22);

  /* ---- 间距尺 4/8/12/16/24/32（R29b-12 · TOK-SHOULD-01） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --touch: 44px;

  /* ---- 动效预算（R29b-01 六律：100–250ms，UI 默认零弹跳） ---- */
  --motion-enter: 220ms;
  --motion-press: 100ms;
  --motion-stagger-1: 60ms;
  --motion-stagger-2: 120ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: ease;

  /* ---- 组件尺（间距尺派生，禁组件层 magic number · TOK-SHOULD-02） ---- */
  --control-lg: calc(var(--space-6) * 2);
  --btn-height: calc(var(--space-4) + var(--space-6));
  --preview-max-h: calc(var(--space-5) * 10);
  --border-emphasis-w: var(--space-1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 中文系统字体栈全链：PingFang(mac) → 雅黑(win) → Noto(linux)，MUST（R29b-05） */
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  font-size: 16px;               /* 正文基准 ≥16px（R29b-11） */
  line-height: var(--line-body);
  background: var(--paper);
  color: var(--paper-foreground);
  max-width: 560px;
  margin-inline: auto;
  /* 外≥内：页缘 space-5 ≥ 卡内 space-4（R29b-11 SHOULD） */
  padding: env(safe-area-inset-top, 0px)
    max(var(--space-5), env(safe-area-inset-right, 0px))
    calc(var(--space-6) + env(safe-area-inset-bottom, 0px))
    max(var(--space-5), env(safe-area-inset-left, 0px));
}

/* 跳到内容：键盘用户入口，热区 ≥44px，MUST */
.skip-link {
  position: absolute;
  left: max(var(--space-2), env(safe-area-inset-left, 0px));
  top: max(var(--space-2), env(safe-area-inset-top, 0px));
  z-index: 2;
  min-height: var(--touch);
  min-width: 44px;
  padding: var(--space-3) var(--space-4);
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-foreground);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}
#main,
#privacy-main {
  scroll-margin-top: max(var(--space-2), env(safe-area-inset-top, 0px));
}

/* ---- 焦点可见性：定制焦点环，MUST（R29b-04） ---- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-5) 0 var(--space-2);
}

.topbar h1 {
  font-size: clamp(1.125rem, 0.5vw + 1.05rem, 1.375rem); /* rem 项在，倍率 ≤2.5 */
  line-height: var(--line-ui);
  margin: 0;
  letter-spacing: 0.02em;
  /* 窄屏独占首行：flex-basis 100% 比单靠 min-width 更能挡住三链接把标题压成竖排 */
  flex: 1 0 100%;
  min-width: 0;
}
@media (min-width: 36rem) {
  .topbar h1 {
    flex: 1 1 auto;
    min-width: 11em;
  }
}

#privacy-link, #privacy-back, #landing-link {
  font-size: 16px;               /* 跟正文，禁 13px 辅文（SHOULD） */
  color: var(--accent);
  text-decoration: none;
  min-height: var(--touch);
  min-width: 44px;
  padding-inline: var(--space-2);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
#privacy-link:hover, #privacy-back:hover, #landing-link:hover { text-decoration: underline; }

.badge {
  font-size: var(--text-caption);
  line-height: var(--line-ui);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  font-weight: 500;
}

.badge.live { background: var(--warn-soft); color: var(--warn); }

.card {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* 页面加载时卡片错峰浮现：单元素 220ms 合律，stagger 引导视线（R30b-12 思路，去弹簧） */
.card {
  animation: rise-in var(--motion-enter) var(--ease-out) backwards;
}
.card:nth-of-type(2) { animation-delay: var(--motion-stagger-1); }
.card:nth-of-type(3) { animation-delay: var(--motion-stagger-2); }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--space-2)); } /* 入场位移小步进，不从 0 缩放（六律） */
  to   { opacity: 1; transform: none; }
}

.card h2 {
  font-size: var(--text-section);
  line-height: var(--line-ui);
  margin: 0 0 var(--space-3);
}

.card h3 {
  font-size: 16px;
  line-height: var(--line-ui);
  margin: 0 0 var(--space-2);
}

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

.alert {
  background: var(--warn-soft);
  color: var(--warn);
  border-left: var(--border-emphasis-w) solid var(--warn);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: var(--line-body);
  margin-top: var(--space-4);
}
.alert[hidden] { display: none; }

.empty {
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: var(--line-body);
  margin: 0;
}
.empty[hidden] { display: none; }

.card ul {
  padding-left: var(--space-5);
  font-size: 16px;
  line-height: var(--line-body);
}
#archive-list,
#portrait-archive-list {
  list-style: none; /* 档案条目是按钮卡，不是要点列表（体检卡缺陷 #4） */
  padding-left: 0;
  margin: 0;
}
#archive-list button,
#portrait-archive-list button {
  display: block;
  width: 100%;
  min-height: var(--touch);
  min-width: 44px;
  font: inherit;
  font-size: 16px;
  line-height: var(--line-body);
  text-align: left;
  color: var(--accent-soft-foreground);
  background: var(--accent-soft);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
#archive-open-hint,
#portrait-archive-open-hint {
  font-size: 16px;
  line-height: var(--line-body);
}
.card p { margin: 0 0 var(--space-3); }
.card p:last-child { margin-bottom: 0; }

/* 上传双入口：拍照 / 相册并排，整块热区 ≥44px（R29b-04） */
.upload-row { display: flex; gap: var(--space-3); }

.upload-pick {
  flex: 1;
  position: relative;
  min-height: var(--control-lg);
  min-width: var(--touch);
  padding: var(--space-3) var(--space-2);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--card-foreground);
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  transition: border-color var(--motion-press) var(--ease-ui);
}
.upload-pick small {
  font-size: var(--text-caption);
  line-height: var(--line-body);
  color: var(--caption-foreground);
  font-weight: normal;
}
.upload-pick:hover { border-color: var(--accent); }
.upload-pick:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

#upload-input, #upload-camera {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-height: var(--touch);
  min-width: 44px;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}

#preview-wrap {
  position: relative;
  margin-top: var(--space-3);
  display: inline-block;
  max-width: 100%;
}
#preview-wrap[hidden] { display: none; }

#preview {
  max-width: 100%;
  max-height: var(--preview-max-h);
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-card);
}

#pose-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#pose-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}
#pose-overlay[hidden] { display: none; }

.engine-row { display: flex; gap: var(--space-3); }

.engine {
  flex: 1;
  min-height: var(--control-lg);              /* 热区富余（MUST 底线 44px，R29b-04） */
  min-width: 44px;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--card-foreground);
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition:
    border-color var(--motion-press) var(--ease-ui),
    background-color var(--motion-press) var(--ease-ui),
    transform var(--motion-press) var(--ease-ui);
}

.engine small {
  font-size: var(--text-caption);
  line-height: var(--line-body);
  color: var(--caption-foreground);
  font-weight: normal;
}

.engine.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-raised);
}
.engine.selected small { color: var(--accent-soft-foreground); }

/* 按压确认：≤100ms 直接反馈，临界阻尼零弹跳（R30c-13） */
.engine:active, #btn-go:not(:disabled):active, #btn-pay-intent:not(:disabled):active {
  transform: scale(0.98);
}

.style-row { margin-top: var(--space-3); font-size: 16px; line-height: var(--line-body); }

.consent-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  min-height: var(--touch);
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--line-body);
  color: var(--card-foreground);
  cursor: pointer;
}
.consent-row input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  flex-shrink: 0;
}

#btn-clear-photo,
#archive-clear,
#portrait-archive-clear {
  margin-top: var(--space-2);
  width: 100%;
  min-height: var(--btn-height);
  min-width: 44px;
  padding: var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--card-foreground);
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  cursor: pointer;
}

.style-row label {
  display: block;
  font-size: 16px;
  line-height: var(--line-body);
  margin-bottom: var(--space-1);
}

#style-select, #pose-select {
  min-height: var(--touch);              /* 原生 select 热区拉到 MUST 线（R29b-04） */
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  color: var(--card-foreground);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}

#btn-go, #btn-pay-intent {
  margin-top: var(--space-4);
  width: 100%;
  min-height: var(--btn-height);
  min-width: 44px;
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground); /* 暖白非纯白（R29b-11） */
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: transform var(--motion-press) var(--ease-ui), box-shadow var(--motion-press) var(--ease-ui);
}

#btn-go:disabled {
  background: var(--disabled);
  color: var(--disabled-foreground);
  cursor: not-allowed;
  box-shadow: none;
}
#btn-pay-intent:disabled {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  cursor: default;
  box-shadow: none;
}

/* 结果区揭示：hidden 摘除时播一次入场（display 切换重启动画，无 JS 参与） */
#result:not([hidden]) {
  animation: rise-in var(--motion-enter) var(--ease-out) backwards;
}

#health-signals {
  padding-left: var(--space-5);
  font-size: 16px;               /* 正文 ≥16px（R29b-11） */
  line-height: var(--line-body);
}

.advice {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  border-left: var(--border-emphasis-w) solid var(--accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: var(--line-loose);
}

#health-photo {
  max-width: 100%;
  max-height: var(--preview-max-h);
  border-radius: var(--radius-md);
  display: block;
  margin: var(--space-3) 0;
  box-shadow: var(--shadow-card);
}
#health-photo[hidden] { display: none; }

#portrait-canvas { display: flex; justify-content: center; }
#portrait-canvas svg, #portrait-canvas img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-width: 100%;
}

.disclaimer {
  margin-top: var(--space-5);
  font-size: 16px;               /* 跟正文，免责声明必须可读 */
  color: var(--muted-foreground);
  line-height: var(--line-loose);
  text-align: center;
}

.boundary {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
  line-height: var(--line-loose);
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

#result-health .boundary {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.rates-export-btn {
  display: block;
  margin: var(--space-4) auto 0;
  min-height: var(--touch);
  min-width: 44px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: 16px;
  line-height: var(--line-ui);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  cursor: pointer;
}

.rates-export {
  margin-top: var(--space-3);
  text-align: left;
  white-space: pre-wrap;
  max-width: 100%;
  overflow-x: auto;
}

.rates-export-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.rates-export-btn[hidden] { display: none; } /* display:block 会顶掉 hidden，必须显式压回 */

/* ---- 动效降级：有动效必带，MUST（R29b-04 / 六律） ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .engine:active, #btn-go:not(:disabled):active, #btn-pay-intent:not(:disabled):active {
    transform: none;
  }
}

/* 窄屏：双入口改纵向，热区仍 ≥44px */
@media (max-width: 360px) {
  .upload-row, .engine-row { flex-direction: column; }
}

/* ---- 暗色三律（R29b-07）：独立设计，不从亮色反推；禁纯黑白；暗面不用 box-shadow ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c2420;
    --paper-foreground: #c5d0c8;

    --card: #252e29;
    --card-foreground: #c5d0c8;

    --accent: #4a9d74;
    --accent-foreground: #102018;

    --accent-soft: #2a3d33;
    --accent-soft-foreground: #9dceb3;

    --warn: #e0a06a;
    --warn-soft: #3a2a1c;

    --muted-foreground: #8b988f;
    --caption-foreground: #a3b0a7; /* 暗面辅文略提亮保对比 */
    --border: #3a4740;
    --ring: #5aaf84;

    --disabled: #3a4740;
    --disabled-foreground: #8b988f;

    --shadow-card: none;
    --shadow-raised: none;

    color-scheme: dark;
  }

  .card, #preview, #portrait-canvas svg, #portrait-canvas img {
    border: 1px solid var(--border);
  }
}