/* Language picker: a flag and the language's own name in the navbar, opening
   a list of every edition of the current page. Shared by every page, so the
   privacy policy, which has its own small stylesheet, carries it too. The
   summary keeps the browser's own disclosure triangle, which turns when the
   panel opens, and the panel hangs from the bar rather than the summary, the
   same pattern as the nfcmint.com family header. */
.lang {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  flex: none;
}
.lang > summary {
  display: list-item;
  list-style-position: inside;
  width: fit-content;
  min-height: 44px;
  padding: 12px 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
}
.lang > summary::after { content: none; }
.lang[open] > summary, .lang > summary:hover { color: var(--gold, var(--accent)); }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  vertical-align: top;
}
.lang-flag {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-panel {
  position: absolute;
  z-index: 120;
  top: 100%;
  right: 0;
  width: 220px;
  max-width: 100%;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.lang-panel > nav { display: grid; }
.lang-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.lang-panel a:last-child { border-bottom: 0; }
.lang-panel a:hover { color: var(--gold, var(--accent)); text-decoration: none; }
.lang-panel a[aria-current] {
  border-left: 3px solid var(--gold, var(--accent));
  padding-left: 5px;
  font-weight: 700;
}

/* The privacy policy has no navbar; a slim bar holds the way back and the
   picker. The bar is the panel's anchor there. */
.lang-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 20px 0;
}
.lang-bar .lang-home {
  font-weight: 600;
  font-size: 14px;
  color: var(--gold, var(--accent));
  text-decoration: none;
}
.lang-bar .lang-home:hover { text-decoration: underline; }

/* In the navbar the picker sits after the links; translated labels run
   long, so the brand never wraps and the links keep tight padding. The
   nav-wrap is positioned, so the panel lines up with the bar's right edge. */
.navbar .lang { margin-left: 12px; }
.navbar .nav-brand { white-space: nowrap; }
.navbar .lang-panel { right: 20px; }

/* Matches the hamburger breakpoint in css/style.css (1060px). */
@media (max-width: 1060px) {
  .navbar .nav-brand { order: 0; }
  .navbar .lang { order: 1; margin-left: auto; margin-right: 12px; }
  .navbar .nav-toggler { order: 2; }
}

/* The tight link row just above the hamburger breakpoint: the navbar
   picker shows the flag and the triangle alone, which leaves the links room
   in every language. The collapsed bar has room for the name again. */
@media (min-width: 1060.02px) and (max-width: 1160px) {
  .navbar .lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Phones: the flag and the triangle alone, the name stays for readers. */
@media (max-width: 480px) {
  .navbar .lang { margin-right: 8px; }
  .lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Chinese, Japanese, and Korean editions, as on Card Sense Trainer's site.
   Chinese and Japanese break lines by the strict rules, so small kana and
   closing punctuation never start a line, and Japanese headings, ledes,
   and intros break between phrases where the browser can find them. Korean
   keeps its words whole and breaks at the spaces. The display face is Great
   Circle Map's in every edition, and the system supplies the CJK characters
   it lacks. Display headings drop the negative tracking, which crowds CJK
   characters, and step down a size, since those characters fill the whole
   em square. */
html:lang(ja),
html:lang(zh) { line-break: strict; }
html:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:lang(ja) .section-title,
:lang(ja) .tagline,
:lang(ja) .lede,
:lang(ja) .section-intro,
:lang(ja) .card h3 { word-break: auto-phrase; }
:lang(ja) .section-title,
:lang(zh) .section-title,
:lang(ko) .section-title { font-size: 38px; letter-spacing: 0; }
:lang(ja) .tagline,
:lang(zh) .tagline,
:lang(ko) .tagline { font-size: 24px; letter-spacing: 0; }
/* AppleMyungjo, the Korean serif on Apple devices, sets loose at display
   size, so Korean headings keep a slight negative tracking. */
:lang(ko) .section-title,
:lang(ko) .tagline { letter-spacing: -0.04em; }

@media (max-width: 760px) {
  :lang(ja) .section-title,
  :lang(zh) .section-title,
  :lang(ko) .section-title { font-size: 32px; }
  :lang(ja) .tagline,
  :lang(zh) .tagline,
  :lang(ko) .tagline { font-size: 22px; }
}

@media (max-width: 480px) {
  :lang(ja) .section-title,
  :lang(zh) .section-title,
  :lang(ko) .section-title { font-size: 27px; }
  :lang(ja) .tagline,
  :lang(zh) .tagline,
  :lang(ko) .tagline { font-size: 20px; }
}