/* Google Translate: the auth pages' trigger.

   Shares the markup and the controller with the dashboard, but not the
   look. The dashboard control is built from the --dash-* theme tokens
   and has a dark mode to satisfy; sign-in and register have neither.
   They have the Phase 8 auth language instead: --base navy on a light
   form panel, Onest, hairline borders, generous radius. Copying the
   Ledger Line pill across would have imported a token system these
   pages do not load, and it would have rendered unstyled.

   Banner suppression and attribution protection come from
   assets/global/css/kt-translate-core.css. */

.auth-translate {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 40;
}

.auth-translate .kt-translate__trigger {
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid hsl(var(--base) / 0.16);
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: hsl(var(--base));
  font-family: "Onest", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 1px 2px hsl(var(--base) / 0.06), 0 8px 20px -14px hsl(var(--base) / 0.4);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.auth-translate .kt-translate__trigger:hover {
  border-color: hsl(var(--base) / 0.34);
  background: hsl(0 0% 100%);
}

.auth-translate .kt-translate__trigger:focus-visible {
  outline: 2px solid hsl(var(--base) / 0.5);
  outline-offset: 2px;
}

.auth-translate .kt-translate__trigger > svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: hsl(var(--base) / 0.62);
}

.auth-translate .kt-translate__chevron {
  width: 13px !important;
  height: 13px !important;
  transition: transform 0.18s ease;
}

.auth-translate .kt-translate__label {
  max-width: 9ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- Menu ---- */

.auth-translate .kt-translate__menu {
  min-width: 212px;
  padding: 6px;
  border: 1px solid hsl(var(--base) / 0.12);
  border-radius: 14px;
  background: hsl(0 0% 100%);
  box-shadow:
    0 1px 2px hsl(var(--base) / 0.06),
    0 10px 24px -14px hsl(var(--base) / 0.35),
    0 30px 60px -40px hsl(var(--base) / 0.5);
  max-height: min(64vh, 420px);
  font-family: "Onest", sans-serif;
}

.auth-translate .kt-translate__option {
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: hsl(var(--base));
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
  transition: background-color 0.14s ease;
}

.auth-translate .kt-translate__option:hover,
.auth-translate .kt-translate__option:focus-visible {
  background: hsl(var(--base) / 0.07);
  outline: none;
}

.auth-translate .kt-translate__check {
  width: 15px;
  height: 15px;
  color: hsl(var(--base-two));
}

.auth-translate .kt-translate__option[aria-selected="true"] {
  font-weight: 600;
}

/* Same standing disclosure as the dashboard, and sticky for the same
   reason: the list scrolls, and a disclosure sliced through the middle
   at the scroll edge reads as a rendering fault. */
.auth-translate .kt-translate__note {
  position: sticky;
  bottom: -6px;
  z-index: 1;
  margin: 6px -6px -6px;
  padding: 8px 10px 10px;
  border-top: 1px solid hsl(var(--base) / 0.12);
  border-radius: 0 0 13px 13px;
  background: hsl(0 0% 100%);
  color: hsl(var(--base) / 0.62);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---- Attribution ----

   Auth pages have no footer to put the mark in, and a Google badge
   floating permanently over a sign-in form is noise when nothing has
   been translated. Google's requirement is that the mark appear
   adjacent to translation RESULTS, so it is shown exactly when there
   are results: the widget stamps .translated-ltr/-rtl on <html>.

   The container stays in the DOM either way -- it is where Google
   renders the gadget and the <select> the trigger drives. Hiding it
   while idle is already proven safe by the dashboard, where the mobile
   footer does the same thing. */
.auth-translate-attribution {
  display: none;
  position: fixed;
  /* Bottom-LEFT, not right. The auth layout has a fixed .scroll-top
     button at right:30px bottom:30px with z-index 99, and placing the
     mark on that side put the button squarely over the word
     "Translate" -- partially covering the trademark, which is the one
     thing the attribution terms name outright. Raising z-index would
     have fixed the stacking and still left the two overlapping; moving
     to the opposite corner is the only version with no collision at
     any viewport width. */
  left: 18px;
  bottom: 14px;
  z-index: 39;
  padding: 6px 10px;
  border-radius: 10px;
  background: hsl(0 0% 100% / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -14px hsl(var(--base) / 0.45);
}

html.translated-ltr .auth-translate-attribution,
html.translated-rtl .auth-translate-attribution {
  display: flex;
}

@media screen and (max-width: 575px) {
  .auth-translate {
    top: 12px;
    right: 12px;
  }

  .auth-translate .kt-translate__label {
    display: none;
  }

  .auth-translate .kt-translate__trigger {
    padding: 0 10px;
  }

  .auth-translate .kt-translate__menu {
    position: fixed;
    top: 58px;
    right: 12px;
    left: 12px;
    min-width: 0;
  }

  .auth-translate-attribution {
    left: 12px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-translate .kt-translate__trigger,
  .auth-translate .kt-translate__chevron,
  .auth-translate .kt-translate__option {
    transition: none;
  }
}

/* ---- Floating labels under translation ----

   The Phase 8 floating label is a single-line notch sitting centred on
   the field's top border. That holds for the English copy -- "Username,
   Email, or Account Number" measures 202px on one 16px line -- but
   translation makes strings longer, and the Spanish rendering ("Nombre
   de usuario, correo electronico o numero de cuenta") is 308px and
   wraps to two lines. Centred on the border, a two-line label spills
   above and below it and collides with the input outline.

   Measured, not assumed: EN 1 line / 16px tall, ES 2 lines / 32px tall
   at the same 1280px width, so this is caused by enabling translation
   rather than a pre-existing responsive weakness.

   Held to one line with an ellipsis, clamped to the field minus the
   icon gutter. The label is still fully readable in its resting state
   inside the field; only the shrunken floated state truncates, which is
   the normal behaviour of this pattern. Harmless in English, where
   nothing reaches the clamp. */
.auth-v2 .form-group--floating .form--control:focus ~ .form-label,
.auth-v2 .form-group--floating .form--control:not(:placeholder-shown) ~ .form-label {
  max-width: calc(100% - 56px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}