/* The offer of the reader's own language (language.js): a small glass chip
   that comes down from under the navbar when the page is also in the language
   the reader prefers. It is not sticky: it sits at the top of the page and
   scrolls away with it. Nothing ever redirects; the reader chooses, or closes
   it, and either is remembered.

     <aside class="mk-lang" lang="cs" aria-label="Čeština">
       <svg class="mk-lang-globe">…</svg>
       <p class="mk-lang-text">Tahle stránka je i česky</p>
       <a class="mk-lang-go" href="/cs/" hreflang="cs">Přepnout</a>
       <button class="mk-lang-close" type="button" aria-label="Teď ne">…</button>
     </aside>

   Its look is the download pill's: the bar's glass (--mk-nav-light-bg in the
   light, --mk-nav-bg in the dark) and the bar's button (--mk-accent,
   --mk-accent-deep, --mk-cta-fg, --mk-lip). */

.mk-lang, .mk-lang *{box-sizing:border-box}
.mk-lang{
  position:absolute; z-index:49;           /* under the navbar (50), over the page */
  top:var(--mk-lang-top, 60px); left:0; right:0; margin-inline:auto; width:fit-content;
  max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  display:flex; align-items:center; gap:10px;
  padding:5px 5px calc(5px + var(--mk-lip, 0px)) 14px;
  border-radius:999px;
  font-family:var(--mk-font, inherit);
  /* the bar's glass laid twice: nearly solid, so the page's top line can't read through the chip's words */
  --_glass:var(--mk-nav-light-bg, rgba(250,250,252,.78));
  color:var(--mk-nav-light-fg, #1d1d1f);
  background:linear-gradient(var(--_glass), var(--_glass)), var(--_glass);
  -webkit-backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 10px 28px -8px rgba(0,0,0,.3);

  opacity:0; transform:translateY(-14px);
  transition:transform .55s var(--mk-ease, cubic-bezier(.22,.61,.36,1)), opacity .35s var(--mk-ease, ease);
}
.mk-lang.is-shown{opacity:1; transform:none}
@media (prefers-color-scheme:dark){
  .mk-lang{
    --_glass:var(--mk-nav-bg, rgba(8,8,11,.7));
    color:var(--mk-nav-fg, #f5f5f7);
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 10px 28px -8px rgba(0,0,0,.6);
  }
}

.mk-lang .mk-lang-globe{
  width:17px; height:17px; flex:none; opacity:.7;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.mk-lang .mk-lang-text{margin:0; min-width:0; font-size:14px; font-weight:600; line-height:1.25; letter-spacing:-.005em}
.mk-lang:lang(ko) .mk-lang-text{word-break:keep-all}

.mk-lang .mk-lang-go{
  flex:none; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 15px; border-radius:999px;
  font-size:14px; font-weight:var(--mk-cta-weight, 600); letter-spacing:var(--mk-cta-tracking, -.01em);
  color:var(--mk-cta-fg, #fff); text-decoration:none; white-space:nowrap;
  background:var(--mk-accent, #2f5fe0);
  box-shadow:0 var(--mk-lip, 0px) 0 var(--mk-accent-deep, #2049c2);
  transition:transform .14s var(--mk-ease, ease), box-shadow .14s var(--mk-ease, ease), background .25s var(--mk-ease, ease);
}
.mk-lang .mk-lang-go:hover{
  background:var(--mk-cta-hover, var(--mk-accent-deep, #2049c2));
  transform:translateY(calc(var(--mk-lip, 0px) / 2));
  box-shadow:0 calc(var(--mk-lip, 0px) / 2) 0 var(--mk-accent-deep, #2049c2);
}
.mk-lang .mk-lang-go:active{
  transform:translateY(var(--mk-lip, 0px)) scale(var(--mk-cta-press, .97));
  box-shadow:0 0 0 var(--mk-accent-deep, #2049c2);
}

.mk-lang .mk-lang-close{
  flex:none; width:36px; height:36px; margin-left:-4px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:inherit; opacity:.6;
  cursor:pointer; transition:opacity .2s, background .2s;
}
.mk-lang .mk-lang-close:hover{opacity:1; background:rgba(127,127,127,.16)}
.mk-lang .mk-lang-close svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.mk-lang .mk-lang-go:focus-visible, .mk-lang .mk-lang-close:focus-visible{outline:2px solid var(--mk-accent, #2f5fe0); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mk-lang{transform:none; transition:opacity .25s ease}
  .mk-lang .mk-lang-go{transition:none}
}
@media (forced-colors:active){
  .mk-lang{border:1px solid CanvasText}
}
@media print{
  .mk-lang{display:none}
}