/* ==========================================================================
   皓雅导诊机器人 · 三端统一设计令牌（Design Token）唯一真相源
   --------------------------------------------------------------------------
   三端（kiosk.html / admin.html / app.py 内联 H5）均通过
   <link rel="stylesheet" href="/static/tokens.css"> 引入本文件。
   所有颜色/间距/圆角/阴影/字号/字重/过渡值只在此处定义一次，
   三端样式一律使用 var(--x) 引用，禁止硬编码色值。
   ========================================================================== */

:root {
  /* ---------- §2.1 品牌色 ---------- */
  --brand: #2E7D32;                 /* 品牌主色：主按钮、选中态、强调文字 */
  --brand-dark: #1B5E20;            /* 主色深色变体：按下态、深底主色文字 */
  --brand-light: #4CAF50;           /* 主色浅色变体：hover、渐变亮端 */
  --brand-hover: #256428;           /* 主按钮悬停背景 */
  --brand-soft: #E8F5E9;            /* 主色浅底：标签底、选中卡片底 */
  --brand-softer: #F1F8F2;          /* 更浅底：大面积背景块、交替行 */
  --brand-accent: #07C160;          /* 品牌辅色（微信绿）：成功、说话态高亮 */
  --brand-gradient: linear-gradient(160deg, #4CAF50, #2E7D32); /* 主按钮/头像/品牌横幅渐变 */

  /* ---------- §2.2 语义色 ---------- */
  --success: #2E7D32;               /* 成功（启用、已完成、系统正常） */
  --success-soft: #E8F5E9;          /* 成功提示底色 */
  --warning: #F59E0B;               /* 警告（候诊偏久、配置缺失） */
  --warning-soft: #FEF3C7;          /* 警告底色 */
  --danger: #D32F2F;                /* 危险（删除、急停、错误） */
  --danger-soft: #FDECEA;           /* 危险提示/危险按钮底色 */
  --info: #1976D2;                  /* 信息（提示条、系统提示气泡） */
  --info-soft: #E3F2FD;             /* 信息底色 */

  /* ---------- §2.2 就医状态专用（H5 与 kiosk 保持一致） ---------- */
  --st-waiting: #2E7D32;            /* 候诊中 */
  --st-called: #D32F2F;             /* 已叫号 */
  --st-done: #5B7280;               /* 已完成（中性灰） */
  --st-cancel: #94A3B8;             /* 已取消 */
  --st-waiting-soft: #E8F5E9;       /* 候诊中 · 徽章底 */
  --st-called-soft: #FDECEA;        /* 已叫号 · 徽章底 */
  --st-done-soft: #EEF2F6;          /* 已完成 · 徽章底 */
  --st-cancel-soft: #F1F5F9;        /* 已取消 · 徽章底 */

  /* ---------- §2.3 中性色阶 ---------- */
  --ink: #1B2A22;                   /* 一级文字（正文/标题） */
  --ink-2: #4B5F55;                 /* 二级文字（副标题、说明） */
  --ink-3: #6B7A72;                 /* 三级文字（时间戳、占位、辅助） */
  --ink-disabled: #9AA6A0;          /* 禁用文字 */
  --line: #DCE7DF;                  /* 分割线、边框 */
  --line-strong: #C3D3C8;           /* 输入框描边、需强调的边框 */
  --bg: #F6FAF7;                    /* 页面背景（暖调绿灰） */
  --card: #FFFFFF;                  /* 卡片/表格/弹窗背景 */
  --bg-dark: #17301C;               /* admin 侧边栏深色背景 */
  --on-dark: #E4EFE6;               /* 深色背景上的文字 */
  --overlay: rgba(15, 35, 20, .45); /* 弹窗遮罩（绿调深色） */

  /* ---------- §2.4 间距刻度（8px 基准） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- §2.5 圆角刻度 ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- §2.6 阴影三级 ---------- */
  --sh-1: 0 1px 2px rgba(27, 42, 34, .06);
  --sh-2: 0 8px 20px rgba(27, 42, 34, .08);
  --sh-3: 0 24px 60px rgba(27, 42, 34, .18);

  /* ---------- §2.7 字号刻度 ---------- */
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 18px;                  /* kiosk 正文基准 */
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 30px;
  --fs-2xl: 40px;
  --fs-3xl: 64px;

  /* ---------- §2.7 字重 ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- §2.8 过渡时长与缓动曲线 ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
  --dur-page: 420ms;
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ---------- §2.9 v3 立体渐变与投影（按钮/卡片立面用） ---------- */
  --grad-primary: linear-gradient(180deg, #43A047 0%, #2E7D32 100%);       /* 主按钮立体渐变 */
  --grad-primary-hover: linear-gradient(180deg, #4CAF50 0%, #327A36 100%);  /* 主按钮悬停 */
  --grad-primary-down: linear-gradient(180deg, #2E7D32 0%, #1B5E20 100%);   /* 主按钮按下 */
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F1F8F2 100%);        /* 次按钮/浅面渐变 */
  --sh-brand: 0 8px 20px rgba(46, 125, 50, .26), 0 1px 2px rgba(27, 42, 34, .10);
  --sh-brand-lg: 0 14px 30px rgba(46, 125, 50, .30), 0 2px 4px rgba(27, 42, 34, .10);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, .28);                   /* 按钮顶部内高光 */
  --ring: 0 0 0 4px rgba(46, 125, 50, .20);                                 /* 焦点环 */
}

/* ==========================================================================
   通用组件基类（三端共享的纯样式）
   —— 位置/局部覆盖由三端各自定义，此处只提供视觉基线。
   ========================================================================== */

/* ---------- Toast 轻量提示 ---------- */
.toast-container {
  position: fixed;
  top: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 220px;
  max-width: min(90vw, 460px);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-3);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-12px) scale(.96);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.toast.on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast .ico { font-size: var(--fs-md); line-height: 1; }
.toast.success { background: var(--success-soft); border-color: var(--success); color: var(--brand-dark); }
.toast.error   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.toast.warning { background: var(--warning-soft); border-color: var(--warning); color: var(--ink); }
.toast.info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }

