/* Match the vocabulary direction filter to the adjacent search field. */
.study-ui .study-lookup-controls { align-items: center; }
.study-ui #lookup-query,
.study-ui #lookup-direction { height: 44px; min-height: 44px; box-sizing: border-box; margin-block: 0; line-height: 20px; }
.study-ui #lookup-query { padding: 10px 12px; }
.study-ui #lookup-direction {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 34px 10px 12px;
  border: 1px solid #e0e6f0;
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: #24334d;
  font: inherit;
  font-size: 13px;
}

/* The breadcrumb label is also the previous-page control. */
.study-ui .breadcrumb-back {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.study-ui .breadcrumb-back:hover { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.study-ui .breadcrumb-back:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }

/* Keep each word and its meaning together on narrow screens. */
@media (max-width: 680px) {
  .study-ui .study-lookup-controls { flex-wrap: nowrap; gap: 8px; }
  .study-ui #lookup-query { flex: 1 1 0; width: 0; min-width: 0; }
  .study-ui #lookup-direction { flex: 0 0 108px; width: 108px; }
  .study-ui .lookup-table,
  .study-ui .lookup-table tbody,
  .study-ui .word-list .word-types-table,
  .study-ui .word-list .word-types-table tbody { display: block; width: 100%; }
  .study-ui .lookup-table thead,
  .study-ui .word-list .word-types-table thead { display: none; }
  .study-ui .lookup-table tr,
  .study-ui .word-list .word-types-table tr {
    display: block;
    padding: 14px 12px;
    border-bottom: 1px solid #e8edf5;
  }
  .study-ui .lookup-table tr:last-child,
  .study-ui .word-list .word-types-table tr:last-child { border-bottom: 0; }
  .study-ui .lookup-table td,
  .study-ui .word-list .word-types-table td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.8;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .study-ui .lookup-table td + td,
  .study-ui .word-list .word-types-table td + td { margin-top: 8px; }
  .study-ui .lookup-table .lookup-en,
  .study-ui .word-list .word-types-table .en { min-width: 0; }
  .study-ui .lookup-table .review-speak-word,
  .study-ui .word-list .word-types-table .review-speak-word {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: 32px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }
  .study-ui .lookup-table .lookup-example { font-size: 12px; line-height: 1.8; }
  .study-ui .lookup-table td:last-child { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .study-ui .lookup-table-wrap { max-height: 420px; max-height: min(55dvh, 420px); }
  .study-ui .word-list .word-types-table tr { padding-inline: 4px; }
}