@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap');

html {
  font-size: 18px; /* You can adjust this value as needed */
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  color: #1b1c1d;
  background-color: #ffffee;
}

#content,
#postamble {
  margin: 1rem auto;
  padding: 0 1rem;
  max-width: 1024px;
}

#org-div-home-and-up {
  float: right;
  padding-right: 1rem;
  position: sticky;
  top: 1rem;
  z-index: 10;
}

#org-div-home-and-up span {
  display: none;
}

#org-div-home-and-up a {
  width: 1.25em;
  display: inline-block;
  height: 1.25em;
  line-height: 1.25em;
  overflow: hidden;
  position: relative;
  top: 0.4em;
  text-decoration: none;
  color: rgba(0, 0, 0, 0);
}

#org-div-home-and-up a:hover {
  background: 2px lightblue;
}

#org-div-home-and-up a[accesskey="h"]::before {
  content: '⬆️️';
  color: #1b1c1d;
}

#org-div-home-and-up a[accesskey="H"]::before {
  content: '🏠️';
  position: relative;
  color: #1b1c1d;
}

#org-div-home-and-up a[accesskey="d"]::before {
  content: '⬇️';
  color: #1b1c1d;
}

/* Heading Styles */
h1 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.25em;
  font-weight: normal;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

a:hover {
  text-decoration: none;
}

/* Paragraph Styles */
p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 1em;
}

/* Code Styles */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background-color: #f4f4f4;
  padding: 0.2em 0.5em;
  border-radius: 3px;
}

/* List Styles */
ul, ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

li {
  margin-bottom: 0.5em;
}

ruby {
  white-space: nowrap;
  ruby-align: start;
  text-align: left;
}

rt, rtc {
  line-height: 1;
}

rp {
    display: none;
}

rt, rp {
  color: #888;
  font-weight: normal;
  font-size: max(0.65em, 15px);
  ruby-align: start;
}

rtc {
  font-weight: normal;
  font-size: max(0.6em, 14px);
  color: #444;
}


th {
  text-align: left;
}

td {
}

.vocabulary table td:first-child {
  /* font-size: 1.333rem; */
}

.lang-block {
  position: relative;
}

.lang-block p {
  /* margin: 0; */
}

.lang-block p span.utterance {
  display: block;
}

.lang-block p .speaker,
.lang-block p .separator {
  font-size: 0.85em;
}

.lang-block p:has(span.speaker) {
  text-indent: -1em;
  /* position: relative; */
  /* left: -3em; */
}

.lang-block p .speaker {
  /* display: inline-block; */
  /* direction: rtl; */
  /* white-space: nowrap; */
  /* max-width: 3em; */
  /* text-align: right; */
}

/* zh-cmn-Hans-CN   Mandarin Chinese, Simplified script, as used in China */
/* https://www.w3.org/International/articles/bcp47/ */
:lang("zh-cmn"),
:lang("zh-Hans"),
:lang("zh-cmn-Hans") {
  line-height: 1.25em;
  text-transform: full-size-kana;
  /* font-size: 1.25em; */
}

.font-ma-shan-zheng :lang("zh-cmn"),
.font-ma-shan-zheng :lang("zh-Hans"),
.font-ma-shan-zheng :lang("zh-cmn-Hans") {
  font-family: "Ma Shan Zheng", cursive;
}

.font-zcool-xiaowei :lang(zh-cmn),
.font-zcool-xiaowei :lang(zh-Hans),
.font-zcool-xiaowei :lang(zh-cmn-Hans) {
  font-family: "ZCOOL XiaoWei", cursive;
}

.font-long-cang :lang(zh-cmn),
.font-long-cang :lang(zh-Hans),
.font-long-cang :lang(zh-cmn-Hans) {
  font-family: "Long Cang", cursive;
  font-size: 1.25em;
}

.font-ma-shan-zheng :lang(zh-cmn),
.font-ma-shan-zheng :lang(zh-Hans),
.font-ma-shan-zheng :lang(zh-cmn-Hans),
.font-zcool-xiaowei :lang(zh-cmn),
.font-zcool-xiaowei :lang(zh-Hans),
.font-zcool-xiaowei :lang(zh-cmn-Hans) {
  font-size: 1.112em;
}

.lang-block p :lang(en) {
  line-height: 1.15em;
  font-size: max(0.889rem, 16px);
  color: #444;
}

.lang-block p :lang(zh-Latn) {
  line-height: 1.15em;
  font-size: max(0.778rem, 16px);
  color: #888;
}

.lang-block p span.utterance:not(:first-of-type) {
  opacity: 0;
}

.lang-block p:hover span:nth-of-type(2) {
  visibility: visible;
  opacity: 1;
}

.lang-block p:hover span:nth-of-type(3):hover {
  visibility: visible;
  opacity: 1;
}

/* .lang-block p span:first-child { */
/*   border: solid 1px; */
/* } */

.lang-en-visible :lang(en) {
  visibility: visible;
  opacity: 1;
}

.lang-pi-visible :lang(zh-Latn) {
  visibility: visible;
  opacity: 1;
}

/* .sentences p span::before { */
/*   color: #777; */
/*   font-size: 0.778rem; */
/*   font-family: -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; */
/* } */

/* .sentences p:nth-child(odd) span:first-child, */
/* .sentences p:nth-child(even) span:first-child { */
/*   position: relative; */
/*   text-indent: -0.8em; */
/* } */

/* .sentences .lang-block p:nth-child(odd) span:first-child::before { */
/*   content: 'A:'; */
/* } */

/* .sentences .lang-block p:nth-child(even) span:first-child::before { */
/*   content: 'B:'; */
/* } */

/* .sentences .lang-block.monologue p span:first-child { */
/*   text-indent: 0; */
/* } */

/* .sentences .lang-block.monologue p span:first-child::before { */
/*   content: ''; */
/* } */

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table .table-number {
  display: none;
}

table caption {
  white-space: nowrap;
  /* text-align: left; */
}

table td {
  margin: 0;
  padding: 3px 5px;
}

table th {
  margin: 0;
  padding: 0 5px;
}

.vocabulary table {
  min-width: 33%;
  margin-bottom: 1rem;
}

.vocabulary th {
  cursor: pointer;
}

.vocabulary td {
  max-width: 16em;
  min-width: 4em;
}

/* do not wrap Chinese  */
.vocabulary tbody td:first-child {
  white-space: nowrap;
}

.vocabulary td.td-invisible {
  opacity: 0;
}

.vocabulary td.td-invisible:hover {
  color: rgba(0, 0, 0, 0);
  opacity: 0.75;
  cursor: pointer;
  background: lightblue;
}


#speech-options div {
  display: none;
}

#speech-options.not-supported div.no-support {
  display: block;
  font-size: 0.9em;
  color: #777;
}

#speech-options.supported div.options {
  display: block;
}