/*
 * Site translation, phase 1 (.ai/specs/labsite/i18n/DECISIONS-2026-10-31.md):
 * per-language font stacks, the tools-bar language selector, and the
 * "machine translation, under review" note.
 */

/* Per-language font stacks. The default stack puts Traditional Chinese fonts
   first, so Japanese and Simplified Chinese would otherwise get Taiwanese
   glyph shapes. Custom properties are re-declared together because
   --body-font etc. are resolved where they are declared. */
:lang(ko) {
    --font-sans: "IBM Plex Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

:lang(zh-Hant) {
    --font-sans: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

:lang(zh-Hans) {
    --font-sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:lang(ja) {
    --font-sans: "IBM Plex Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

:lang(ru),
:lang(kk),
:lang(vi) {
    --font-sans: "IBM Plex Sans", "Noto Sans", "Segoe UI", Arial, sans-serif;
}

:lang(ko),
:lang(zh-Hant),
:lang(zh-Hans),
:lang(ja),
:lang(ru),
:lang(kk),
:lang(vi) {
    --display-font: var(--font-sans);
    --body-font: var(--font-sans);
    --ui-font: var(--font-sans);
}

/* Language selector: far right of the navy tools bar. */
.lang-switch {
    position: relative;
    margin-left: 16px;
    font-family: var(--ui-font);
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    color: var(--panel-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    list-style: none;
}

.lang-switch__toggle::-webkit-details-marker {
    display: none;
}

.lang-switch__toggle::after {
    content: "\25BE";
    font-size: 0.7rem;
}

.lang-switch__toggle:hover,
.lang-switch[open] .lang-switch__toggle {
    color: var(--panel-text);
}

.lang-switch__label,
.lang-switch__code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lang-switch__name {
    font-family: var(--ui-font);
}

.lang-switch__list {
    position: absolute;
    z-index: 120;
    top: 100%;
    right: 0;
    min-width: 160px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--signal);
    background: var(--panel);
    box-shadow: 8px 8px 0 rgb(16 33 59 / 16%);
    list-style: none;
}

.lang-switch__list a {
    display: block;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--panel-muted);
    font-family: var(--ui-font);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.lang-switch__list a:hover {
    color: var(--panel-text);
    text-decoration: underline;
}

.lang-switch__list a[aria-current="true"] {
    background: var(--panel-secondary);
    border-left: 3px solid var(--signal);
    color: var(--panel-text);
}

/* Review note and the "/"-only suggestion sit at the far left of the tools bar,
   away from the tools links (order) with the bar's 16px gap before them. */
.mt-notice,
.language-suggestion {
    order: -1;
    flex: 0 1 auto;
    margin: 0 auto 0 0;
    padding-right: 16px;
    color: var(--panel-muted);
    font-family: var(--ui-font);
    font-size: 0.75rem;
    line-height: 1.4;
}

.mt-notice::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--signal);
    vertical-align: 1px;
}

.language-suggestion a {
    color: var(--signal);
    font-weight: 600;
}

@media (max-width: 760px) {
    .utility-inner {
        flex-wrap: wrap;
    }

    .lang-switch {
        margin-left: auto;
    }

    .lang-switch__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lang-switch__code {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .mt-notice__more {
        display: none;
    }

    .mt-notice,
    .language-suggestion {
        flex-basis: 100%;
        order: 3;
        padding: 4px 0 0;
    }
}