/* English Energy — hover a word or a line for its sound and its Ukrainian.
   Same idea as the word lookup of the French course, with two differences:
   the direction is English → Ukrainian, and the voice is VivaTTS (the Google
   Studio voice the lessons already speak with), not the browser engine. */

/* ── the toolbar above the first text ─────────────────────────────── */
.lk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.2rem 0 1rem;
}
.lk-toggle {
  border: 1.5px solid var(--color-gold); background: transparent;
  color: var(--color-gold-dark); font-family: inherit; font-weight: 700; font-size: 0.82rem;
  padding: 0.4rem 0.9rem; border-radius: 100px; cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.lk-toggle:hover { background: rgba(212, 168, 67, 0.16); }
.lk-toggle[aria-pressed="true"] { background: var(--color-gold); color: #fff; }
.lk-tip { font-size: 0.83rem; color: var(--color-text-light); line-height: 1.5; flex: 1; min-width: 220px; }

/* ── words and sentences inside a lookup text ─────────────────────── */
[data-lookup] .lk-w { cursor: pointer; border-radius: 3px; }
[data-lookup] .lk-w:hover, [data-lookup] .lk-w.active { background: rgba(212, 168, 67, 0.26); }
[data-lookup] .lk-s { border-radius: 4px; transition: background 0.12s; }
[data-lookup] .lk-s:hover { background: rgba(212, 168, 67, 0.09); }

/* A phrase the teacher glossed keeps its dotted underline, and the card shows
   her wording rather than a machine translation. The old black tooltip stands
   down while the lookup is on: it would sit on top of the card saying the same
   thing, and the card also speaks the phrase and can save it. */
body.lk-on [data-lookup] .w:hover::after,
body.lk-on [data-lookup] .w.show::after { opacity: 0; visibility: hidden; }
[data-lookup] .w { cursor: pointer; }
[data-lookup] .w:hover, [data-lookup] .w.active { background: rgba(212, 168, 67, 0.26); border-radius: 3px; }
[data-lookup] .w:hover .lk-w, [data-lookup] .w.active .lk-w { background: transparent; }

/* ── floating speaker for the hovered line ────────────────────────── */
/* position: fixed, so it never takes part in the layout of the text and
   cannot push the words apart. */
.lk-chip {
  position: fixed; z-index: 118;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 1.5px solid var(--color-gold); border-radius: 50%;
  background: var(--color-surface); color: var(--color-gold-dark); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.13s, background 0.13s, color 0.13s;
}
.lk-chip.show { opacity: 1; pointer-events: auto; }
.lk-chip:hover { background: var(--color-gold); color: #fff; }

/* ── the card ─────────────────────────────────────────────────────── */
.lk-card {
  position: fixed; z-index: 120; max-width: 320px;
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(27, 42, 74, 0.18);
  padding: 0.75rem 0.9rem 0.8rem;
  opacity: 0; transform: scale(0.97); pointer-events: none;
  transition: opacity 0.13s, transform 0.13s;
}
.lk-card.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.lk-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.lk-en {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--color-navy); font-size: 1rem; line-height: 1.35; flex: 1;
}
.lk-say {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 1.5px solid var(--color-gold); border-radius: 50%;
  background: transparent; color: var(--color-gold-dark); cursor: pointer;
  transition: all 0.15s;
}
.lk-say:hover { background: var(--color-gold); color: #fff; }
.lk-uk {
  color: var(--color-text); font-size: 0.94rem; line-height: 1.45;
  margin-top: 0.45rem; border-top: 1px solid var(--color-border); padding-top: 0.45rem;
}
.lk-uk.loading { color: var(--color-text-light); font-style: italic; }
/* the sentence the word sits in, with its translation */
.lk-ctx { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 0.55rem; padding-top: 0.5rem; }
.lk-ctx-en { font-size: 0.83rem; line-height: 1.45; color: var(--color-navy); }
.lk-ctx-uk { font-size: 0.83rem; line-height: 1.45; color: var(--color-text-light);
             font-style: italic; margin-top: 0.2rem; }
.lk-ctx-uk.loading { opacity: 0.55; }

.lk-save {
  margin-top: 0.55rem; width: 100%;
  border: none; border-radius: 8px; background: var(--color-gold);
  color: var(--color-navy); font-family: inherit; font-weight: 800; font-size: 0.8rem;
  padding: 0.42rem 0.6rem; cursor: pointer; transition: all 0.15s;
}
.lk-save:hover:not(:disabled) { background: var(--color-gold-dark); color: #fff; }
.lk-save:disabled { cursor: default; opacity: 0.55; }
.lk-save.saved { background: rgba(46, 125, 91, 0.16); color: var(--color-ok); opacity: 1; }
.lk-sent {
  margin-top: 0.5rem; width: 100%;
  border: 1.5px solid var(--color-border); border-radius: 8px; background: transparent;
  color: var(--color-navy); font-family: inherit; font-weight: 700; font-size: 0.8rem;
  padding: 0.35rem 0.6rem; cursor: pointer; transition: all 0.15s;
}
.lk-sent:hover { border-color: var(--color-gold); background: rgba(212, 168, 67, 0.12); }

@media (max-width: 620px) {
  /* On a phone the card sits at the bottom of the screen, like a sheet. */
  .lk-card {
    left: 0.6rem !important; right: 0.6rem; top: auto !important; bottom: 0.6rem;
    max-width: none; transform: translateY(8px);
  }
  .lk-card.show { transform: translateY(0); }
}

/* ── the word-bank link in the top bar ────────────────────────────── */
.words-top-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-left: auto; text-decoration: none;
  color: var(--color-gold-dark); font-size: 0.85rem; font-weight: 700;
  background: rgba(212, 168, 67, 0.16);
  border: 1.5px solid rgba(212, 168, 67, 0.45); border-radius: 100px;
  padding: 0.32rem 0.85rem; white-space: nowrap; transition: all 0.15s;
}
.words-top-btn:hover { border-color: var(--color-gold); background: rgba(212, 168, 67, 0.26); }
.words-top-btn + .top-progress { margin-left: 0.6rem; }

/* ── the star on the vocabulary list ──────────────────────────────── */
.vocab .lk-star {
  border: none; background: transparent; cursor: pointer; padding: 0 0.2rem;
  color: var(--color-border); line-height: 1; font-size: 1rem; transition: color 0.15s, transform 0.1s;
}
.vocab .lk-star:hover { transform: scale(1.15); color: var(--color-gold); }
.vocab .lk-star.saved { color: var(--color-gold); }

@media print { .lk-bar, .lk-card, .lk-chip, .words-top-btn, .lk-star { display: none !important; } }