/* Loaded only by translated pages. The design is the English design; this only
   lets long Finnish and German compounds break instead of overflowing a fixed box. */
h1, h2, h3, h4, p, li, a, button, label, span, td, th, figcaption, blockquote {
  overflow-wrap: break-word;
}
/* Hyphens only where a long word has nowhere else to go: body text on a phone.
   A headline never breaks a word it has room for. */
@media (max-width: 600px) {
  html:lang(fi) :is(p, li, figcaption, blockquote),
  html:lang(de) :is(p, li, figcaption, blockquote),
  html:lang(sv) :is(p, li, figcaption, blockquote) {
    hyphens: auto;
  }
}

/* Longer words, same design: a row that fits in English may need a second line. */
.seo-acts { flex-wrap: wrap; }
.sc-play { font-size: min(1em, 3.4vw); }
/* A last resort, so one stubborn word can't make a whole phone page sideways-scroll. */
html { overflow-x: clip; }
/* The smallest phones: the top bar's action keeps its words and gives up its icon. */
@media (max-width: 380px) {
  .rn-top .rn-action svg { display: none; }
  .rn-top .rn-action { padding: 0 2px; font-size: 12.5px; }
}
/* The caller page's three channel chips: long words wrap inside their columns. */
.clr .sw-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clr .sw-in > * { min-width: 0; }
.clr .sw-in .chip { white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-align: center; }