/**
 * McApp 结构基线：与布局无关的通用契约样式。
 * 三个主题共用 DOM 契约（mount ID），视觉由各自 theme.css 完全控制。
 * 本文件只提供可访问性、骨架屏、动效开关等基础行为。
 */

/* hidden 属性必须压过组件 display 定义（modal/flex 组件的兜底） */
[hidden] { display: none !important; }

/* 可访问性 */
.mc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mc-app :focus-visible,
.mc-appearance :focus-visible {
  outline: 2px solid var(--color-accent, var(--state-accent, #39c6d4));
  outline-offset: 2px;
  border-radius: 4px;
}

[role='button'].mc-gallery-item:focus-visible,
[role='button'].mc-post-card:focus-visible {
  outline: 2px solid var(--color-accent, var(--state-accent, #39c6d4));
  outline-offset: 3px;
}

/* 骨架屏 */
.mc-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  min-height: 1em;
}
.mc-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 10%, transparent), transparent);
  animation: mc-shimmer 1.6s infinite;
}
@keyframes mc-shimmer {
  to { transform: translateX(100%); }
}

/* 状态点（各主题可覆盖形状与颜色映射） */
.mc-state-dot {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--state-accent, #94a3b8);
}

/* 空态/错误态容器语义 */
.mc-empty, .mc-error-note {
  text-align: center;
  opacity: 0.72;
  font-size: 0.9em;
  padding: 1.2em 0.5em;
}
.mc-error-note button {
  font: inherit;
  cursor: pointer;
}

/* 动效总开关：preview-adapter 与外观面板都会写 data-motion */
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}
html[data-motion='reduced'] .mc-skeleton::after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .mc-skeleton::after {
    animation: none;
  }
}