/* The console in other languages (docs/LOCALIZATION.md "Organiser console"): the language menu, and type for the
   languages the display font's Latin subset can't set. Every page with words loads it after its own stylesheet: the
   console (index.html), SHOW MARKER (marker.html), print.html and the broadcast (broadcast.html). print.html has no
   console.css, so the menu's colours carry their own fallbacks. */

/* The full Barlow Condensed (every Latin letter, Vietnamese included: Ấ Đ Ơ Ữ), for Vietnamese, which uses it for all
   its display type so no word mixes two fonts (scripts/make-web-fonts.py). A browser only downloads it when a page
   uses it. 500 sets as 600, and italic 700 as italic 800. */
@font-face { font-family: "Barlow Condensed Full"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-full-600.woff") format("woff"); }
@font-face { font-family: "Barlow Condensed Full"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-full-700.woff") format("woff"); }
@font-face { font-family: "Barlow Condensed Full"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-full-800i.woff") format("woff"); }
@font-face { font-family: "Barlow Condensed Full"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/barlow-condensed-full-900i.woff") format("woff"); }

/* MARK: The language menu (views/languageMenu.js): a globe and the language's code; the list names each language in
   itself, in the system font (which has every script). */

.lang-menu { position: relative; flex: none; }
.lang-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.6rem;
  padding: 0 0.85rem 0 0.7rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(6, 8, 26, 0.62);
  color: #fff;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-menu-button:hover, .lang-menu-button[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
.lang-menu-button:focus-visible { outline: none; box-shadow: var(--focus, 0 0 0 0.22rem #fff, 0 0 0 0.48rem rgba(255, 210, 26, 0.55)); }
.lang-menu-button .icon { width: 1.25em; height: 1.25em; opacity: 0.85; }
.lang-menu-list {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 13rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  border: 0.1rem solid rgba(255, 255, 255, 0.28);
  border-radius: 1rem;
  background: var(--glass, linear-gradient(180deg, rgba(24, 28, 70, 0.96), rgba(10, 12, 34, 0.97)));
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  color: #fff;
  animation: lang-menu-in 0.16s ease-out;
}
.lang-menu-list[hidden] { display: none; }
.lang-menu-item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.lang-menu-item:hover, .lang-menu-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.12); }
.lang-menu-item[aria-checked="true"] { color: var(--yellow, #ffd21a); font-weight: 800; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-0.3rem); } }

/* Where it sits: top right of the sign-in screens; in the console's top bar, SHOW MARKER's header and the print
   toolbar it's one more control in the row. */
.auth-lang { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 5; }
.print-lang .lang-menu-button { height: 2.7rem; border-radius: 0.8rem; border-width: 0.14rem; border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); }
@media (max-width: 560px) {
  /* A phone: the code alone (the globe says what it is), and the list in two columns under it. */
  .topbar-lang .lang-menu-button { padding: 0 0.6rem; gap: 0.25rem; }
  .lang-menu-list { display: grid; grid-template-columns: 1fr 1fr; min-width: 18rem; }
}

/* MARK: Type per language (as on arblast.io: deploy/www/site.css "Languages") */

/* Vietnamese, and the pseudo-language that tests it (?lang=en-XA): the full Barlow Condensed for all display type. */
:root:is(:lang(vi), :lang(en-XA)) { --display: "Barlow Condensed Full", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif; }
/* Chinese and Korean: Barlow Condensed for Latin letters and digits, then the platforms' own CJK fonts (Apple, Windows,
   Android / Noto), upright: CJK type is never slanted. */
:root:lang(zh-Hans) { --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC"; }
:root:lang(zh-Hant) { --cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC"; }
:root:lang(ko) { --cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", "Source Han Sans K"; }
:root:is(:lang(zh-Hans), :lang(zh-Hant), :lang(ko)) {
  --display: "Barlow Condensed", var(--cjk), sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, var(--cjk), "Helvetica Neue", Arial, sans-serif;
  font-synthesis: weight;
}
/* Printed bibs (drawn as SVG with the display font named in each text) follow the page's display type. */
:root:is(:lang(vi), :lang(en-XA), :lang(zh), :lang(ko)) svg text { font-family: var(--display); }
/* Stacked Vietnamese capitals and full-height CJK characters need more room between lines than English capitals. */
:is(:lang(vi), :lang(zh), :lang(ko)) :is(.display, .page-title, .auth-title, .marker-title) { line-height: 1.12; }
:is(:lang(zh), :lang(ko)) :is(.kicker, .wordmark-sub, .auth-brand-sub, .tab, .btn, .chip, .pill) { letter-spacing: 0.04em; }
/* Korean headings break between words (at spaces), as Korean is set. */
:lang(ko) :is(h1, h2, h3, .display) { word-break: keep-all; overflow-wrap: break-word; }
/* Long German and Dutch compounds break with a hyphen, not off the edge of a phone. */
:is(:lang(de), :lang(nl)) :is(h1, h2, h3, .display, .page-sub, .muted) { hyphens: auto; overflow-wrap: break-word; }