/* 嘉圆 组件库 v1.0 | 2026-10-16
   依赖 tokens.css，所有数值取自设计令牌，不出现硬编码颜色与尺寸。
   命名前缀统一为 jy-，避免与第三方样式冲突。 */

/* ========== 基础重置 ========== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--jy-paper);
  color: var(--jy-ink-900);
  font-family: var(--jy-font-sans);
  font-size: var(--jy-text-md);
  line-height: var(--jy-leading);
  -webkit-text-size-adjust: 100%;
}

/* 统一焦点样式：键盘操作时必须看得见，鼠标点击时不干扰 */
:focus-visible {
  outline: 3px solid var(--jy-gold-500);
  outline-offset: 2px;
  border-radius: var(--jy-radius-sm);
}

.jy-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--jy-gutter); }
.jy-wrap--narrow { max-width: 720px; }

/* 仅供屏幕阅读器的文字 */
.jy-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;
}

/* ========== 按钮 ========== */
/* 触控区域不小于 48px，符合移动端可用性要求 */
.jy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jy-space-2);
  min-height: 48px; padding: 0 var(--jy-space-5);
  border: 2px solid transparent; border-radius: var(--jy-radius-pill);
  background: var(--jy-red-600); color: #fff;
  font-family: inherit; font-size: var(--jy-text-md); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--jy-dur-fast) var(--jy-ease-out),
              border-color var(--jy-dur-fast) var(--jy-ease-out);
}
.jy-btn:hover { background: var(--jy-red-700); }
.jy-btn:active { transform: translateY(1px); }

.jy-btn--ghost { background: transparent; color: var(--jy-red-600); border-color: var(--jy-red-600); }
.jy-btn--ghost:hover { background: var(--jy-red-50); }

.jy-btn--quiet { background: transparent; color: var(--jy-ink-700); border-color: var(--jy-line); }
.jy-btn--quiet:hover { background: var(--jy-surface); }

.jy-btn--sm { min-height: 40px; padding: 0 var(--jy-space-4); font-size: var(--jy-text-sm); }
.jy-btn--block { display: flex; width: 100%; }

.jy-btn:disabled, .jy-btn[aria-disabled="true"] {
  background: var(--jy-line); color: var(--jy-ink-400);
  border-color: transparent; cursor: not-allowed; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) { .jy-btn:active { transform: none; } }

/* ========== 卡片 ========== */
.jy-card {
  background: var(--jy-surface);
  border: 1px solid var(--jy-line);
  border-radius: var(--jy-radius-lg);
  padding: var(--jy-space-5);
  box-shadow: var(--jy-shadow-1);
}
.jy-card__title { font-size: var(--jy-text-lg); font-weight: 700; margin: 0 0 var(--jy-space-2); }
.jy-card__body { margin: 0; color: var(--jy-ink-700); font-size: var(--jy-text-sm); }

/* 可点击的卡片：整块作为链接 */
a.jy-card {
  display: block; color: inherit; text-decoration: none;
  transition: box-shadow var(--jy-dur-base) var(--jy-ease-out),
              transform var(--jy-dur-base) var(--jy-ease-out);
}
a.jy-card:hover { box-shadow: var(--jy-shadow-2); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.jy-card:hover { transform: none; } }

/* 已完成状态：用青色而非红色，红色保留给品牌与主操作 */
.jy-card--done { background: var(--jy-teal-50); border-color: transparent; }

/* ========== 标签 ========== */
.jy-chip {
  display: inline-block; font-size: var(--jy-text-xs); line-height: 1.6;
  padding: 3px 10px; border-radius: var(--jy-radius-pill);
  background: var(--jy-surface); border: 1px solid var(--jy-line); color: var(--jy-ink-700);
  white-space: nowrap;
}
/* 标签做成链接时（节点页跳索引页）：去掉下划线，并给出可点的反馈。
   静态样式保持不变，这样同一行里 span 标签与链接标签看起来一致。 */
a.jy-chip { text-decoration: none; cursor: pointer;
            transition: border-color var(--jy-dur-fast) var(--jy-ease-out),
                        color var(--jy-dur-fast) var(--jy-ease-out); }
