/**
 * 全局覆盖：在此追加规则；由 layout 于各模块 stylesheet 之后加载。
 * 主样式由 layout.ejs 并行引入同目录 slice，避免在此使用 @import 造成瀑布阻塞。
 */

/* ==========================================================================
   单行多图（Wikilink 同行为 2+ 图时自动 .md-gallery；手写 div 亦可用）
   ========================================================================== */
.md-gallery,
.wikilink-img-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 2em 0;
  width: 100%;
}

.md-gallery br,
.wikilink-img-row br {
  display: none !important;
}

.mdui-prose .md-gallery img,
.mdui-prose .wikilink-img-row img {
  margin: 0 !important;
  flex: 1 1 0%;
  min-width: 0;
  height: auto;
  border-radius: 8px;
}

/* ==========================================================================
   LilyPond 谱例（scripts/lilypond.js 输出 <figure class="lilypond-score">）
   ========================================================================== */
.lilypond-score {
  text-align: center;
  margin: 2em auto;
}

.lilypond-score-image {
  max-width: 100%;
  height: auto;
}

/* 深色模式反色：LilyPond SVG 以 currentColor 上色，经 <img> 引入时固定为黑，
   需用 filter 反相成白（透明底不受影响）以适配深色背景。
   hue-rotate(180deg) 让黑白完美反相的同时保留彩色元素的色相，避免被反成补色。 */
.mdui-theme-dark .lilypond-score-image {
  filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
  .mdui-theme-auto .lilypond-score-image {
    filter: invert(1) hue-rotate(180deg);
  }
}