/* 色票、字型、圓角與版面常數來自建置產出的 css/theme.css */

:root {
    color-scheme: light;
    --shadow: 0 0.25rem 1rem var(--color-shadow);
    --header-height: 4.25rem;
    /* 黏頂 header 的實際總高度（品牌列 + 導覽列，窄版展開選單時更高）：由 site.js 量測後寫入，量不到時退回品牌列高度；
       黏頂工具列與捲動定位的偏移一律引用此值，不得引用 --header-height */
    --header-stack-height: var(--header-height);
    --content-max: 72rem;
    --gap: 1rem;
    --player-frame-width: 0.1875rem;
}

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

html {
    scroll-padding-top: calc(var(--header-stack-height) + 1rem);
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
}

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

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-primary-deep);
}

.visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    z-index: 200;
}

.skip-link:focus {
    top: 0.5rem;
}

/* ---------- Icons ---------- */

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.icon--lead {
    margin-right: 0.4em;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 0.0625rem 0.25rem var(--color-header-shadow);
}

.site-header__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    min-height: var(--header-height);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
}

.brand__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.brand__main {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-brand-name);
}

.brand__sub {
    font-size: 0.8rem;
    opacity: 0.9;
}

.site-search {
    display: flex;
    gap: 0.35rem;
    flex: 0 1 18rem;
}

.site-search__input,
.search-form__input {
    flex: 1;
    min-width: 6rem;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: var(--radius-pill);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
}

/* Buttons */

.site-search__button,
.search-form__button,
.button {
    padding: 0.45rem 1rem;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--color-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.site-search__button {
    background: var(--color-primary-deep);
}

.site-search__button:hover {
    background: var(--color-primary-deepest);
    color: var(--color-on-primary);
}

.search-form__button,
.button {
    background: var(--color-primary);
}

.search-form__button:hover,
.button:hover {
    background: var(--color-primary-deep);
    color: var(--color-on-primary);
}

/* 選單開關：經典三橫線，展開時（aria-expanded 由 site.js 切換）換成關閉符號 */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0.0625rem solid var(--color-on-primary-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-on-primary);
    font: inherit;
    cursor: pointer;
}

.nav-toggle__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open,
.nav-toggle:not([aria-expanded="true"]) .nav-toggle__icon--close {
    display: none;
}

.site-nav {
    background: var(--color-primary-deep);
}

.site-nav__list,
.site-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
}

.site-nav__item {
    position: relative;
}

.site-nav__link,
.site-nav__sub-link {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--color-on-primary);
    text-decoration: none;
    white-space: nowrap;
}

/* 群組的母層級是展開鍵（不跳轉）：外觀與連結一致，展開時（aria-expanded 由 site.js 切換）箭號翻轉 */

.site-nav__link--group {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.site-nav__link--group[aria-expanded="true"] .site-nav__chevron {
    transform: rotate(180deg);
}

/* 目前頁面：半透明白底；hover：文字轉站名同款淡黃、底色不變，兩種狀態同時成立時互不遮蔽 */

.site-nav__item.is-current > .site-nav__link,
.site-nav__sub-item.is-current > .site-nav__sub-link {
    background: var(--color-on-primary-hover);
}

.site-nav__link:hover,
.site-nav__sub-link:hover {
    color: var(--color-brand-name);
}

.site-nav__chevron {
    margin-left: 0.3em;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

/* 子選單預設收合（hidden 屬性由 site.js 切換）；窄版為靜態內嵌、寬版為下拉，見末尾「Responsive」區段 */

.site-nav__sub {
    position: static;
}

.site-nav__sub[hidden] {
    display: none;
}

.site-nav__sub-link {
    color: var(--color-on-primary);
    padding-left: 2rem;
    white-space: normal;
}

/* ---------- Main ---------- */

.site-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.page {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.25rem 2.5rem;
}

.page__title {
    margin: 0 0 1rem;
    font-size: 1.9rem;
    line-height: 1.3;
    color: var(--color-primary-deep);
    border-bottom: 0.1875rem double var(--color-primary-tint);
    padding-bottom: 0.5rem;
}

/* 標題列：h1 與相鄰樂曲同列，列高由 h1 決定，各頁標題位置一致 */

.page__title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.1875rem double var(--color-primary-tint);
}

.page__title--inline {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1 1 auto;
    min-width: 0;
}

.page__title-sub {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-muted);
}

