/* The rich body of notices, case studies and FAQ answers (images, tables, colours, sizes, alignment, files, video) and the
   editor's writing area. One rule per class the sanitizer allows (HtmlSanitizer.allowedClasses); tokens only. */

.tc-gray { color: var(--text-faint); }
.tc-red { color: var(--crit-text); }
.tc-orange { color: var(--warn-text); }
.tc-green { color: var(--ok-text); }
.tc-blue { color: var(--accent); }
.tc-purple { color: var(--support); }

.hl-yellow, .hl-green, .hl-blue, .hl-red, .hl-purple, .hl-gray {
  padding: 0 2px;
  border-radius: 2px;
  color: var(--text-primary);
}

.hl-yellow { background: var(--warn-fill); }
.hl-green { background: var(--ok-fill); }
.hl-blue { background: var(--accent-tint); }
.hl-red { background: var(--crit-fill); }
.hl-purple { background: var(--support-tint); }
.hl-gray { background: var(--fill-dim); }

.fs-s { font-size: 0.875em; }
.fs-l { font-size: 1.25em; }
.fs-xl { font-size: 1.5em; }

.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; word-break: keep-all; }

figure.rt-img {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--sp4);
  break-inside: avoid;
}

.rt-img img {
  display: block;
  max-width: 100%;
  height: auto;
}

.rt-w-s img { width: 240px; }
.rt-w-m img { width: 480px; }
.rt-w-o img { width: auto; }
.rt-img.rt-w-f, .rt-w-f img { width: 100%; }
.rt-img.rt-al-l { margin-right: auto; }
.rt-img.rt-al-c { margin-inline: auto; }
.rt-img.rt-al-r { margin-left: auto; }

.rt-img figcaption {
  margin-top: var(--sp1);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.rt-al-c figcaption { text-align: center; }

.rt-table {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--sp4);
  overflow-x: auto;
  border-collapse: collapse;
  break-inside: avoid;
}

.rt-table th, .rt-table td {
  min-width: 80px;
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.rt-table th {
  background: var(--fill-dim);
  font-weight: 700;
}

.rt-table .ta-c { text-align: center; }
.rt-table .ta-r { text-align: right; }

ul.rt-files {
  margin: 0 0 var(--sp4);
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.rt-file-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp1) var(--sp3);
  min-height: 44px;
  margin: 0;
  padding: var(--sp2) var(--sp4);
}

.rt-file-item + .rt-file-item {
  border-top: 1px solid var(--border);
}

.rt-file {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rt-size {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.rt-video {
  position: relative;
  max-width: 100%;
  margin: 0 0 var(--sp4);
  aspect-ratio: 16 / 9;
}

.rt-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.faq-answer > :is(figure, .rt-table, .rt-video) {
  max-width: calc(100% - 2 * var(--sp4));
  margin-top: var(--sp3);
  margin-inline: var(--sp4);
}

.faq-answer > figure.rt-al-c { margin-inline: auto; }
.faq-answer > figure.rt-al-r { margin-left: auto; }

@media print {
  .rt-video { display: none; }
}