/* SHIROFES OS — JA/EN toggle visibility rules.
   Default: JA visible, EN hidden. body.lang-en swaps them.
   ------------------------------------------------------ */

.en { display: none; }
.ja { display: inline; }

body.lang-en .ja { display: none; }
body.lang-en .en { display: inline; }

/* Toggle button chip label (`<span class="lang-ja">JA</span><span class="lang-en">EN</span>`) */
.lang-en { display: none; }
body.lang-en .lang-ja { display: none; }
body.lang-en .lang-en { display: inline; }

/* When a .ja / .en wrapper needs block-level layout, add `.i18n-block` alongside. */
.i18n-block.ja,
.i18n-block.en { display: none; }
.i18n-block.ja { display: block; }
body.lang-en .i18n-block.ja { display: none; }
body.lang-en .i18n-block.en { display: block; }

/* Standard pill-style toggle button — opt-in via .sh-lang-toggle */
.sh-lang-toggle {
    color: var(--text-primary, #fff);
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.sh-lang-toggle:active,
.sh-lang-toggle:focus-visible {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
}