.page__lead {
    color: var(--color-text-soft);
    font-size: 1.05rem;
}

.section {
    margin-top: 2.25rem;
}

.section__title {
    font-size: 1.25rem;
    color: var(--color-primary-deep);
    border-bottom: 0.125rem solid var(--color-primary-tint);
    padding-bottom: 0.3rem;
    margin: 0 0 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.section__count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-muted);
}

.empty {
    color: var(--color-muted);
}

/* ---------- Prose (info pages, home intro) ---------- */

.prose h2 {
    font-size: 1.4rem;
    color: var(--color-primary-deep);
    margin: 2rem 0 0.75rem;
    border-bottom: 0.125rem solid var(--color-primary-tint);
    padding-bottom: 0.3rem;
}

.prose h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
}

.prose blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--color-highlight);
    border-left: 0.25rem solid var(--color-quote-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose blockquote > :first-child {
    margin-top: 0;
}

.prose blockquote > :last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol {
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.35rem;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 2rem;
    font-size: 0.95rem;
}

.prose th,
.prose td {
    border: 0.0625rem solid var(--color-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--color-bg);
}

.prose code {
    background: var(--color-bg);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* 程式碼區塊（開發者資訊頁的腳本原文）：等寬字型 --font-mono、保留換行與空白、過寬時區塊內橫向捲動（頁面不得橫向捲動）；
   右上角 slot 放狀態文字與複製鈕（文案由 site.js 依 SITE_CONFIG.text.code 注入）；內層 code 取消行內樣式，底色與圓角由 pre 統一 */

.code-block {
    position: relative;
    margin: 1rem 0 2rem;
}

.prose pre {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.45;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
}

.prose pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.code-block__actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-block__status {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.code-block__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
}

.code-block__copy:hover {
    color: var(--color-primary-deep);
    border-color: var(--color-primary);
}

.code-block__copy:focus-visible {
    outline: 0.1875rem solid var(--color-focus-ring);
    outline-offset: 0.125rem;
}

/* 複製成功（site.js 短暫加上 is-copied）：複製圖示換成綠色勾勾，邊框同色 */

.code-block__icon--copied,
.code-block__copy.is-copied .code-block__icon--copy {
    display: none;
}

.code-block__copy.is-copied {
    color: var(--color-success);
    border-color: var(--color-success);
}

.code-block__copy.is-copied .code-block__icon--copied {
    display: inline-block;
}

.prose [lang="en"] {
    color: var(--color-text-soft);
}

/* 連結清單（相關資源）：圓點改為固定格位的外連圖示（建置時注入 sprite 圖示），
   線條色與填底色為 theme.css 的兩個語意色；--icon-fill 自訂屬性穿透 <use> 供圖示內的方塊填色 */

.prose .link-list {
    list-style: none;
    padding-left: 0;
}

.link-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.link-list__icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.link-list__icon .icon {
    --icon-fill: var(--color-link-icon-fill);
    width: 100%;
    height: 100%;
    color: var(--color-link-icon-stroke);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin: 0 0.35rem;
}

/* ---------- Line clamp ---------- */

/* 歌詞預覽（.song-list__snippet）與曲目標題（.song-list__title）的行數由 theme.css 依 theme.lyricsPreview.maxLines 與 theme.titleFit.maxLines 產出 */
.song-list__title,
.song-list__meta,
.song-list__snippet,
.card__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.song-list__meta {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* ---------- Cards ---------- */

.card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-card-min-column), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--gap);
}

.card__link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1rem var(--layout-card-padding-x);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card__link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
    color: inherit;
}

.card__title {
    font-weight: 700;
    color: var(--color-primary-deep);
}