a.jy-chip:hover { border-color: var(--jy-teal-600); color: var(--jy-teal-600); }
a.jy-chip:focus-visible { outline: 2px solid var(--jy-teal-600); outline-offset: 2px; }

.jy-chip--level { background: var(--jy-teal-50); border-color: transparent; color: var(--jy-teal-600); font-weight: 600; }
.jy-chip--gold  { background: var(--jy-gold-100); border-color: transparent; color: var(--jy-ink-900); }
.jy-chip-row { display: flex; flex-wrap: wrap; gap: var(--jy-space-2); }

/* ========== 表单 ========== */
.jy-field { display: block; margin-bottom: var(--jy-space-4); }
.jy-field__label { display: block; font-size: var(--jy-text-sm); font-weight: 600; margin-bottom: var(--jy-space-2); }
.jy-field__hint  { display: block; font-size: var(--jy-text-xs); color: var(--jy-ink-700); margin-top: var(--jy-space-2); }
.jy-field__error { display: block; font-size: var(--jy-text-xs); color: var(--jy-red-600); margin-top: var(--jy-space-2); font-weight: 600; }

.jy-input, .jy-textarea {
  display: block; width: 100%; min-width: 0; /* min-width:0 防止在 flex 容器内撑破布局 */
  min-height: 48px; padding: var(--jy-space-3) var(--jy-space-4);
  border: 1px solid var(--jy-line); border-radius: var(--jy-radius-md);
  background: var(--jy-surface); color: var(--jy-ink-900);
  font-family: inherit; font-size: var(--jy-text-md);
}
.jy-textarea { min-height: 120px; resize: vertical; line-height: var(--jy-leading); }
.jy-input::placeholder, .jy-textarea::placeholder { color: var(--jy-ink-400); }
.jy-input[aria-invalid="true"], .jy-textarea[aria-invalid="true"] { border-color: var(--jy-red-600); }

/* 搜索与提问条：输入框可收缩，按钮不被挤出 */
.jy-inputbar {
  display: flex; gap: var(--jy-space-2); align-items: center;
  background: var(--jy-surface); border: 1px solid var(--jy-line);
  border-radius: var(--jy-radius-pill); padding: var(--jy-space-2);
}
.jy-inputbar .jy-input {
  flex: 1 1 0; min-width: 0;
  border: 0; background: transparent; min-height: 40px; padding: 0 var(--jy-space-3);
}
.jy-inputbar .jy-input:focus { outline: none; }
.jy-inputbar .jy-btn { flex: 0 0 auto; }

/* ========== 进度条 ========== */
.jy-progress {
  display: block; height: 10px; width: 100%;
  background: var(--jy-line); border-radius: var(--jy-radius-pill); overflow: hidden;
}
.jy-progress__bar {
  display: block; height: 100%; background: var(--jy-teal-600);
  border-radius: inherit;
  transition: width var(--jy-dur-slow) var(--jy-ease-out);
}
.jy-progress__label { display: flex; justify-content: space-between; font-size: var(--jy-text-xs); color: var(--jy-ink-700); margin-bottom: var(--jy-space-2); }

/* ========== 徽章 ========== */
.jy-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--jy-space-2);
  width: 96px; text-align: center;
}
.jy-badge__coin {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--jy-gold-500); color: var(--jy-ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--jy-text-xl); font-weight: 700;
}
.jy-badge__name { font-size: var(--jy-text-xs); color: var(--jy-ink-700); line-height: 1.4; }
/* 未获得：降为灰色，但不靠颜色单独传达状态，另加文字说明 */
.jy-badge--locked .jy-badge__coin { background: var(--jy-line); color: var(--jy-ink-400); }

