/* ============================================================
   Fable TRANSLATE - frontend
   Full-width translation notice above the description
   (item_badge.php, placed by the FABLE theme in item.php).

   Quiet gray band in the FABLE house style: rounded corners, no
   border, muted text, and one sentence whose last words are the
   underlined action that switches between the translation and the
   original. Light mode is the default; the theme marks dark mode
   with html[data-theme="dark"], so only the colours are re-declared
   there.
   ============================================================ */

.ftr-translated {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f5f5f5;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 20px;
}

.ftr-translated-icon {
  display: block;
  flex: 0 0 auto;
  margin-top: 1px;
  opacity: .8;
}

/* One running line: the action follows the sentence immediately and wraps
   with it. While the visitor reads the original the sentence is empty and
   only the action is left. */
.ftr-translated-text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.ftr-translated-message:empty {
  display: none;
}

/* The action is a button for keyboard and screen-reader semantics, but it
   reads as the link at the end of the sentence. The FABLE theme floats every
   button left ("button, .btn { float: left }" in main.css), which would pull
   the action in front of the sentence - hence the explicit inline reset. */
.ftr-translated-badge {
  display: inline;
  float: none;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.ftr-translated-badge:hover,
.ftr-translated-badge:focus-visible {
  color: #1e1e1e;
}

/* While the on-demand translation is running the action is inert; an error
   is written into the sentence in front of it. */
.ftr-translated-badge[disabled] {
  cursor: default;
  opacity: .65;
  text-decoration: none;
}

#ftr-item-desc-alt[hidden] {
  display: none;
}

@media screen and (max-width: 600px) {
  .ftr-translated {
    gap: 8px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 19px;
  }
}

/* ---------------- dark mode (FABLE) ---------------- */

html[data-theme="dark"] .ftr-translated {
  background: var(--fd-surface-2, #22262b);
  color: var(--fd-text-muted, #a6adb6);
}

html[data-theme="dark"] .ftr-translated-badge:hover,
html[data-theme="dark"] .ftr-translated-badge:focus-visible {
  color: var(--fd-text, #e2e6ea);
}