/* EG Matches 4.21.0: word lists. The star in a vocabulary list's rows, the line at the foot of the
   page (a member's: which list a word went to; a visitor's: the signup), the page "My word lists",
   and a shared list as its link shows it. The theme's tokens, with their values as fallbacks. Every
   button here sets its own colors and size (the theme draws a plain <button> large and green).
   (eg-matches-lists-4.20.0.css stays in the plugin: a vocabulary list kept in a page cache asks for it.) */

/* ---------------------------------------------------------------- a vocabulary list: the stars */
/* The room for the star is kept from the first drawing of the page (the body says it is a list, and the
   word is the second column of the lists), so that nothing moves when the script puts the stars in. */
@media not print {
  body.egm-list:not(.egm-words-ready) .entry-content table tr > td:nth-child(2),
  body.egm-list .entry-content table td.egm-star-cell {
    padding-right: 46px;
  }
}

.egm-stars td.egm-star-cell {
  position: relative;
}

/* A table too wide for a small screen can be moved sideways (the theme would cut its right side off). */
body.egm-list .entry-content figure.wp-block-table {
  overflow-x: auto;
}

.egm-stars .egm-star {
  position: absolute;
  top: var(--egm-star-top, 6px); /* on the word's first line: the script measures the cell */
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--eg-muted, #6a7267);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none; /* a copy of the table takes the words, not the stars */
}