/* ---------- 骨架屏 shim ---------- */
.skeleton {
  background: linear-gradient(90deg,
              var(--line) 25%, var(--brand-softer) 37%, var(--line) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-md);
  animation: skShimmer 1.4s ease-in-out infinite;
}
.skeleton-line {
  height: 14px;
  margin: var(--sp-2) 0;
  border-radius: var(--r-sm);
}
@keyframes skShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- 断网提示条 ---------- */
.netbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  background: var(--warning-soft);
  border-bottom: 1px solid var(--warning);
  box-shadow: var(--sh-2);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out),
              background var(--dur-base) var(--ease-std);
  pointer-events: none;
}
.netbar.on { transform: translateY(0); }
.netbar.recovered {
  background: var(--success-soft);
  border-bottom-color: var(--success);
  color: var(--brand-dark);
}

/* ---------- 无障碍隐藏（供后续 ARIA 增强） ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   v3 按钮系统（三端统一基线）
   —— 沿用现有类名 .btn / .p / .g / .d / .s，HTML 零改动即可升级外观；
      尺寸细调由各端在自身 <style> 内覆盖（kiosk 大号触屏 / admin 常规 / H5 移动端）。
   —— 变体：.p 主按钮（立体渐变+品牌投影）· .g 次按钮（浅面+描边）
            .d 危险按钮 · .s 小号 · .lg 大号 CTA
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  padding: 12px 22px;
  border: 1px solid transparent;      /* 统一占位，各变体只改颜色 → 按钮等高 */
  border-radius: var(--r-lg);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-base) var(--ease-std),
              background var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std),
              color var(--dur-base) var(--ease-std);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* 主按钮：立体渐变 + 品牌投影 + 顶部内高光 */
.btn.p {
  background-image: var(--grad-primary);
  color: #fff;
  box-shadow: var(--sh-brand), var(--sh-inset-top);
}
.btn.p:hover {
  background-image: var(--grad-primary-hover);
  box-shadow: var(--sh-brand-lg), var(--sh-inset-top);
  transform: translateY(-1px);
}
.btn.p:active {
  background-image: var(--grad-primary-down);
  box-shadow: 0 3px 10px rgba(46, 125, 50, .26);
  transform: translateY(1px) scale(.985);
}

/* 次按钮：浅面渐变 + 描边，悬停染品牌色 */
.btn.g {
  background-image: var(--grad-surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.btn.g:hover {
  border-color: var(--brand-light);
  color: var(--brand-dark);
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}
.btn.g:active {
  background-image: none;
  background-color: var(--brand-softer);
  box-shadow: none;
  transform: translateY(1px) scale(.99);
}

/* 危险按钮：浅红静默、悬停转实心红 */
.btn.d {
  background-color: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(211, 47, 47, .5);
}
.btn.d:hover {
  background-image: linear-gradient(180deg, #E24444, #D32F2F);
  background-color: transparent;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(211, 47, 47, .26);
  transform: translateY(-1px);
}
.btn.d:active {
  background-image: linear-gradient(180deg, #C62828, #B71C1C);
  transform: translateY(1px) scale(.985);
  box-shadow: none;
}

/* 尺寸档 */
.btn.s { padding: 7px 13px; font-size: var(--fs-xs); border-radius: var(--r-md); gap: 5px; }
.btn.lg { padding: 16px 32px; font-size: 19px; border-radius: var(--r-xl); min-height: 62px; }
.btn.pill { border-radius: var(--r-pill); }

/* ==========================================================================
   简笔画图标（由 static/icons.js 提供路径）
   —— 全部 24×24 单色描边，颜色跟随 currentColor；不再用 emoji（各设备渲染不一致）
   ========================================================================== */
.ic {
  width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em;
  flex: 0 0 auto; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.ic .f, .ic.f { fill: currentColor; stroke: none; }
i.ic-slot, .ic-slot {
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; line-height: 1;
}

/* ==========================================================================
   P2-04 全局动效降级：一处生效三端
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}