.card__count {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.card__description {
    font-size: 0.9rem;
    color: var(--color-text-soft);
}

/* ---------- Song list ---------- */

.song-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-song-list-min-column), 1fr));
    grid-auto-rows: 1fr;
    gap: 0.5rem;
}

.song-list__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.6rem var(--layout-song-list-padding-x);
    border-radius: var(--radius-sm);
    border: 0.0625rem solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.song-list__link:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    color: inherit;
}

/* 卡片：標題列（歌名靠左、副題靠右）→ 作者 → 歌詞預覽（前 N 字，行數以 line-clamp 為硬上限）→ 來源（推至卡底靠右）；空欄位不佔位 */

.song-list__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.song-list__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--color-primary-deep);
}

.song-list__subtitle {
    flex: 0 1 auto;
    max-width: 45%;
    font-size: 0.8rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-list__meta {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.song-list__snippet {
    font-size: 0.85rem;
    color: var(--color-text-soft);
}

.song-list__source {
    margin-top: auto;
    padding-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-list__subtitle:empty,
.song-list__meta:empty,
.song-list__snippet:empty,
.song-list__source:empty,
.song-list__hits:empty {
    display: none;
}

/* 搜尋結果：恆為單欄多列；每張卡片列出每一處命中的前後文摘錄（由 site.js 填入），
   精確命中與雙字模糊命中以不同底色的 <mark> 標示（色票來自 theme.css） */

.page--search .song-list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
}

.song-list__hits {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.35rem 0 0;
    border-top: 0.0625rem dashed var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: var(--color-text-soft);
}

.song-list__hit {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.song-list__hit-label {
    flex: 0 0 auto;
    min-width: 3em;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.song-list__hit-label:empty {
    display: none;
}

.song-list__hit-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.song-list__hit--more {
    color: var(--color-muted);
}

.search-hit {
    padding: 0 0.1em;
    border-radius: var(--radius-sm);
    color: inherit;
}

.search-hit--exact {
    background: var(--color-search-hit-exact-bg);
}

.search-hit--fuzzy {
    background: var(--color-search-hit-fuzzy-bg);
}

/* ---------- Song page ---------- */

.song-pager {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.song-pager__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 12rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 0.0625rem solid var(--color-border);
    text-decoration: none;
    color: var(--color-primary-deep);
    font-size: 0.85rem;
    line-height: 1.5;
}

.song-pager__link:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    color: var(--color-primary-deep);
}

.song-pager__link--next {
    flex-direction: row-reverse;
}

.song-pager__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credits {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

/* 每個屬性自成一列：display: contents 讓 dt/dd 直接落入外層 grid 的兩欄，逐列對齊 */
.credits__row {
    display: contents;
}

.credits dt {
    color: var(--color-muted);
}

.credits dt::after {
    content: "：";
}

.credits dd {
    margin: 0;
}

/* 播放區：點擊前為樂譜首頁海報，點擊後原地換成 iframe；兩者高度同一公式
   （固定譜表列數 × 單譜表高 + 舞台留白 + 前置文字條 + 歌詞區 + 控制列，上限為視窗比例），
   列數與窄版斷點的變數皆由 theme.css 提供，故點擊前後不會跳動，譜表較少時亦不縮小 */

.section--player {
    container-type: inline-size;
}

.player-slot {
    --player-header-block: 0rem;
    --player-lyrics-block: 0rem;
    position: relative;
    height: min(
        calc(var(--layout-player-staff-height) * var(--player-rows)
            + var(--layout-player-stage-padding-y) * 2
            + var(--player-header-block)
            + var(--player-lyrics-block)
            + var(--player-controls-block)),
        var(--player-max-height)
    );
    border-radius: var(--radius);
    /* 明顯的播放器外框：outline 不佔版面，海報與 iframe 的高度公式不受影響 */
    outline: var(--player-frame-width) solid var(--color-primary-deep);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: var(--color-surface);
}

.player-slot--with-header {
    --player-header-block: var(--layout-player-header-height);
}

.player-slot--with-lyrics {
    --player-lyrics-block: var(--layout-player-lyrics-height);
}

.player-slot__poster {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--color-surface);
    cursor: pointer;
}

.player-slot__poster:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 0.1875rem var(--color-focus-ring);
}

.player-slot__poster-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.player-slot__poster:hover .player-slot__poster-image {
    opacity: 0.75;
}

.player-slot__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow);
    transition: background-color 0.15s ease;
}

