/* bch2.org language picker page, v1 (/assets/editorial/language.v1.css)
   Loaded after bch2.v1.css on language.html only. Design-system tokens only; no new colours,
   fonts, radii, shadows or spacing values.

   language-picker.js renders into #langList:
     <li><a href="#" data-lang="de" [class="active"]><span>Deutsch</span>
         <span class="lang-code">de</span> | <span class="check">✓</span></a></li> */

/* Short page: the footer sits at the bottom of the window instead of mid-screen. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.lang-page { flex: 1 0 auto; }

.lang-body { padding-block: var(--space-xl) var(--section-pad); }

/* The list: link-list rows, laid out as a grid of equal cells (1 / 2 / 5 columns). */
.lang-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-strong);
}
.lang-list > li { min-width: 0; border-bottom: var(--rule); }
.lang-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.9375rem;
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.4;
  text-decoration: none;
}
.lang-list a:hover { color: var(--green); }
.lang-list a:focus-visible { outline-offset: 2px; }
.lang-list .lang-code {
  flex: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.lang-list a:hover .lang-code { color: var(--green); }

/* Current language: green name, and the script's check mark drawn as a crisp icon at the size
   of the code labels. The glyph stays in the text for assistive technology. */
.lang-list a.active { color: var(--green); font-weight: 500; }
.lang-list .check {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 4' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E");
  flex: none;
  align-self: center;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-color: var(--green);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

@media (min-width: 48rem) {
  .lang-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80rem) {
  .lang-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Back link after the list (the look is the shared .back-link in bch2.v1.css). */
.lang-body .back-link { margin-top: var(--space-l); }

@media (forced-colors: active) {
  .lang-list .check { forced-color-adjust: none; background-color: LinkText; }
}