/* Speech, dock, consigna y espacio de lección en desktop. */

.speech:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(50% - 7px);
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--color-surface);
  border-right: 1px solid #c8def3;
  border-bottom: 1px solid #c8def3;
}

.lesson-dock {
  display: contents;
}
.lesson-prompt {
  display: none;
}
/* Lesson card: big English word, readable translation, then an active task. */
.speech {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  width: max-content;
  min-width: min(240px, calc(100% - 24px));
  max-width: min(340px, calc(100% - 24px));
  padding: 15px 58px 14px 18px;
  border: 2px solid #b7d3ed;
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 5px 16px #375e8c12;
}
.speech strong {
  display: block;
  font-size: calc(24px * var(--text-scale, 1));
  line-height: 1.2;
  color: var(--ad-ink-blue);
}
.speech small {
  display: block;
  font-size: calc(17px * var(--text-scale, 1));
  line-height: 1.25;
  margin-top: 6px;
  color: #536d86;
}
.speech em {
  display: block;
  font-style: normal;
  margin-top: 10px;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.25;
  font-weight: 600;
  color: #417852;
}
.speech button {
  position: absolute;
  border: 0;
  background: var(--ad-soft-keep);
  pointer-events: auto;
  width: 42px;
  height: 42px;
  top: 12px;
  right: 10px;
  border-radius: 14px;
  font-size: calc(23px * var(--text-scale, 1));
}
/* Equal-height mobile actions and a lesson popover inside the stage. */
#close-lesson {
  display: none;
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .speech {
    padding-right: 86px;
  }

  .speech #repeat-phrase {
    right: 40px;
  }

  .speech #close-lesson {
    display: grid;
    place-items: center;
    position: absolute;
    right: 8px;
    top: 14px;
    width: 24px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7b94aa;
    font-size: calc(21px * var(--text-scale, 1));
  }
}
/* Body lessons keep the target clear; the prompt is redundant with the highlighted diagram. */
body[data-learning-category="body"] .speech em {
  display: none;
}
/* Desktop lesson home: a fixed slot under the category picker, reserved even when idle. */
#desktop-lesson-slot {
  display: grid;
  min-height: calc(24px + 60px * var(--text-scale, 1));
}
#desktop-lesson-slot > * {
  grid-area: 1/1;
}
/* Idle state mirrors the lesson card (icon, English line, Spanish line) so it reads as intentional. */
#desktop-lesson-slot .lesson-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--ad-line-soft);
  border-radius: 22px;
  background: var(--ad-surface-tint);
  color: var(--ad-ink-soft);
  text-align: left;
}
#desktop-lesson-slot .lesson-prompt-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40px * var(--text-scale, 1));
  height: calc(40px * var(--text-scale, 1));
  border-radius: 14px;
  background-color: var(--ad-soft);
  font-size: calc(20px * var(--text-scale, 1));
}
#desktop-lesson-slot .lesson-prompt strong {
  display: block;
  font-size: calc(17px * var(--text-scale, 1));
  line-height: 1.2;
  color: #3c6a91;
}
#desktop-lesson-slot .lesson-prompt small {
  display: block;
  margin-top: 3px;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.25;
  color: var(--ad-ink-muted);
}
#desktop-lesson-slot:has(.speech:not([hidden])) .lesson-prompt {
  visibility: hidden;
}
html[data-appearance="dark"] #desktop-lesson-slot .lesson-prompt {
  background: var(--ad-surface-tint);
  border-color: #3e5a72;
  color: var(--ad-ink-soft);
}
html[data-appearance="dark"] #desktop-lesson-slot .lesson-prompt-icon {
  background-color: var(--ad-soft);
}
html[data-appearance="dark"] #desktop-lesson-slot .lesson-prompt strong {
  color: #d2e8fa;
}
html[data-appearance="dark"] #desktop-lesson-slot .lesson-prompt small {
  color: var(--ad-ink-muted);
}
/* Mobile keeps the lesson in its own dock; the desktop slot must not leave an empty gap
   after switching layouts (window resize, rotation or device emulation). */
#desktop-lesson-slot:empty {
  display: none;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #desktop-lesson-slot {
    display: none;
  }
}
.speech.is-sidebar {
  position: relative;
  left: auto !important;
  top: auto !important;
  transform: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  text-align: left;
  box-sizing: border-box;
  padding: 12px 86px 12px 14px;
}
.speech.is-sidebar:after,
.speech.is-sidebar em {
  display: none;
}
.speech.is-sidebar #repeat-phrase {
  right: 40px;
}
.speech.is-sidebar #close-lesson {
  right: 6px;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .lesson-dock {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    z-index: 6;
    margin: 0 16px 111px;
    width: calc(100% - 32px);
    background: #fffffff2;
    border: 1px solid var(--ad-line-soft);
    box-shadow: 0 3px 12px #35587912;
    border-radius: 12px;
    pointer-events: none;
  }

  .lesson-dock:has(.speech[hidden]) {
    visibility: hidden;
  }

  .lesson-prompt {
    display: none;
  }

  .lesson-dock .speech {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px 26px;
    gap: 1px 5px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: auto;
  }

  .speech:after,
  .lesson-dock .speech em {
    display: none;
  }

  .lesson-dock .speech strong {
    grid-column: 1;
    grid-row: 1;
    font-size: calc(17px * var(--text-scale, 1));
    line-height: 1.2;
  }

  .lesson-dock .speech small {
    grid-column: 1;
    grid-row: 2;
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1.2;
    margin: 0;
  }

  .lesson-dock .speech button {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    min-height: 31px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    font-size: calc(16px * var(--text-scale, 1));
    box-shadow: none;
  }

  .lesson-dock .speech button svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .lesson-dock .speech #close-lesson {
    display: grid;
    grid-column: 3;
    width: 26px;
    background: transparent;
    color: #7b94aa;
    font-size: calc(20px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 650px) {
  .lesson-dock {
    margin-bottom: 95px;
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .lesson-dock {
    grid-column: 1;
    grid-row: 1/3;
    align-self: end;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
  }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) and (min-height: 501px) {
  .lesson-dock {
    grid-column: 1;
    grid-row: 1/3;
    margin: 0 16px 12px;
    width: calc(100% - 32px);
  }
}
.panel-content > #desktop-lesson-slot {
  flex-shrink: 0;
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) and (min-height: 800px) {
  .lesson-dock {
    margin-bottom: 125px;
  }
}
/* Keep English prominent and its translation nearby without shrinking either language. */
.speech .lesson-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.65em;
  row-gap: 2px;
  min-width: 0;
}
.speech .lesson-copy :is(strong, small) {
  display: inline;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  overflow-wrap: break-word;
}
.lesson-prompt > span:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.65em;
  row-gap: 2px;
}
.lesson-prompt > span:last-child :is(strong, small) {
  display: inline;
  margin: 0;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .lesson-dock {
    height: auto;
    min-height: 44px;
    overflow: visible;
  }

  .lesson-dock .speech {
    height: auto;
    min-height: 42px;
    grid-template-rows: auto;
    padding: 4px 7px;
    align-items: center;
  }

  .lesson-dock .speech .lesson-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .lesson-dock .speech :is(button, #close-lesson) {
    grid-row: 1;
  }
}