.player-slot__poster:hover .player-slot__badge {
    background: var(--color-primary-deep);
}

.player-slot__badge-icon {
    width: 1.4em;
    height: 1.4em;
}

.player-slot__frame {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.lyrics-block + .lyrics-block {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 0.0625rem dashed var(--color-border);
}

.lyrics-block__heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-muted);
}

.lyrics-section {
    margin: 0 0 1.1rem;
    padding-left: 1rem;
    border-left: 0.2rem solid var(--color-primary-tint);
}

.lyrics-section__label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-primary-deep);
    font-weight: 700;
}

.lyrics-line {
    display: block;
}

/* Score preview：雙頁開（依文件順序自動放置，單數頁左欄、偶數頁右欄），圖片為匯出原圖只以 CSS 縮放 */

.score-pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.score-pages__zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: zoom-in;
}

.score-pages__zoom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--color-focus-ring);
}

.score-pages__image {
    display: block;
    width: 100%;
    height: auto;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* 放大檢視：<dialog> 置於頂層，其餘頁面成為後景且不可操作；點圖片或遮罩任一處關閉（下載鍵除外）。
   寬版整頁貼合視窗，窄版改為貼齊視窗寬、垂直捲動（直式手機以 contain 放大反而比預覽更小） */

.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: auto;
}

.lightbox::backdrop {
    background: var(--color-scrim);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    background: var(--color-surface);
    box-shadow: var(--shadow);
    cursor: zoom-out;
}

.lightbox__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0.0625rem solid var(--color-on-primary-border);
    border-radius: 50%;
    background: var(--color-primary-deep);
    color: var(--color-on-primary);
    cursor: pointer;
}

.lightbox__close .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.lightbox__download {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

.lightbox__close:focus-visible,
.lightbox__download:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--color-focus-ring);
}

/* 放大檢視開啟期間鎖住頁面捲動（class 由 site.js 依 dialog 開關切換） */
html.is-lightbox-open {
    overflow: hidden;
}

.downloads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.6rem;
}

/* 各類型的底色、字色與左側色條由 theme.css 的 .downloads__link--<kind> 提供 */

.downloads__link {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 0.0625rem solid transparent;
    border-left-width: 0.25rem;
}

.downloads__label {
    font-weight: 700;
}

