/* 日更 · Mindful Editorial Aura 复刻补充样式
   主样式由 Tailwind CDN + tw-config.js 提供（与 Stitch 原型同源），这里只放 Tailwind 覆盖不到的部分 */

/* ============ 本地字体（不依赖 Google Fonts，国内网络/APK 内也能正常渲染） ============ */
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/fonts/material-symbols.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* 安全区（Stitch 原型使用 pt-safe / pb-safe 工具类） */
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 隐藏滚动条（横向 chips 滑轨用） */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* body 基线 */
body {
  min-height: max(100dvh, 100vh);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* 全站禁止横向滚动（装饰光斑等绝对定位元素不再把页面撑出空白） */
html, body { overflow-x: clip; }

/* 卡片内长文本/长数字串防溢出：超出就换行，绝不顶破背景 */
main span, main p, main h1, main h2, main h3, main blockquote { overflow-wrap: break-word; min-width: 0; }
main img { max-width: 100%; }

/* 底栏切换动画：内容淡入 + 轻微上移 */
.view-in { animation: viewIn .28s cubic-bezier(.32,.72,.28,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

/* ============ 按钮微交互 ============ */
/* 全局按压反馈：所有可点元素按下轻微缩小，松手回弹 */
button, label[for="m-file"] {
  transition: transform .12s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease, background-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active, label[for="m-file"]:active { transform: scale(.955); }
button:disabled { opacity: .5; pointer-events: none; }

/* 涟漪（Material 风）：JS 在按下点注入 .ripple */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 9999px;
  background: currentColor;
  opacity: .16;
  transform: scale(0);
  animation: rippleAnim .55s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(1); opacity: 0; } }

/* ============ 勋章墙 ============ */
/* 勋章逐个弹入 */
.medal-in { animation: medalIn .48s cubic-bezier(.34,1.36,.64,1) backwards; }
@keyframes medalIn { from { opacity: 0; transform: scale(.66) translateY(8px) } to { opacity: 1; transform: scale(1) translateY(0) } }
/* 已解锁勋章背后的呼吸光晕 */
.medal-glow { animation: medalPulse 3.4s ease-in-out infinite; }
@keyframes medalPulse { 0%, 100% { opacity: .35; transform: scale(.94) } 50% { opacity: .62; transform: scale(1.06) } }

/* 底部导航：选中态是悬浮的圆形底，按下弹一下 */
nav button:active { transform: scale(.9); }
nav button svg { transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
nav button:active svg { transform: scale(.86); }

/* 数字等宽 */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Material Symbols 图标（本地字体，不再依赖 Google Fonts）
   注意：字体已把 opsz/GRAD/wght 钉死，只保留 FILL 轴（0=描边 / 1=实心） */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  vertical-align: middle;
}

/* 输入框在 iOS 上的外观归一（配合 Tailwind 外观类） */
input, select, textarea, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }

/* 弹窗过渡 */
.mask { animation: fadeIn .18s ease-out; }
.sheet { animation: slideUp .26s cubic-bezier(.32,.72,.28,1); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(60%); opacity: .6 } to { transform: translateY(0); opacity: 1 } }

/* Toast 过渡 */
.toast-in { animation: toastIn .22s ease-out; }
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }

/* 桌面端限宽居中（移动优先，桌面可用） */
@media (min-width: 640px) {
  .app-shell { max-width: 480px; margin: 0 auto; }
}