/* =====================================================================
   LANGUAGE TOGGLE  (lt-*)

   Small segmented JP | EN pill for the site nav, sitting left of the
   CTA. A white thumb sits under the current language; the other side is
   muted. Portable and namespaced: it does not touch the shared
   .lang-switcher dropdown, so pages can move over one at a time
   (trial: RPO pillar).

   Markup: two real links (crawlable, hreflang) plus one thumb span.
   lang-toggle.js slides the thumb across before following the link.
   Hidden <=860px like the old switch.
===================================================================== */
.lt-toggle{
  --lt-w:46px;
  position:relative;
  display:inline-grid;
  grid-template-columns:var(--lt-w) var(--lt-w);
  gap:2px;
  margin-right:6px;
  padding:2px;
  border-radius:999px;
  background:#f5f6f7;
}
.lt-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:var(--lt-w);
  height:calc(100% - 4px);
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(60, 64, 67, .14);
  transition:transform .22s cubic-bezier(.3, .7, .2, 1);
}
.lt-toggle[data-active="en"] .lt-thumb{ transform:translateX(calc(var(--lt-w) + 2px)); }

.lt-opt{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:26px;
  border-radius:999px;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#80868b;
  text-decoration:none;
  transition:color .15s ease;
}
.lt-opt img{
  width:12px;
  height:12px;
  flex-shrink:0;
  opacity:.6;
  filter:saturate(.6);
  transition:opacity .15s ease, filter .15s ease;
}
.lt-opt:hover{ color:#3c4043; }
.lt-opt:hover img{ opacity:.9; filter:none; }
.lt-opt[aria-current="true"]{ color:#3c4043; }
.lt-opt[aria-current="true"] img{ opacity:1; filter:none; }
.lt-opt:focus-visible{ outline:2px solid #1a73e8; outline-offset:1px; }

/* tight desktop widths: drop the flags so the nav keeps its old width */
@media (max-width:1100px){
  .lt-toggle{ --lt-w:32px; margin-right:0; }
  .lt-opt img{ display:none; }
}
@media (max-width:860px){
  .nav-actions .lt-toggle{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lt-thumb{ transition:none; }
}
