/* storagediag.html and its nine language versions (tools/node/site-storagediag.mjs, docs/site/storagediag.md):
   the language nav under the bar, and what the translated pages need that the English one does not.
   site.css stays shared: nothing here changes another page. */

/* ── the page in every language: one quiet line above the hero, the current language marked ── */
.sd-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.sd-langs a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    color 0.35s var(--ease-seat),
    border-color 0.35s var(--ease-seat);
}
.sd-langs a:hover,
.sd-langs a:focus-visible {
  color: var(--led);
}
.sd-langs a[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--led);
}
/* the two CJK names in the nav take their own region's glyphs on every page */
.sd-langs a[lang='ja'] {
  font-family:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP',
    'Noto Sans CJK JP', sans-serif;
}
.sd-langs a[lang='zh-TW'] {
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}

/* ── Japanese and Traditional Chinese: the Plex faces have no CJK glyphs, so each page names its fallbacks
   (the Latin words keep Plex), and the wide letter-spacing of the uppercase labels goes, since CJK has no case ── */
:root:lang(ja) {
  --cjk:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP',
    'Noto Sans CJK JP';
}
:root:lang(zh-TW) {
  --cjk: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC';
}
:root:lang(ja),
:root:lang(zh-TW) {
  --sans: 'IBM Plex Sans', var(--cjk), ui-sans-serif, system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', var(--cjk), ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, var(--cjk), monospace;
}
:lang(ja)
  :is(
    .chip,
    .sd-ff,
    .eyebrow h2,
    .mod-brow,
    .mod-nm small,
    .mod-caps-h,
    .plan .pn,
    .plan .pp small,
    .get-now .sub,
    footer .un
  ),
:lang(zh-TW)
  :is(
    .chip,
    .sd-ff,
    .eyebrow h2,
    .mod-brow,
    .mod-nm small,
    .mod-caps-h,
    .plan .pn,
    .plan .pp small,
    .get-now .sub,
    footer .un
  ) {
  letter-spacing: 0.04em;
}