/* Preserve original formatting */
.mandarin {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Wrapper we add around each mandarin block */
.mandarin-pinyin-wrap {
  position: relative;
}

/* The ruby layer we generate */
.mandarin-pinyin-layer {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ruby styling */
.mandarin-pinyin-layer ruby {
  ruby-position: over;
  margin-right: 0.125em;
}
.mandarin-pinyin-layer rt {
  font-size: 0.6em;
  line-height: 1;
}

/* Toggle behavior (default OFF) */
body.mandarin-pinyin-off .mandarin-pinyin-layer { display: none; }
body.mandarin-pinyin-off .mandarin { display: block; }

body:not(.mandarin-pinyin-off) .mandarin-pinyin-layer { display: block; }
body:not(.mandarin-pinyin-off) .mandarin { display: none; }

/* Button */
.pinyin-toggle-btn {
  margin-top: 1rem;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
}