/* Locale-only additions. Latin pages keep the original house typography. */
:lang(ja), :lang(ko), :lang(zh-Hans) {
    --font-body: system-ui, -apple-system, "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans SC", sans-serif;
    --font-serif: "Noto Serif CJK JP", "Noto Serif CJK KR", "Noto Serif SC", ui-serif, serif;
}
:lang(ar) {
    --font-body: "Noto Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
    --font-serif: "Noto Naskh Arabic", "Geeza Pro", Tahoma, serif;
}
:lang(hi) {
    --font-body: "Noto Sans Devanagari", "Kohinoor Devanagari", Mangal, system-ui, sans-serif;
    --font-serif: "Noto Serif Devanagari", "Kohinoor Devanagari", Mangal, serif;
}

.language-footer {
    position: relative;
    flex: 0 0 auto;
    z-index: 70;
    font: 500 9px/1 var(--font-body, system-ui, sans-serif);
    color: inherit;
}
.language-footer details { position: relative; }
.language-footer summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    grid-template-columns: auto 5px;
    place-content: center;
    align-items: center;
    gap: 3px;
    padding: 0;
    background: transparent;
    color: inherit;
    letter-spacing: .12em;
    border: 1px solid currentColor;
    border-radius: 0;
    text-decoration: none;
}
.language-footer summary::-webkit-details-marker { display: none; }
.language-footer summary::before {
    content: '';
    position: absolute;
    inline-size: 44px;
    block-size: 44px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.language-footer summary::after {
    content: '';
    inline-size: 4px;
    block-size: 4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 160ms ease;
}
.language-footer details[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.language-footer summary:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.language-footer details > div {
    position: absolute;
    z-index: 2;
    inset-block-end: calc(100% + 6px);
    inset-inline-end: 0;
    display: grid;
    min-width: 9.5rem;
    max-height: min(70vh, 28rem);
    overflow: auto;
    padding: .4rem 0;
    border: 0;
    border-block: 1px solid rgba(66, 20, 30, .32);
    border-radius: 0;
    background: #f7f5f1;
    color: #42141e;
    box-shadow: none;
}
.language-footer a { position: relative; color: inherit; padding: .65rem 1rem; text-decoration: none; white-space: nowrap; }
.language-footer a[aria-current="page"] { font-weight: 700; }
.language-footer a[aria-current="page"]::before { content: ''; position: absolute; inset-inline-start: .45rem; inset-block: .55rem; border-inline-start: 1px solid currentColor; }
.turn-hint:has(.language-footer--cover) {
    inline-size: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.language-footer--cover { color: #e8c7c3; }
.language-footer--cover summary {
    inline-size: 34px;
    block-size: 34px;
    border-color: rgba(232, 199, 195, .72);
}
[dir="ltr"] .language-footer--cover details > div,
[dir="rtl"] .language-footer--cover details > div {
    left: auto;
    right: 0;
}
[dir="rtl"] .language-footer--leaf details > div {
    left: 0;
    right: auto;
}
.language-footer--leaf {
    margin-inline-start: 6px;
    opacity: .72;
}
.language-footer--leaf summary {
    font-size: 9px;
    border-color: currentColor;
}
.leaf-foot:has(.language-footer--leaf) {
    align-items: center;
    justify-content: flex-start;
}
.leaf-foot:has(.language-footer--leaf) .leaf-foot__contents { margin-inline-start: auto; }
.language-suggestion { position: fixed; inset-inline: 1rem; inset-block-end: 3.2rem; z-index: 10001; max-width: 34rem; margin-inline: auto; padding: .9rem 1rem; background: #f7f5f1; color: #42141e; border: 1px solid rgba(66,20,30,.3); box-shadow: 0 8px 30px rgba(0,0,0,.2); font: 500 14px/1.4 var(--font-body, system-ui, sans-serif); }
.language-suggestion p { margin: 0 0 .7rem; }
.language-suggestion div { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.language-suggestion a, .language-suggestion button { color: inherit; font: inherit; background: none; border: 0; padding: .25rem 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

[dir="rtl"] .prose,
[dir="rtl"] .note-title,
[dir="rtl"] .locations-intro,
[dir="rtl"] .location-details,
[dir="rtl"] .locations-directory,
[dir="rtl"] .read-nav { text-align: start; }
[dir="rtl"] .prose { hyphens: none; }
[dir="rtl"] .credit-vertical { inset-inline-start: 6px; inset-inline-end: auto; }
[dir="rtl"] .read-nav { direction: rtl; }

/* StPageFlip 2.0.7 has no RTL setting. Keep its page geometry LTR so the
   first leaf stays on the right, then mirror every reader-facing control. */
[dir="rtl"] #book { direction: ltr; }
[dir="rtl"] #book .page { direction: rtl; }
[dir="rtl"] #book .turn-hint { inset-inline-start: 5%; inset-inline-end: auto; }
[dir="rtl"] #book .page[class~="--left"] .folio { right: 7.2%; left: auto; }
[dir="rtl"] #book .page[class~="--right"] .folio { left: 7.2%; right: auto; }
[dir="rtl"] .read-nav { direction: ltr; }
[dir="rtl"] .read-nav > * { direction: rtl; }

@media (max-width: 700px) {
    .language-footer details > div { max-height: 55vh; }
}