/* Lesson 2 tone table: green, ivory and gold, with native interactive cells. */
.mid-tone-wrap {
  --mid-green: #103f35;
  --mid-ink: #123f39;
  --mid-gold: #bd984b;
  margin: 22px 0;
  padding: 10px;
  border: 2px solid var(--mid-gold);
  border-radius: 26px;
  background: linear-gradient(135deg, #faf8ed, #eeefdf 55%, #fcfaf1);
  box-shadow: 0 0 0 3px #fffdf5 inset, 0 12px 30px #173d3020;
  overflow-x: auto;
  scrollbar-color: #b29a61 #f4f0e1;
}
.mid-tone-wrap .mid-tone-table {
  width: 100%;
  min-width: 810px;
  table-layout: fixed;
  border: 1px solid #d3b777;
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 17px;
  overflow: hidden;
  background: #fdfbf5;
  color: var(--mid-ink);
}
.mid-tone-wrap .mid-tone-table th {
  position: relative;
  padding: 24px 6px 32px;
  background: linear-gradient(140deg, #1c5142, #0c322b) !important;
  color: #fffdf3 !important;
  text-align: center;
  font: 700 16px/1.6 'Leelawadee UI', Tahoma, sans-serif;
  border: 0;
  border-right: 1px solid #d2bf825c;
  border-bottom: 2px solid var(--mid-gold);
  white-space: nowrap;
}
.mid-tone-wrap .mid-tone-table th:first-child { width: 14%; }
.mid-tone-wrap .mid-tone-table th:last-child { border-right: 0; }
.mid-tone-wrap .mid-tone-table th::after {
  content: '❖';
  position: absolute;
  bottom: 10px;
  left: 18%;
  width: 64%;
  color: #e3c575;
  font: 14px/14px Georgia, serif;
  background: linear-gradient(90deg, transparent, #d2b66a 33%, transparent 34%, transparent 66%, #d2b66a 67%, transparent) center/100% 1px no-repeat;
}
.mid-tone-wrap .mid-tone-table td {
  position: relative;
  padding: 12px 5px;
  text-align: center;
  vertical-align: middle;
  border: 0;
  border-right: 1px solid #d7c9a850 !important;
  border-bottom: 1px solid var(--mid-gold) !important;
  background: linear-gradient(120deg, #fffdf8, #faf8f0);
}
.mid-tone-wrap .mid-tone-table td:last-child { border-right: 0 !important; }
.mid-tone-wrap .mid-tone-table tbody tr:last-child td { border-bottom: 0 !important; }
.mid-tone-wrap .mid-tone-table td:first-child {
  padding: 20px 8px 45px;
  font: 700 26px/1.7 'Leelawadee UI', Tahoma, sans-serif;
  color: #123f39;
  background: url('images/mid-lotus-ornament.svg') left bottom / 120px auto no-repeat,
    linear-gradient(135deg, #e9eddd, #dde4d0);
}
.mid-tone-wrap .mid-tone-table td:first-child::after {
  content: '❖';
  display: block;
  margin: 4px auto 0;
  color: var(--mid-gold);
  width: 75%;
  font: 15px/20px Georgia, serif;
  background: linear-gradient(90deg, transparent, #bd984b 35%, transparent 36%, transparent 64%, #bd984b 65%, transparent) center/100% 1px no-repeat;
}
.mid-tone-wrap .mid-tone-table td button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 216px;
  padding: 10px 2px;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--mid-ink) !important;
  font: 400 48px/1.6 'Leelawadee UI', Tahoma, sans-serif;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.mid-tone-wrap .mid-tone-table td button:hover {
  background: #e8eddf !important;
  box-shadow: 0 0 0 1px #b5c4a1 inset;
}
.mid-tone-wrap .mid-tone-table td button:focus-visible {
  outline: 3px solid #287061;
  outline-offset: -3px;
}
.mid-tone-wrap .mid-tone-table small {
  margin: 0;
  color: var(--mid-ink) !important;
  font: 23px/1.5 Georgia, 'Times New Roman', serif;
}
.mid-tone-wrap .mid-tone-table .mid-audit-ipa {
  margin: 0 0 8px;
  color: var(--mid-ink) !important;
  font: 16px/1.6 'Segoe UI', Tahoma, sans-serif;
}
.mid-tone-wrap .mid-tone-table .mid-syllable-playing {
  background: #e4ecd9 !important;
  outline: 3px solid #36785e;
  outline-offset: -3px;
  box-shadow: 0 0 0 1px #d1b469 inset;
}
@media (min-width: 1450px) {
  .mid-tone-wrap .mid-tone-table th { font-size: 19px; }
  }
@media (max-width: 600px) {
  .mid-tone-wrap { padding: 7px; border-radius: 20px; }
}