/* ==========================================================================
   base.css · Ionic 组件的原生等价基础样式 + 全局重置
   复刻契约（AGENTS.md）：ion-toolbar→div.ion-toolbar，ion-button→button，
   ion-modal→fixed 遮罩，ion-icon/ion-img→img，ion-progress-bar→自绘进度条，
   ion-spinner→CSS 动画。此处只提供组件 CSS 复用的基础行为，主题变量在 themes.css。
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* rem 基值 16px（与源码 Tailwind 一致，浏览器默认值，显式声明防覆盖） */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: var(--ion-text-color, #FFF);
  font-family: var(--ion-font-family, -apple-system, 'Roboto', sans-serif);
}

img {
  max-width: 100%;
}

/* ---- ion-toolbar → div.ion-toolbar --------------------------------------
   Ionic ion-toolbar：flex 横向容器，垂直居中，padding-inline 由组件 CSS 覆盖 */
.ion-toolbar {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* ion-buttons → div.ion-buttons：工具条内按钮组容器 */
.ion-buttons {
  display: flex;
  align-items: center;
}

/* ---- ion-button → button.ion-button --------------------------------------
   Ionic button 重置：去默认样式、inline-flex 居中、继承字体 */
button.ion-button,
.ion-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- ion-icon / ion-img → img.ion-icon / img.ion-img ----------------------
   Ionic img 类组件默认 inline-block，尺寸由组件 CSS 控制 */
.ion-icon,
.ion-img {
  display: inline-block;
  object-fit: contain;
}

/* ---- ion-icon 内嵌 SVG（span.ion-icon > svg） ------------------------------
   Ionic ion-icon 把 SVG 注入 shadow root：尺寸 = 1em（font-size 控制）、fill: currentColor。
   原生等价物（src/js/utils/ionicons.js createIonIcon）内嵌 SVG，此处补齐这两条 Ionic 默认行为 */
.ion-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ---- ion-modal → div.ion-modal（fixed 遮罩） ------------------------------
   modal.js 挂载时加 .ion-modal-open 控制显隐 */
.ion-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ion-modal[hidden] {
  display: none;
}

/* ---- ion-spinner → div.ion-spinner（CSS 动画） ---------------------------- */
.ion-spinner {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ion-spinner-rotate 1s linear infinite;
}

@keyframes ion-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}