/* ── ZH Script Switcher — Frontend Styles v1.3 ── */

/* ── Container ── */
.zh-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: inherit;
    vertical-align: middle;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Shared button base ── */
.zh-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    outline: none;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.zh-btn:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
    border-radius: 3px;
}

/* ─────────────────────────
   STYLE 1 — TEXT  (繁 / 简)
   ───────────────────────── */
.zh-switcher--text .zh-btn {
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 3px;
    border-radius: 3px;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.zh-switcher--text .zh-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}
.zh-switcher--text .zh-btn.zh-active {
    opacity: 1;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 2px solid rgba(255,255,255,0.7);
}
.zh-switcher--text .zh-sep {
    font-size: 0.7em;
    opacity: 0.35;
    user-select: none;
    padding: 0 1px;
}

/* ─────────────────────────
   STYLE 2 — ICON  (繁 | 简)
   ───────────────────────── */
.zh-switcher--icon .zh-icon-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: inherit;
    opacity: 0.6;
    border: 1.5px solid transparent;
}
.zh-switcher--icon .zh-icon-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.25);
}
.zh-switcher--icon .zh-icon-btn.zh-active {
    opacity: 1;
    background: rgba(255,255,255,0.9);
    color: #333;
    border-color: rgba(255,255,255,0.9);
}

/* ─────────────────────────
   STYLE 3 — BOTH  (badge + label)
   ───────────────────────── */
.zh-switcher--both {
    gap: 4px;
}
.zh-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 3px;
    border-radius: 20px;
    font-size: 0.78em;
    background: rgba(255,255,255,0.12);
    color: inherit;
    opacity: 0.6;
    border: 1.5px solid transparent;
    line-height: 1.2;
}
.zh-badge-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.22);
}
.zh-badge-btn.zh-active {
    opacity: 1;
    background: rgba(255,255,255,0.9);
    color: #333;
    border-color: rgba(255,255,255,0.9);
}
.zh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.zh-badge-btn.zh-active .zh-badge {
    background: rgba(0,0,0,0.12);
}
.zh-label {
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ─────────────────────────
   Header placement helper
   ───────────────────────── */
.zh-header-right {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px;
}

/* ─────────────────────────
   Flash suppression during conversion
   ───────────────────────── */
.zh-converting * {
    transition: none !important;
}

/* ─────────────────────────
   Cross-platform font stack
   Ensures Simplified Chinese characters render in sans-serif on Windows
   (prevents fallback to SimSun/宋體 serif font).
   Covers both Traditional and Simplified glyphs in one unified stack.
   ───────────────────────── */
html,
body,
body * {
    font-family:
        /* System UI (Mac/iOS/Android) */
        -apple-system, BlinkMacSystemFont,
        /* Windows UI */
        "Segoe UI",
        /* Traditional Chinese — Mac/iOS, Windows */
        "PingFang TC", "Microsoft JhengHei", "微軟正黑體",
        /* Simplified Chinese — Mac/iOS, Windows (CRITICAL for CN script) */
        "PingFang SC", "Microsoft YaHei", "微軟雅黑",
        /* Android */
        "Noto Sans CJK TC", "Noto Sans CJK SC",
        /* Final sans-serif fallback — never allow serif */
        sans-serif !important;
}