/* Language switcher. It joins each page's own controls - see js/i18n.js.
   A stylesheet rather than an injected <style>: the pages' security policy
   allows styles from this site only, and an inline block is refused. */

#langgrp { display: flex; align-items: center; gap: .5rem; }
#langgrp .lang-btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0;
  line-height: 1; cursor: pointer; transition: color .2s;
  -webkit-appearance: none; appearance: none;
}
#langgrp .sep { opacity: .45; user-select: none; pointer-events: none; }
#langgrp .lang-btn:hover { color: var(--ink, #1a1a1a); }
#langgrp .lang-btn:focus-visible { outline: 1px solid var(--oxide, #b0532c); outline-offset: 3px; }
#langgrp .lang-btn.on {
  color: var(--ink, #1a1a1a);
  text-decoration: underline; text-decoration-color: var(--oxide, #b0532c);
  text-decoration-thickness: 1px; text-underline-offset: .4em;
}

/* case pages: directly under "The record", in its type */
#langgrp.langgrp--rail {
  flex-direction: column; align-items: flex-start; gap: .45rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: .55rem; border-bottom: 1px solid var(--rule-hair);
}
#langgrp.langgrp--rail .sep { display: none; }
@media (max-width: 640px) {
  #langgrp.langgrp--rail { flex-direction: row; align-items: center; border-bottom: 0; padding-bottom: 0; white-space: nowrap; }
  #langgrp.langgrp--rail .sep { display: inline; }
}

/* home page: a short column at the foot of the depth gauge, in the type of Agency and Origin */
#langgrp.langgrp--gauge {
  flex-direction: column; gap: .55rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--ink-faint);
  padding-top: .7rem; border-top: 1px solid var(--rule-hair);
}
@media (max-width: 640px) {
  #langgrp.langgrp--gauge { font-size: .5rem; letter-spacing: .06em; gap: .45rem; }
}

/* field report: its own bar and accent */
#langgrp.langgrp--bar { gap: 9px; }
#langgrp.langgrp--bar .lang-btn.on { color: var(--accent, #F5A623); text-decoration: none; }
#langgrp.langgrp--bar .sep { font-family: var(--mono, monospace); font-size: 10px; opacity: .4; }

/* nowhere to join: stand alone, top right */
#langgrp.langgrp--float {
  position: fixed; top: 14px; right: 16px; z-index: 9999;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .2em;
}
@media print { #langgrp { display: none; } }