/* ============================================================
   Syllastack — shared rendering styles
   Onset large on the baseline; nucleus top-right (superscript),
   coda bottom-right (subscript); stressed nucleus bold red.
   These class names are used by both the popup preview and the
   content-script injection.
   ============================================================ */

.ss-word {
  position: relative;
  font-family: 'Gentium Plus', 'Charis SIL', 'Doulos SIL', serif;
  unicode-bidi: isolate;
  white-space: nowrap;
  display: inline;
  margin-right: 0.5em;
  text-transform: none !important;
}

.ss-syl {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Onset — full size on the baseline */
.ss-ons {
  display: flex;
  align-items: center;
  font-size: 1.25em;
  line-height: 1;
}

.ss-empty-ons {
  margin-right: 0.1em;
  opacity: 0.45;
}

/* Nucleus + coda stacked column to the right of the onset */
.ss-nc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.6em;
  line-height: 0.95;
  text-align: left;
}

.ss-nuc { order: 0; }
.ss-cod { order: 1; }

/* Primary stress — colour is themeable via --stress (falls back to red) */
.ss-nuc.ss-stress {
  font-weight: 700;
  color: var(--stress, #E53935);
}