.egm-stars .egm-star svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.egm-stars .egm-star:hover {
  background: var(--eg-tint, #f2f7ec);
  color: var(--eg-moss, #446931);
}

.egm-stars .egm-star:focus-visible {
  outline: 2px solid var(--eg-moss, #446931);
  outline-offset: -2px;
  background: none;
}

/* A saved word: the star filled, in the gold of the site's "Join free". */
.egm-stars .egm-star[aria-pressed="true"] {
  color: #8a6500;
}

.egm-stars .egm-star[aria-pressed="true"] svg {
  fill: #f0c53e;
}

/* For the keyboard: a link past the list, in sight when it has the focus. */
.egm-words-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.egm-words-skip:focus {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 0 8px;
  padding: 6px 10px;
  overflow: visible;
  clip: auto;
  border-radius: 6px;
  outline: 2px solid var(--eg-moss, #446931);
  background: #fff;
  color: var(--eg-ink, #1f2c1e);
  font-size: 15px;
  font-weight: 600;
}

.egm-words-end:focus {
  outline: none;
}

/* For a screen reader only: what the line at the foot says. */
.egm-words-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- a member: the line at the foot of the page */
.egm-words-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 46px 8px 18px; /* on the right: the close button */
  border: 1px solid transparent; /* an edge where the system sets the colors */
  border-radius: 26px;
  background: var(--eg-ink, #1f2c1e);
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 6px 20px rgba(20, 30, 18, 0.28);
}

.egm-words-bar[hidden] {
  display: none;
}

/* More than one line of it (several lists to choose from, or a message): a box. */
.egm-words-bar--long {
  padding: 12px 46px 12px 16px;
  border-radius: 14px;
}

.egm-words-bar__text {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.egm-words-bar.is-problem .egm-words-bar__text {
  font-weight: 500;
}

.egm-words-bar__pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #dfe6da;
  font-size: 14px;
  white-space: nowrap;
}

.egm-words-bar__pick[hidden] {
  display: none;
}

.egm-words-bar__pick select {
  max-width: 190px;
  height: 38px;
  margin: 0;
  padding: 0 28px 0 10px;
  border: 1px solid #5c6a58;
  border-radius: 8px;
  background-color: #2c3a2a;
  color: #fff;
  font-size: 16px; /* 16: an iPhone does not zoom in on it */
}

.egm-words-bar__links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.egm-words-bar__play,
.egm-words-bar__play:visited {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--eg-ink, #1f2c1e);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.egm-words-bar__play[hidden] {
  display: none;
}

.egm-words-bar__play:hover,
.egm-words-bar__play:focus-visible {
  background: var(--eg-tint, #f2f7ec);
  color: var(--eg-ink, #1f2c1e);
}

.egm-words-bar__page,
.egm-words-bar__page:visited {
  padding: 6px 4px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.egm-words-bar__page:hover,
.egm-words-bar__page:focus {
  color: #dfe6da; /* the theme colors a link in focus dark green: not on this ground */
}

.egm-words-bar__play:focus {
  color: var(--eg-ink, #1f2c1e);
}

/* A visitor who put the signup line away: the way back to it, in the gold of the site's "Join free". */
.egm-words-bar .egm-words-bar__join {
  flex: none;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--eg-pro-line, #d9b84a);
  border-radius: 999px;
  background: var(--eg-pro-gradient, linear-gradient(#f9e08b, #f3cf62));
  color: var(--eg-pro-ink, #4a3703);
  -webkit-text-fill-color: var(--eg-pro-ink, #4a3703);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

/* Puts the line away until the next star. */
.egm-words-bar .egm-words-bar__close {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: -16px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #dfe6da;
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.egm-words-bar--long .egm-words-bar__close {
  top: 8px;
  margin-top: 0;
}

/* The cross is two lines (drawn as borders: they stay where the system sets the colors). */
.egm-words-bar .egm-words-bar__close::before,
.egm-words-bar .egm-words-bar__close::after,
.egm-join .egm-join__close::before,
.egm-join .egm-join__close::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 14px;
  height: 0;
  border-top: 2px solid currentColor;
  background: none;
  transform: rotate(45deg);
}

.egm-words-bar .egm-words-bar__close::after,
.egm-join .egm-join__close::after {
  transform: rotate(-45deg);
}

.egm-words-bar .egm-words-bar__close:hover {
  background: #33432f;
  color: #fff;
}

.egm-words-bar a:focus-visible,
.egm-words-bar button:focus-visible,
.egm-words-bar select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* While a line stands at the foot, the page keeps room for it at its end (the script says how high it is). */
html.egm-foot-open {
  scroll-padding-bottom: calc(var(--egm-foot, 80px) + 28px);
}

html.egm-foot-open body {
  padding-bottom: calc(var(--egm-foot, 80px) + 28px);
}

/* ---------------------------------------------------------------- a visitor: the line with the signup form */
.egm-join {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  box-sizing: border-box;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 18px 14px;
  border: 1px solid #e3d9b0;
  border-radius: 14px;
  background: #fffdf4;
  color: var(--eg-ink, #1f2c1e);
  box-shadow: 0 10px 30px rgba(20, 30, 18, 0.24);
}

.egm-join[hidden] {
  display: none;
}

.egm-join__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.egm-join__say {
  flex: 1;
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.4;
}

.egm-join .egm-join__close {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--eg-muted, #6a7267);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.egm-join .egm-join__close:hover {
  background: #f1ead0;
}

.egm-join .egm-join__close:focus-visible {
  outline: 2px solid var(--eg-moss, #446931);
  outline-offset: 0;
  background: none;
}

.egm-join__count {
  margin: 4px 0 10px;
  color: var(--eg-muted, #6a7267);
  font-size: 14px;
  font-weight: 600;
}

.egm-join__count:empty {
  display: none;
}

.egm-join .ega-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.egm-join .ega-form > * {
  grid-column: 1 / -1;
}

.egm-join .ega-form > .ega-field {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.egm-join .ega-form > .ega-actions {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.egm-join .ega-form .ega-field input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c9cfc2;
  border-radius: var(--eg-radius, 6px);
  background: #fff;
  font-size: 16px; /* 16: an iPhone does not zoom in on it */
}

.egm-join .ega-form button.ega-button {
  width: auto;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--eg-pro-line, #d9b84a);
  border-radius: var(--eg-radius, 6px);
  background: var(--eg-pro-gradient, linear-gradient(#f9e08b, #f3cf62));
  color: var(--eg-pro-ink, #4a3703);
  -webkit-text-fill-color: var(--eg-pro-ink, #4a3703);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.egm-join .ega-form .ega-fine {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--eg-muted, #6a7267);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
}

.egm-join .ega-form .ega-status {
  margin-top: 8px;
}

.egm-join .ega-form .ega-turnstile {
  margin: 0;
}

.egm-join .ega-form .ega-turnstile.is-shown {
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------- the page "My word lists" */
.egm-lists {
  max-width: 760px;
}

.egm-lists__how {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
}

.egm-lists__how[hidden] {
  display: none;
}

.egm-lists__need {
  margin: 0 0 10px;
  color: var(--eg-ink, #1f2c1e);
  font-weight: 650;
}

.egm-list-card {
  margin: 0 0 18px;
  padding: 18px 20px 6px;
  border: 1px solid var(--eg-panel-border, #e3e6dc);
  border-radius: var(--eg-panel-radius, 14px);
  background: #fff;
}

.egm-list-card.is-active {
  border-color: #d9c370;
}

.egm-list-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 12px;
}

.egm-lists .egm-list-card__name {
  margin: 0;
  color: var(--eg-ink, #1f2c1e);
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.egm-list-card__name:focus {
  outline: none;
}

.egm-list-card__count {
  color: var(--eg-muted, #6a7267);
  font-size: 15px;
  font-weight: 600;
}

.egm-list-card__here {
  padding: 2px 10px;
  border-radius: 999px;
  background: #fbf3d3;
  color: #6b5200;
  font-size: 13.5px;
  font-weight: 600;
}

.egm-list-card__actions,
.egm-lists__form,
.egm-lists__sure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.egm-lists__sure-text {
  flex: 1 1 100%;
  margin: 0;
  color: var(--eg-ink, #1f2c1e);
  font-weight: 650;
}

.egm-lists .egm-lists__btn,
.egm-lists a.egm-lists__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--eg-rule-strong, #cfcbbf);
  border-radius: var(--eg-radius, 6px);
  background: #fff;
  color: var(--eg-ink, #1f2c1e);
  -webkit-text-fill-color: currentColor;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.egm-lists .egm-lists__btn:hover,
.egm-lists a.egm-lists__btn:hover {
  border-color: var(--eg-muted, #6a7267);
  background: var(--eg-tint, #f2f7ec);
  color: var(--eg-ink, #1f2c1e);
}

.egm-lists .egm-lists__btn--main,
.egm-lists a.egm-lists__btn--main,
.egm-lists a.egm-lists__btn--main:visited {
  border-color: #36552a;
  background: var(--eg-moss, #446931);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.egm-lists .egm-lists__btn--main:hover,
.egm-lists a.egm-lists__btn--main:hover {
  border-color: #36552a;
  background: #36552a;
  color: #fff;
}

/* "Rename" and "Delete list": text, beside the list's buttons (on a phone they stand on a line of their own, in line with the card's edge). */
.egm-list-card__actions {
  column-gap: 14px;
}

.egm-lists .egm-lists__btn--quiet {
  padding: 0;
  border-color: transparent;
  background: none;
  color: var(--eg-moss, #446931);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.egm-lists .egm-lists__btn--quiet:hover {
  border-color: transparent;
  background: none;
  color: var(--eg-ink, #1f2c1e);
}

.egm-lists .egm-lists__btn--danger {
  border-color: #b4412b;
  background: #b4412b;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.egm-lists .egm-lists__btn--danger:hover {
  border-color: #963522;
  background: #963522;
  color: #fff;
}

.egm-lists .egm-lists__btn:focus-visible,
.egm-lists a.egm-lists__btn:focus-visible,
.egm-lists .egm-list-card__remove:focus-visible,
.egm-lists .egm-lists__input:focus-visible {
  outline: 2px solid var(--eg-ink, #1f2c1e);
  outline-offset: 2px;
}

.egm-lists__label {
  color: var(--eg-ink, #1f2c1e);
  font-size: 15px;
  font-weight: 650;
}

.egm-lists .egm-lists__input {
  box-sizing: border-box;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c9cfc2;
  border-radius: var(--eg-radius, 6px);
  background: #fff;
  font-size: 16px;
}

.egm-list-card__empty {
  margin: 0 0 14px;
  color: var(--eg-muted, #6a7267);
  font-size: 15.5px;
}

.egm-lists .egm-list-card__words {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  /* 4.22.0: two columns where there is room for them (a full list is then about one screen tall). */
  columns: 2 300px;
  column-gap: 36px;
}

/* 4.22.0: a word is one row: the word, its definition after it (on the next line only when it does not
   fit), and a small button to remove it at the row's end. */
.egm-lists .egm-list-card__word {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 37px;
  margin: 0;
  padding: 7px 38px 7px 0;
  border-top: 1px solid var(--eg-rule, #e5e2d9);
  font-size: 15.5px;
  line-height: 1.4;
  list-style: none;
  break-inside: avoid;
  overflow-wrap: anywhere;
}

.egm-list-card__w {
  color: var(--eg-ink, #1f2c1e);
  font-size: 15.5px;
  font-weight: 650;
}

.egm-list-card__d {
  margin-left: 6px;
  color: var(--eg-muted, #6a7267);
  font-size: 14.5px;
}

.egm-lists .egm-list-card__remove {
  position: absolute;
  top: 2px;
  right: 0;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--eg-muted, #6a7267);
  -webkit-text-fill-color: currentColor;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

/* The count of a list's words opens and closes them. */
.egm-lists .egm-list-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 0;
  padding: 2px 8px 2px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--eg-moss-dark, #2f4a22);
  -webkit-text-fill-color: currentColor;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: #b9c9a8;
  text-underline-offset: 3px;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.egm-lists .egm-list-card__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.egm-lists .egm-list-card__toggle[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.egm-lists .egm-list-card__toggle:hover {
  background: none;
  color: var(--eg-ink, #1f2c1e);
  text-decoration-color: currentColor;
}

.egm-lists .egm-list-card__toggle:focus-visible {
  outline: 2px solid var(--eg-moss, #446931);
  outline-offset: 2px;
}

/* On a touch screen the two small buttons are as tall as a finger needs. */
@media (hover: none), (max-width: 640px) {
  .egm-lists .egm-list-card__word {
    min-height: 45px;
    padding: 7px 46px 7px 0;
  }

  .egm-lists .egm-list-card__remove {
    top: 0;
    width: 40px;
    height: 40px;
  }

  .egm-lists .egm-list-card__toggle {
    min-height: 40px;
  }
}

/* On a phone a closed list is its name, its count and "Practice in Matches"; "Save new words here",
   "Share", "Rename" and "Delete list" come with its words. */
@media (max-width: 640px) {
  .egm-lists .egm-list-card:not(.is-open) .egm-list-card__actions > :not(.egm-list-card__play) {
    display: none;
  }

  .egm-lists .egm-list-card:not(.is-open) .egm-list-card__head {
    margin-bottom: 8px;
  }
}

.egm-lists .egm-list-card__remove:hover {
  background: var(--eg-tint, #f2f7ec);
  color: var(--eg-ink, #1f2c1e);
}

.egm-lists__new {
  margin: 0 0 10px;
}

.egm-lists__limit {
  margin: 0;
  color: var(--eg-muted, #6a7267);
  font-size: 15px;
}

.egm-lists__said {
  min-height: 1.4em;
  margin: 0;
  color: var(--eg-wrong, #b4412b);
  font-size: 15px;
  font-weight: 600;
}

.egm-lists__said:empty {
  display: none;
}

/* ---------------------------------------------------------------- 4.21.0: sharing a list */
.egm-list-card__shared {
  padding: 2px 10px;
  border-radius: 999px;
  background: #e4efd9;
  color: #2f4a22;
  font-size: 13.5px;
  font-weight: 600;
}

/* A shared list's link: one sentence, the link, "Copy link", "Stop sharing", "Close". */
.egm-lists__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #d3e0c6;
  border-radius: 10px;
  background: var(--eg-tint, #f2f7ec);
}

.egm-lists__share-say {
  flex: 1 1 100%;
  margin: 0;
  color: var(--eg-ink, #1f2c1e);
  font-size: 15.5px;
  line-height: 1.45;
}

.egm-lists .egm-lists__input--link {
  flex: 1 1 260px;
  max-width: none;
  color: var(--eg-ink, #1f2c1e);
}

/* A shared list as its link shows it: the words without "Remove"; what a member is told about it. */
.egm-lists.egm-shared .egm-list-card__word,
.egm-shared .egm-list-card__word {
  padding-right: 0;
}

.egm-shared .egm-list-card {
  padding-bottom: 10px;
}

.egm-shared__note {
  color: var(--eg-ink, #1f2c1e);
  font-size: 15.5px;
  font-weight: 600;
}

.egm-shared__note[hidden] {
  display: none;
}

.egm-shared__note:focus {
  outline: none;
}

.egm-shared__link {
  margin-left: 4px;
  font-weight: 600;
}

/* A button that is put away is out of sight (this stylesheet gives every button a display of its own). */
.egm-lists .egm-lists__btn[hidden] {
  display: none;
}

.egm-lists__share-part {
  flex: 1 1 100%;
  margin: 0;
  color: var(--eg-muted, #6a7267);
  font-size: 14.5px;
  line-height: 1.45;
}

.egm-shared__report {
  margin: 14px 0 0;
  font-size: 14px;
}

.egm-shared__report a {
  color: var(--eg-muted, #6a7267);
}

/* ---------------------------------------------------------------- a phone */
@media (max-width: 480px) {
  body.egm-list:not(.egm-words-ready) .entry-content table tr > td:nth-child(2),
  body.egm-list .entry-content table td.egm-star-cell {
    padding-right: 40px;
  }

  .egm-stars .egm-star {
    right: 1px;
  }

  .egm-join .ega-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .egm-join .ega-form > .ega-actions {
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
  }

  .egm-join .ega-form button.ega-button {
    width: 100%;
  }

  .egm-list-card {
    padding: 16px 14px 4px;
  }
}

/* On a narrow phone the star's room is taken from the cells' own side padding: the list's table is no wider
   than it was without stars (a wider table loses the end of its definitions at the screen's edge). */
@media (max-width: 400px) {
  body.egm-list .entry-content table th,
  body.egm-list .entry-content table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  body.egm-list:not(.egm-words-ready) .entry-content table tr > td:nth-child(2),
  body.egm-list .entry-content table td.egm-star-cell {
    padding-right: 38px;
  }
}

@media (max-width: 340px) {
  body.egm-list .entry-content table th,
  body.egm-list .entry-content table td {
    padding-left: 4px;
    padding-right: 4px;
  }

  body.egm-list:not(.egm-words-ready) .entry-content table tr > td:nth-child(2),
  body.egm-list .entry-content table td.egm-star-cell {
    padding-right: 37px;
  }
}

/* ---------------------------------------------------------------- on paper: the list as it was written */
@media print {
  .egm-stars .egm-star,
  .egm-words-bar,
  .egm-join,
  .egm-words-skip {
    display: none !important;
  }

  html.egm-foot-open body {
    padding-bottom: 0;
  }
}

@media (forced-colors: active) {
  .egm-stars .egm-star[aria-pressed="true"] svg {
    fill: Highlight;
  }
}