/* Google Translate: the parts that are identical everywhere.

   Loaded by the dashboard shell, the auth pages and the public /ap
   site. Only two things belong in here: suppressing Google's injected
   chrome, and protecting the attribution. Both are correctness
   concerns, not style ones, and both are the kind of thing that rots if
   each context keeps its own copy.

   Trigger styling is deliberately NOT here. Each context styles its own
   against its own palette -- see google-translate.css (dashboard),
   auth-translate.css (sign-in/register) and ap/assets/css/translate.css
   (/ap). */

/* ================= Suppress Google's injected chrome ================= */

/* The top banner/toolbar.

   Two builds to cover. The legacy widget puts the banner in
   .goog-te-banner-frame directly. The current one wraps an iframe in a
   <div class="skiptranslate"> pinned fixed at top:0, and hangs its own
   *working* frames off <body> as separate iframe.skiptranslate elements
   carrying the same class.

   Hiding is safe for all of them -- the working frames are already 0x0
   and display:none. REMOVING them is not: taking any of Google's
   injected nodes out of the DOM stops translation dead and does it
   silently, so this is suppression by CSS only and kt-translate.js
   removes nothing. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate:not(#google_translate_element):not(.kt-translate-attribution),
.skiptranslate > iframe {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  top: -9999px !important;
}

/* Google pushes the document down by the banner height with an inline
   body{top:40px}. With the banner gone that is pure dead space. Reset
   here so the first paint is already correct; kt-translate.js then
   clears the inline property outright, because Google rewrites it on
   every translate and an overridden-but-present offset is not the same
   thing as a clean one. */
body {
  top: 0 !important;
}

/* The raw select. Hidden, not removed: it is the mechanism the custom
   trigger drives, so it has to stay in the DOM and stay functional. */
.goog-te-combo {
  display: none !important;
}

/* Hover tooltip and the highlight Google paints over translated text.
   Cosmetic injections, not attribution. */
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ================= Attribution =================

   Google's published requirements are stricter than "minimise it": the
   "powered by Google Translate" graphic must be displayed adjacent any
   translation results, must never be removed, obstructed, distorted or
   altered, and must be full and clearly visible.

   So the gadget renders in Google's own markup and styling. What each
   context controls is where it sits and the space around it, which is
   permitted. Do not add font-size/color/opacity/transform rules to
   .goog-te-gadget or its descendants. */

.kt-translate-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

/* The one exception, and it is a correction rather than a restyle.

   Google ships the mark as a 42x16 asset carrying width="37px"
   height="14px" and an inline padding-right:3px. Both the Crystal Sky
   template and /ap set a global `img { max-width: 100%; height: auto }`
   alongside `* { box-sizing: border-box }`; together those fold the
   padding into the declared width and rescale the height from it,
   drawing the trademark at about 81% of its native size.

   A shrunken trademark is exactly what the terms rule out, so the
   cascade is handed back with `revert` and the mark draws at whatever
   size Google specifies. Deliberately not hardcoded to a pixel size --
   pinning our own numbers would recreate the problem the day Google
   changes the asset. */
.kt-translate-attribution img {
  max-width: revert;
  width: revert;
  height: revert;
}

/* ================= Shared trigger behaviour =================
   Structure only -- no colour, no type. Every context needs the menu to
   be positioned and hideable in the same way; none of them should have
   to reinvent that. */

.kt-translate {
  position: relative;
  display: inline-block;
  text-align: left;
}

.kt-translate__trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.kt-translate__menu[hidden] {
  display: none !important;
}

.kt-translate__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kt-translate__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.kt-translate__check {
  flex: none;
  opacity: 0;
}

.kt-translate__option[aria-selected="true"] .kt-translate__check {
  opacity: 1;
}

.kt-translate.open .kt-translate__chevron {
  transform: rotate(180deg);
}