/* ========== 提示块 ========== */
.jy-notice {
  border-radius: var(--jy-radius-md);
  padding: var(--jy-space-3) var(--jy-space-4);
  font-size: var(--jy-text-sm);
}
.jy-notice--info { background: var(--jy-teal-50); color: var(--jy-ink-900); }
.jy-notice--warn { background: var(--jy-gold-100); color: var(--jy-ink-900); }
/* 免责声明：全站合规必备，样式固定，不得随页面改动 */
.jy-notice--disclaimer { background: var(--jy-gold-100); color: var(--jy-ink-900); font-size: var(--jy-text-xs); }

/* ========== 空状态 ========== */
.jy-empty { text-align: center; padding: var(--jy-space-7) var(--jy-space-4); color: var(--jy-ink-700); }
.jy-empty__title { font-size: var(--jy-text-lg); font-weight: 700; color: var(--jy-ink-900); margin: 0 0 var(--jy-space-2); }
.jy-empty__body { margin: 0 0 var(--jy-space-5); font-size: var(--jy-text-sm); }

/* ========== 弹层 ========== */
.jy-modal { border: 0; padding: 0; background: transparent; max-width: 100%; }
.jy-modal::backdrop { background: rgba(43, 43, 43, 0.5); }
.jy-modal__panel {
  background: var(--jy-surface); border-radius: var(--jy-radius-lg);
  padding: var(--jy-space-5); width: min(420px, calc(100vw - 2 * var(--jy-gutter)));
  box-shadow: var(--jy-shadow-2);
}
.jy-modal__title { font-size: var(--jy-text-lg); font-weight: 700; margin: 0 0 var(--jy-space-3); }
.jy-modal__body { margin: 0 0 var(--jy-space-5); color: var(--jy-ink-700); font-size: var(--jy-text-sm); }
.jy-modal__actions { display: flex; gap: var(--jy-space-3); flex-wrap: wrap; }

/* ========== 分段切换 ========== */
.jy-segment {
  display: inline-flex; background: var(--jy-surface);
  border: 1px solid var(--jy-line); border-radius: var(--jy-radius-pill); padding: 4px;
}
.jy-segment__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 40px; padding: 0 var(--jy-space-4);
  border-radius: var(--jy-radius-pill);
  font-family: inherit; font-size: var(--jy-text-sm); font-weight: 600; color: var(--jy-ink-700);
}
.jy-segment__item[aria-selected="true"] { background: var(--jy-red-600); color: #fff; }

/* ========== 面包屑 ========== */
.jy-crumb { font-size: var(--jy-text-xs); color: var(--jy-ink-700); }
.jy-crumb a { color: var(--jy-teal-600); }

/* ========== 页眉 ========== */
.jy-header { display: flex; align-items: center; gap: var(--jy-space-3); padding: var(--jy-space-4) 0; }
.jy-header img, .jy-header svg { width: 44px; height: 44px; flex: none; }
.jy-header__name { font-family: var(--jy-font-display); font-size: var(--jy-text-lg); font-weight: 700; color: var(--jy-red-600); line-height: 1.1; }
.jy-header__sub  { font-size: var(--jy-text-xs); color: var(--jy-ink-700); }

/* ========== 栅格 ========== */
.jy-grid { display: grid; gap: var(--jy-space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .jy-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ========== 页脚 ========== */
.jy-footer {
  margin-top: var(--jy-space-7);
  padding: var(--jy-space-5) 0 var(--jy-space-6);
  border-top: 1px solid var(--jy-line);
  font-size: var(--jy-text-xs); color: var(--jy-ink-700);
}

/* ========== 页头导航（2026-10-21）：上一页、首页 ========== */
.jy-pagenav { margin-left: auto; display: flex; gap: var(--jy-space-2); flex: none; }
.jy-pagenav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--jy-space-3);
  border: 1.5px solid var(--jy-line); border-radius: var(--jy-radius-pill);
  background: transparent; color: var(--jy-ink-700); font: inherit; font-size: var(--jy-text-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.jy-pagenav__btn:hover { border-color: var(--jy-ink-700); color: var(--jy-ink-900); }
.jy-pagenav__btn:focus-visible { outline: 2px solid var(--jy-teal-600); outline-offset: 2px; }
.jy-pagenav__btn[aria-current="page"] { opacity: 0.6; }