/* ══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   Shared verbatim by pranaymahendrakar.com, research.* and learn.*.
   Those three do not share a stylesheet or a token vocabulary, so every
   colour here resolves through a chain: this site's token, then the other
   site's equivalent, then a literal. A copy dropped into a codebase that
   defines neither still renders correctly.
   ══════════════════════════════════════════════════════════════ */

.gt {
  /* main + research speak --fg/--panel/--line/--cyan; learn speaks
     --ink/--bg-soft/--rule/--accent and flips them for light and dark. */
  --gt-ink:     var(--fg-2,  var(--ink-soft,  #A6ABBF));
  --gt-ink-hi:  var(--fg,    var(--ink,       #EEF0F7));
  --gt-dim:     var(--fg-3,  var(--ink-faint, #818799));
  --gt-line:    var(--line,  var(--rule,      rgba(128,128,128,.22)));
  --gt-line-hi: var(--line-2,var(--rule,      rgba(128,128,128,.34)));
  --gt-panel:   var(--panel, var(--bg-soft,   rgba(128,128,128,.07)));
  --gt-panel-2: var(--panel-2, var(--bg-sunken, rgba(128,128,128,.12)));
  --gt-surface: var(--bg-2,  var(--bg,        #080A11));
  --gt-accent:  var(--cyan,  var(--accent,    #22D3EE));
  --gt-accent-8: rgba(34, 211, 238, .10);   /* replaced below where supported */
  --gt-radius:  var(--r, 14px);
  --gt-mono:    var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --gt-ease:    var(--ease, cubic-bezier(.16, 1, .3, 1));

  position: relative;
  display: none;            /* the script reveals it; see .gt-ready */
}

/* Revealed by lang.js rather than by an html.js class, because the three
   sites do not agree on how they mark scripting as available. Without the
   script the button would open a menu that was never populated. */
.gt.gt-ready { display: block; }

/* A tint derived from whichever accent the host site resolved. Guarded so an
   engine without color-mix keeps a literal rather than dropping the whole
   declaration and painting the panel transparent. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .gt { --gt-accent-8: color-mix(in srgb, var(--gt-accent) 9%, transparent); }
}

/* ── the pill ───────────────────────────────────────────────── */
.gt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  font: inherit;
  font-family: var(--gt-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gt-ink);
  background: var(--gt-panel);
  border: 1px solid var(--gt-line-hi);
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s var(--gt-ease), border-color .25s var(--gt-ease),
              background .25s var(--gt-ease), box-shadow .25s var(--gt-ease);
}
.gt-btn:hover,
.gt-btn[aria-expanded="true"] {
  color: var(--gt-accent);
  border-color: var(--gt-accent);
}
.gt-btn[aria-expanded="true"] { background: var(--gt-accent-8); }
.gt-globe { width: 15px; height: 15px; flex: none; }
.gt-caret { width: 10px; height: 10px; flex: none; opacity: .6; transition: transform .25s var(--gt-ease); }
.gt-btn[aria-expanded="true"] .gt-caret { transform: rotate(180deg); }
.gt-code  { font-weight: 500; min-width: 1.6em; text-align: left; }

/* a translation is live — the control should not read as dormant */
.gt-live .gt-btn {
  color: var(--gt-accent);
  border-color: var(--gt-accent);
  background: var(--gt-accent-8);
}

/* Google's script is a third party on an otherwise first-party page. Say so
   while it is in flight rather than leaving a button that looks inert. */
.gt-busy .gt-globe { animation: gtSpin 1s linear infinite; }
@keyframes gtSpin { to { transform: rotate(360deg); } }
.gt-busy .gt-list { pointer-events: none; opacity: .5; }

/* ── the panel ──────────────────────────────────────────────── */
.gt-pop[hidden] { display: none; }
.gt-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: 276px;
  max-width: calc(100vw - 32px);
  color: var(--gt-ink);
  background: var(--gt-surface);
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);   /* legible over white and over near-black */
  overflow: hidden;
  transform-origin: top right;
  animation: gtIn .2s var(--gt-ease) both;
}
@keyframes gtIn { from { opacity: 0; transform: translateY(-7px) scale(.97); } }

.gt-head {
  padding: 14px 16px 9px;
  font-family: var(--gt-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gt-dim);
}
.gt-list {
  max-height: min(58vh, 372px);
  padding: 0 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gt-line-hi) transparent;
}
.gt-list::-webkit-scrollbar { width: 8px; }
.gt-list::-webkit-scrollbar-thumb {
  background: var(--gt-line-hi);
  border: 2px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}

.gt-o {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  color: var(--gt-ink);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gt-o:hover,
.gt-o:focus-visible { background: var(--gt-panel-2); color: var(--gt-ink-hi); }
.gt-o[aria-selected="true"] { color: var(--gt-accent); background: var(--gt-accent-8); }
.gt-o-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-o-c {
  flex: none;
  font-family: var(--gt-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gt-dim);
}
.gt-o[aria-selected="true"] .gt-o-c { color: var(--gt-accent); opacity: .75; }
.gt-tick { width: 13px; height: 13px; flex: none; opacity: 0; }
.gt-o[aria-selected="true"] .gt-tick { opacity: 1; }

.gt-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--gt-line);
  font-family: var(--gt-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--gt-dim);
}

/* Shown only when the third-party script never arrives. Every major browser
   ships its own page translation, so the dead end points at that instead of
   apologising and stopping. */
.gt-err { display: none; margin: 0; padding: 2px 16px 16px; font-size: 13px; line-height: 1.5; color: var(--gt-dim); }
.gt-dead .gt-list, .gt-dead .gt-foot { display: none; }
.gt-dead .gt-err  { display: block; }

@media (max-width: 420px) { .gt-pop { width: min(264px, calc(100vw - 32px)); } }
@media (prefers-reduced-motion: reduce) {
  .gt-pop { animation: none; }
  .gt-busy .gt-globe { animation: none; }
}

/* ══════════ GOOGLE'S OWN FURNITURE ══════════
   Keep the engine, drop the chrome. */

/* Clipped rather than display:none — the <select> Google builds has to stay
   laid out for a dispatched change event to take effect. */
#gtHost {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The banner iframe's own class is generated and changes between builds, so
   match it by position. Note this is deliberately NOT a blanket
   `.skiptranslate` rule: that class also lands on Google's gadget wrapper,
   and hiding that outright stops the select from firing. */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }

.goog-te-gadget { font-size: 0 !important; line-height: 0 !important; }
.goog-te-gadget > span, .goog-logo-link, .goog-te-gadget-icon { display: none !important; }

/* Google writes body{top:40px} inline to clear a banner it is not showing,
   and html{height:100%}, which turns html from auto-height into
   viewport-height. Both are plain inline styles with no !important, so one
   author rule outranks them permanently. */
body { top: 0 !important; position: static !important; }
html { height: auto !important; }

/* It also paints a highlight behind every translated run on hover. */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}