.downloads__hint {
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

/* ---------- Search ---------- */

.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-form__input {
    border: 0.0625rem solid var(--color-border);
}

.search-status {
    color: var(--color-muted);
}

/* 語法卡與運算子插入鈕同一列：左為 <details>（展開時往下長，按鈕不動），右為插入鈕 slot；極窄時按鈕換行至摘要下方 */
.search-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

/* 進階搜尋語法卡：原生 <details> 預設收合，只佔摘要一行；展開為三欄小表格（怎麼輸入／意思／例子）與一行備註 */
.search-tips {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.search-tips__summary {
    width: fit-content;
    cursor: pointer;
}

.search-tips__table {
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.search-tips__row > th,
.search-tips__row > td {
    padding: 0.25rem 1rem 0.25rem 0;
    font-weight: 400;
    text-align: left;
    vertical-align: baseline;
}

/* 要輸入的符號、例句與插入鈕皆以同一「鍵帽」樣式呈現，讓人一眼看出那是要打進搜尋框的東西 */
.search-tips__token,
.search-tips__example-text,
.search-operators__button {
    font-family: inherit;
    font-size: 0.95em;
    color: var(--color-text-soft);
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 0.35em;
    white-space: nowrap;
}

.search-tips__joiner {
    margin: 0 0.35em;
}

.search-tips__note {
    margin: 0.5rem 0 0;
}

/* 運算子插入鈕 slot：點擊把符號插入搜尋框游標處（site.js），不送出表單 */
.search-operators {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

.search-operators__button {
    padding: 0 0.6em;
    cursor: pointer;
}

.search-operators__button:hover,
.search-operators__button:focus-visible {
    color: var(--color-primary-deep);
    border-color: var(--color-primary);
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    margin-top: 2rem;
}

.site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1.25rem 1rem 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.site-footer a {
    color: var(--color-footer-link);
}

.site-footer p {
    margin: 0.35rem 0;
}

.site-footer [lang="en"] {
    color: var(--color-footer-text-soft);
    font-size: 0.85rem;
}

.site-footer .prose h2,
.site-footer h2 {
    color: var(--color-footer-text);
    border: none;
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    padding: 0;
}

/* ---------- 首頁頂部外部連結（site.externalLinks）：無標題、水平置中、永不換行；
   間距隨視窗寬度伸縮但不小於 1rem 避免誤按，視窗極窄時只縮圖不換行 ---------- */

.external-links {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 6vw, 2.5rem);
}

.external-links li {
    flex: 0 1 auto;
    min-width: 0;
}

.external-links img {
    display: block;
    width: 3.5rem;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* ---------- 批次下載工具（partials/batch-tool.html，內嵌於 pages.batchHostKey 所指資訊頁）：檔案類型單選 + 檔案總管式清單 + 複核取方塊 + 頁面內進度 ---------- */

.batch {
    display: block;
}

/* 檔案類型單選（PDF / MuseScore 原始檔）：標題下、工具列上的一列；初始選取由 batch-download.js 依設定注入 */
.batch__kinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
}

.batch__kinds-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.batch__kind {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.batch__kind-input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.batch__kind-text {
    font-size: 0.95rem;
}

/* 工具列黏頂，捲動長清單時全選／清除／下載與進度恆在視野內（偏移量為黏頂 header 的實際總高度） */
.batch__toolbar {
    position: sticky;
    top: calc(var(--header-stack-height) + 0.5rem);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--color-primary-tint);
    border-radius: var(--radius-sm);
}

.batch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.batch__action {
    background: var(--color-primary-deep);
}

/* 工具列按鈕採較小字級與方角，與清單密度一致（不用全膠囊） */
.batch__toolbar .button {
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 狀態列恆為一列：寬版吃掉按鈕群右側的剩餘寬度並靠右，內容不換行、文案溢出以省略號收尾
   只在未帶 hidden 時排版；否則作者 display 會蓋過 [hidden]，使進度條在閒置時恆顯示並跑 indeterminate 動畫 */
.batch__progress:not([hidden]) {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

/* 狀態列的三格（進度條／文案／動作鈕）在一次下載期間寬度恆定，字數與按鈕文字增減不推擠：
   文案格與動作格各以 grid 把全部候選疊在同一格（寬度 = 最寬者），只顯示當前者；hidden 一律以 visibility 隱藏而保留格位 */

/* 進度條屬裝飾，空間不足時絕對優先被壓：shrink 權重拉高使收縮幾乎全落在它身上，直到下限才輪到文案；
   訊息狀態（無進度可言）以 visibility 隱藏，格位仍在 */
.batch__progress-bar {
    display: block;
    flex: 0 100 12rem;
    min-width: 1.5rem;
    height: 0.75rem;
}

.batch__progress-bar[hidden] {
    visibility: hidden;
}

/* 文案格：當前文案與本次下載會出現的全部文案（batch-download.js 以最大計數填入）疊在同一格，格寬由最寬者決定；
   只在進度條已縮到下限後才截斷（最後防線） */
.batch__progress-label {
    display: grid;
    flex: 0 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.batch__progress-text {
    grid-area: 1 / 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    visibility: hidden;
}

.batch__progress-text.is-current {
    visibility: visible;
}

/* 動作格：取消與再次下載疊在同一格（寬度 = 較寬者），只在可按的狀態顯示；
   .button 的 display 會蓋過 [hidden]，此處刻意保留其排版、以 visibility 隱藏（不可見亦不可點、不入焦點順序） */
.batch__progress-actions {
    display: grid;
    flex: none;
}

.batch__progress-action {
    grid-area: 1 / 1;
    padding: 0.2rem 0.7rem;
    font-size: 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 0.0625rem solid var(--color-border);
}

.batch__progress-action[hidden] {
    visibility: hidden;
}

.batch__progress-action:hover {
    background: var(--color-primary-tint);
}

.batch-tree,
.batch-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 子層縮排並以左側細線表現階層（如檔案總管） */
.batch-sublist {
    margin-left: 1.5rem;
    padding-left: 0.5rem;
    border-left: var(--border-thin) solid var(--color-border);
}

.batch-node {
    margin: 0.15rem 0;
}

.batch-folder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.batch-check {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.batch-folder__toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.batch-folder__toggle:hover {
    background: var(--color-primary-tint);
}

.batch-folder__icon {
    color: var(--color-primary);
    font-size: 1.2rem;
}

.batch-folder__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.batch-folder__count {
    flex-shrink: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* 位於最左的展開指示：收合指向右、展開指向下（檔案總管慣例，沿用 chevron-down 圖示以旋轉呈現） */
.batch-folder__chevron {
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.batch-folder__toggle[aria-expanded="true"] .batch-folder__chevron {
    transform: rotate(0);
}

.batch-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.4rem;
}

.batch-file__link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--color-link);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch-file__link:hover {
    text-decoration: underline;
}

/* 每列各檔案類型各一個連結，只顯示目前單選的類型（hidden 由 batch-download.js 切換；author display 會蓋過 [hidden]，故明示收起） */
.batch-file__link[hidden] {
    display: none;
}

.batch-file__icon {
    color: var(--color-muted);
}

/* ---------- Responsive：站台唯一的斷點（窄版 ≤ 48rem、寬版自 48rem + 1/16rem 起，兩段互斥不重疊；
   不用範圍語法以相容舊版 Safari） ---------- */

@media (max-width: 48rem) {
    .nav-toggle {
        display: inline-flex;
    }

    .lightbox[open] {
        display: block;
    }

    .lightbox__image {
        width: 100%;
        max-width: none;
        max-height: none;
    }

    .site-nav {
        display: none;
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
    }

    .site-search {
        flex: 1 1 100%;
        order: 3;
    }

    .page {
        padding: 1.5rem;
    }

    .song-pager__title {
        display: none;
    }

    .song-pager__link {
        padding: 0.3rem 0.5rem;
    }

    /* 批次下載的狀態列在窄版獨占新的一列（仍恰為一列：不換行、溢出省略） */
    .batch__progress:not([hidden]) {
        flex-basis: 100%;
    }

    /* 語法卡在窄版改為每列兩行：符號與意思同行，例子獨佔下一行 */
    .search-tips__table,
    .search-tips__table > tbody {
        display: block;
    }

    .search-tips__row {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.75rem;
        padding: 0.35rem 0;
        border-top: var(--border-thin) solid var(--color-border);
    }

    .search-tips__row > th,
    .search-tips__row > td {
        padding: 0;
    }

    .search-tips__example {
        grid-column: 1 / -1;
    }
}

/* 寬版子選單為下拉（展開／收合一律由展開鍵點擊切換，與窄版同一套行為） */
@media (min-width: 48.0625rem) {
    .site-nav__link--group {
        width: auto;
    }

    .site-nav__sub {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 14rem;
        background: var(--color-surface);
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        box-shadow: var(--shadow);
        z-index: 120;
    }

    .site-nav__sub-link {
        color: var(--color-text);
        padding-left: 1rem;
    }

    .site-nav__sub-link:hover,
    .site-nav__sub-item.is-current > .site-nav__sub-link {
        background: var(--color-primary-tint);
        color: var(--color-primary-deep);
    }
}

/* ---------- Print ---------- */

@media print {
    .site-header,
    .site-footer,
    .section--player,
    .section--downloads,
    .section--score-info,
    .song-pager,
    .breadcrumbs,
    .skip-link,
    .lightbox-slot {
        display: none;
    }

    .page {
        box-shadow: none;
        padding: 0;
    }

    .score-pages {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .score-pages__image {
        border: none;
        page-break-inside: avoid;
    }
}