/* ==========================================================================
   components-controls.css — 通用控件样式（按钮 / 表单 / 顶部警示条）
   适用范围：全站按钮、表单字段、资源页顶部 Key 来源提示条
   加载顺序：layout.css 之后；完整顺序 base → layout → controls → status →
             card → feedback → overlays → misc → animations（见页面 <link> 顺序）
   依赖：base.css 的设计令牌；所有关键属性均带 var() 回退值
   ========================================================================== */

/* --------------------------------------------------------------------------
   按钮
   规则：最小高度 44px（触控友好）；统一圆角 10px；禁用态降低不透明度；
        :active 的位移缩放属于动画，只在 data-motion=full/reduced 时启用
       （见 animations.css）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  border-radius: var(--radius-md);
  background: #e9eefb;
  background: var(--color-primary-soft);
  color: #1d4ed8;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover {
  background: #dde7fa;
}
.btn--sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
}

/* 主按钮：填充主色 */
.btn--primary {
  background: #1d4ed8;
  background: var(--color-primary);
  border-color: #1d4ed8;
  border-color: var(--color-primary);
  color: #ffffff;
  color: var(--color-on-primary);
}
.btn--primary:hover {
  background: #1e40af;
  background: var(--color-primary-hover);
  border-color: #1e40af;
  border-color: var(--color-primary-hover);
}
.btn--primary:active {
  background: #1e3a8a;
  background: var(--color-primary-active);
}

/* 幽灵按钮：次级操作（清空、文档链接等） */
.btn--ghost {
  background: transparent;
  border-color: #c9d1dc;
  border-color: var(--color-border-strong);
  color: #1f2937;
  color: var(--color-text);
}
.btn--ghost:hover {
  background: #f8fafc;
  background: var(--color-surface-2);
}

/* 禁用态（原生 disabled 或 aria-disabled，如未滚动到底的「同意」按钮） */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 按钮内加载指示（旋转动画定义在 animations.css；无动画时静态圆环） */
.btn__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
}
.btn--ghost .btn__spinner {
  border-color: rgba(31, 41, 55, 0.25);
  border-top-color: currentColor;
}

/* --------------------------------------------------------------------------
   表单：标签在上、提示在下（不用占位符代替标签）
   -------------------------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
}
.field__label {
  display: block;
  margin-bottom: 8px;
  color: #111827;
  color: var(--color-heading);
  font-weight: 600;
}
.field__hint {
  margin: 8px 0 0;
  color: #5b6675;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-size: var(--text-sm);
}

.input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #c9d1dc;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  border-radius: var(--radius-md);
  background: #ffffff;
  background: var(--color-surface);
  color: #1f2937;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input::placeholder {
  color: #5b6675;
  color: var(--color-muted);
}
.input:hover {
  border-color: #9aa4b2;
}
.input:focus {
  outline: none; /* 以边框高亮 + 外环替代默认轮廓（对比度足够） */
  border-color: #2563eb;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
/* Key 输入使用等宽字体，便于核对大小写与字符 */
.input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* 输入框 + 按钮同一行；窄屏自动换行。
   对齐：按钮组补偿标签行高度（行高 1.65em + 下边距 8px），与输入框上下对齐 */
.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  gap: var(--space-3);
}
.field-row .field {
  flex: 1 1 240px;
  margin-bottom: 0;
}
.field-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  gap: var(--space-3);
  margin-top: calc(1.65em + 8px);
}
.field-row__actions .btn {
  min-width: 84px;
}

/* --------------------------------------------------------------------------
   顶部警示条：资源页「Key 来源」提示
   醒目但不刺眼：琥珀色左边框 + 浅琥珀底 + 深琥珀文字
   -------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
  padding: 14px 16px;
  border: 1px solid #f0b429;
  border: 1px solid var(--color-warning-border);
  border-left-width: 4px;
  border-radius: 14px;
  border-radius: var(--radius-lg);
  background: #fffbeb;
  background: var(--color-warning-bg);
  color: #8a4b04;
  color: var(--color-warning-text);
}
.banner__label {
  flex: 0 0 auto;
  font-weight: 700;
}
.banner__text {
  margin: 0;
}

/* 查询操作区面板：与结果卡片形成「操作 / 结果」两级结构 */
.query-panel {
  padding: 18px 18px 20px;
  border: 1px solid #e2e6eb;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-sm);
}