/* 通用界面组件（assets/ui/）：按钮、面板、遮罩、卡片、分段选择、标签。只用 design-tokens.css 的令牌。
 * 规矩：4/8 栅格、1px 细线、克制配色；薄荷色只给每屏一个主按钮（.ui-btn--accent）与焦点环；
 * 动效只用 transform / opacity，按下 100ms 内有反馈，面板开合 150–250ms，尊重 prefers-reduced-motion。 */

.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  font: 500 var(--text-sm)/1 var(--font-ui); letter-spacing: 0; cursor: pointer;
  border: 1px solid var(--btn-secondary-border); background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
  transition: transform var(--motion-press) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), opacity var(--motion-fast);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.ui-btn:hover { background: var(--surface-hover); }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ui-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-border); }
.ui-btn--primary:hover { background: var(--btn-primary-bg); opacity: .9; }
.ui-btn--accent { background: var(--accent-mint); color: var(--ink); border-color: var(--accent-mint); }
.ui-btn--accent:hover { background: var(--accent-mint); opacity: .92; }
.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.ui-btn--ghost:hover { color: var(--ink); background: var(--surface-hover); }
.ui-btn--lg { min-height: 44px; padding: 0 var(--space-6); font-size: var(--text-base); }

.ui-overlay {
  position: fixed; inset: 0; z-index: var(--layer-dialog); display: grid; place-items: center;
  background: var(--overlay-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--motion-panel) var(--ease-out);
}
.ui-overlay.is-open { opacity: 1; }
.ui-panel {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
  transform: translateY(8px) scale(.985); opacity: 0;
  transition: transform var(--motion-pop) var(--ease-pop), opacity var(--motion-pop) var(--ease-pop);
}
.ui-overlay.is-open .ui-panel { transform: none; opacity: 1; }

.ui-card {
  display: grid; gap: var(--space-2); text-align: left; cursor: pointer;
  padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit;
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.ui-card:hover { border-color: var(--n-400); }
.ui-card:active { transform: scale(.985); }
.ui-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-card[aria-pressed="true"] { border-color: var(--selection-border); box-shadow: 0 0 0 1px var(--selection-border) inset; }

.ui-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-tag); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 var(--text-sm)/1 var(--font-ui); cursor: pointer;
  transition: transform var(--motion-press) var(--ease-out), background-color var(--motion-fast);
}
.ui-chip:hover { background: var(--surface-hover); }
.ui-chip:active { transform: scale(.97); }
.ui-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-chip[aria-pressed="true"] { background: var(--state-active-bg); border-color: var(--selection-border); }

.ui-segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-hover); border: 1px solid var(--line); }
.ui-segmented > button { border: 0; background: transparent; color: var(--muted); min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font: 500 var(--text-sm)/1 var(--font-ui); cursor: pointer; transition: background-color var(--motion-fast), color var(--motion-fast); }
.ui-segmented > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-ink); }
.ui-segmented > button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }


.ui-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; }

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-card, .ui-chip, .ui-overlay, .ui-panel { transition: none; }
}