/* ==========================================================================
   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);
  /* ion-app 外层背景（对应源码 App.vue：ion-app{background:var(--color-screen-bg)}），PC 两侧露出的颜色 */
  background: var(--color-screen-bg);
}

/* 对应源码 App.vue：.new-skin-symbol body{background:var(--ep-color-background-fill-surface-raised-L2)} */
.new-skin-symbol body {
  background: var(--ep-color-background-fill-surface-raised-L2);
}

/* PC 端限宽居中（对应源码 App.vue ion-router-outlet：max-width:486px + mx-auto + overflow-hidden），
   两侧露出 body 背景；modals 是 position:fixed 挂视口，不受此限制（与线上一致） */
#app {
  max-width: 486px;
  margin: 0 auto;
  overflow: hidden;
}

img {
  max-width: 100%;
}

/* ---- Tailwind preflight 全局重置（源码全局生效，复刻 tailwind v3 preflight 的关键规则） ----
   源码所有组件样式建立在 preflight 之上；缺失会导致 p/h1-h6/ul 等带 UA 默认 margin，
   视觉与线上不一致（如下载模板介绍段落的段间距）。 */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* ionic ion-img 的宿主行为（对应源码 @ionic/core img.css：:host{display:block; object-fit:contain}）。
   本项目 ion-img 一律翻译为 <img>，此处全局对齐 contain，防止 flex 行内拉伸变形；
   源码中原生 <img> 极少且比例自然或 CSS 显式指定 object-fit，不受影响 */
img {
  object-fit: contain;
}

/* ---- 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);
  }
}