trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *


*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.trix-content ul, trix-editor ul {
  list-style: disc;
  padding-left: 2em;
  margin: 0.5em 0;
}

.trix-content ol, trix-editor ol {
  list-style: decimal;
  padding-left: 2em;
  margin: 0.5em 0;
}

.trix-content li, trix-editor li {
  margin: 0.25em 0;
}

.trix-content h1, trix-editor h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.5em 0;
  color: #111827;
}

.trix-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5em 0;
  color: #111827;
}

.trix-content h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5em 0;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  .trix-content h1, trix-editor h1,
  .trix-content h3,
  .trix-content h4 {
    color: #f3f4f6;
  }
}

.trix-content blockquote, trix-editor blockquote {
  border-left: 4px solid #d1d5db;
  padding-left: 1em;
  margin: 0.5em 0;
  color: #6b7280;
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .trix-content blockquote, trix-editor blockquote {
    border-left-color: #4b5563;
    color: #9ca3af;
  }
}

.trix-content code, trix-editor code {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .trix-content code, trix-editor code {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
  }
}

.trix-content pre, trix-editor pre {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1em;
  margin: 0.5em 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .trix-content pre, trix-editor pre {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
  }
}

/* Links in member-written rich text: posts, comments, editions, events.
   The same pair the marketing pages use, so a link looks the same either
   side of signing in.

   These are tokens rather than literals so the two cannot drift apart
   again. The literal stays as a fallback: this stylesheet is required
   through the Sprockets manifest, and nothing guarantees every context
   that pulls it in also loads tailwind.css, which is where the tokens
   are defined.

   zen-800 replaces zen-600 (#408b85). That measured 4.00:1 against white,
   just under WCAG AA's 4.5:1 for normal text; zen-800 is 7.18:1. */
.trix-content a, trix-editor a {
  color: var(--color-zen-800, #2b605b);
  text-decoration: underline;
}

.trix-content a:hover, trix-editor a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* zen-400 replaces #5eead4, which was teal-300 — off the zen palette.
   The old value had more contrast than it needed (9.88:1 on slate-800);
   zen-400 is 5.77:1, still clear of AA, and actually the brand's colour. */
@media (prefers-color-scheme: dark) {
  .trix-content a, trix-editor a {
    color: var(--color-zen-400, #51b2a9);
  }
}

trix-editor {
  border: none;
  border-radius: var(--radius-md); /* rounded-md */
  min-height: 3em;
}

@media (min-width: 640px) {
  trix-editor {
    min-height: 5em;
  }
}

.post-form [id^="content_post"]:focus-visible, .post-form [id^="content_comment"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

trix-toolbar .trix-button-row {
  padding: 3px;
}

@media (min-width: 640px) {
  trix-toolbar .trix-button-row {
    padding: 5px;
  }
}

trix-toolbar .trix-button-group {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 3px;
}

@media (min-width: 640px) {
  trix-toolbar .trix-button-group {
    margin-bottom: 5px;
  }
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button-group {
    border-color: #374151;
  }
}

trix-toolbar .trix-button {
  background-color: transparent;
  border: 0;
  color: #374151;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  transition: all 0.15s ease-in-out;
}

@media (min-width: 640px) {
  trix-toolbar .trix-button {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
  }
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button {
    background-color: transparent;
    color: #d1d5db;
  }

  trix-toolbar .trix-button:not(:first-child) {
    border-left-color: #4b5563;
  }

  /* Invert icon colors in dark mode */
  trix-toolbar .trix-button--icon::before {
    filter: invert(1) brightness(1.5);
  }
}

trix-toolbar .trix-button:hover {
  background-color: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button:hover {
    background-color: #374151;
  }
}

trix-toolbar .trix-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #60a5fa;
}

trix-toolbar .trix-button.trix-active {
  background-color: #e5e7eb;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button.trix-active {
    background-color: #374151;
    color: #f3f4f6;
  }
}

trix-toolbar .trix-dialog {
  background: #ffffff;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.15);
  border-top: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-dialog {
    background: #1f2937;
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3);
    border-top-color: #374151;
  }
}

trix-toolbar .trix-input--dialog {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-input--dialog {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
  }
}

trix-toolbar .trix-button--dialog {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

trix-toolbar .trix-button--dialog:hover {
  background-color: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button--dialog {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
  }

  trix-toolbar .trix-button--dialog:hover {
    background-color: #4b5563;
  }
}
.mobile-app-screenshot-da {
  content: url('https://cdn.zensocial.app/assets/screenshots/mobile-app-screenshot-light-da-382d514a4e15488a554c100eefda954faf2d1548f243f70897eb217d9347db4b.png');
}
.mobile-app-screenshot-en {
  content: url('https://cdn.zensocial.app/assets/screenshots/mobile-app-screenshot-light-en-7b1bd7081a5c1d13f65d76b04f64c63a010174a9d16e95414fe53f55c9faf394.png');
}
.desktop-app-screenshot-da {
  content: url('https://cdn.zensocial.app/assets/screenshots/desktop-app-screenshot-light-da-32c8f30794691edb24654b2ccfb7fe20735f1a9bde3ac3b066aa0bc0a610c7eb.jpg');
}
.desktop-app-screenshot-en {
  content: url('https://cdn.zensocial.app/assets/screenshots/desktop-app-screenshot-light-en-3c639e319c51bfdb6adf12260cdb203eac6ec860eda09006cc5f894095d53dce.jpg');
}

@media (prefers-color-scheme: dark) {
  .mobile-app-screenshot-da {
    content: url('https://cdn.zensocial.app/assets/screenshots/mobile-app-screenshot-dark-da-f5eeff1dc25c8a7fc041fbce5ae1d04eb87970b345227472403d52a552185ce3.png');
  }
  .mobile-app-screenshot-en {
    content: url('https://cdn.zensocial.app/assets/screenshots/mobile-app-screenshot-dark-en-a88eedb8cbb68410a1f0845b13355c96e31ff193967d27fae33bd8477aea6561.png');
  }
  .desktop-app-screenshot-da {
    content: url('https://cdn.zensocial.app/assets/screenshots/desktop-app-screenshot-dark-da-572054f01fa7c2b7faf7ef9a3c071f8f4bc4de269ceaa2011445ec5f01a9eda5.jpg');
  }
  .desktop-app-screenshot-en {
    content: url('https://cdn.zensocial.app/assets/screenshots/desktop-app-screenshot-dark-en-51e5be8f65036339750f173718091f08f4772d801db5405d8acf834174d6325e.jpg');
  }
}

/* ── Hero media stage ──────────────────────────────── */
.hero-media-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  isolation: isolate;
}

/* Radial halo behind the phone */
.hero-halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(13, 148, 136, 0.18), transparent 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  .hero-halo {
    background: radial-gradient(ellipse at 50% 60%, rgba(20, 184, 166, 0.26), transparent 70%);
  }
}

/* Phone wrapper — 3D transform layer */
.hero-phone-wrapper {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(0, 0, 0) rotateY(-6deg) rotateX(2deg);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.14)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@media (prefers-color-scheme: dark) {
  .hero-phone-wrapper {
    filter: drop-shadow(0 20px 56px rgba(0, 0, 0, 0.45)) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.30));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phone-wrapper {
    transform: none !important;
    will-change: auto;
  }
  .hero-halo {
    transform: none !important;
  }
}

/* ── Sticky header states ──────────────────────────── */
/* is-top: roomy, transparent */
header.is-top {
  background-color: transparent;
}

/* is-compact: gains background, blur, bottom line via box-shadow (not border-bottom —
   border-width animation through sub-pixel values causes a visible flash on scroll start) */
header.is-compact {
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  header.is-compact {
    background-color: rgba(15, 23, 42, 0.88);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.25);
  }
}

/* Compact nav reduces padding (Tailwind transition-[padding] handles animation) */
header.is-compact nav {
  padding-top: 0.625rem;    /* 10px — tighter when scrolling down */
  padding-bottom: 0.625rem;
}

/* Scrolling up: slightly more present — restore a bit of the original breathing room */
header.is-compact.is-scrolling-up nav {
  padding-top: 0.875rem;    /* 14px — between compact (10px) and default (16px) */
  padding-bottom: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  header {
    transition: none !important;
  }
  header nav {
    transition: none !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Contextual nav fade-in effect when scrolling past cover */
header.nav-past-cover {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-width: 1px !important;
  background-color: rgb(255 255 255 / 0.8) !important;
  border-bottom-color: rgb(229 231 235) !important;
}

/* Dark mode - class based */
.dark header.nav-past-cover {
  background-color: rgb(15 23 42 / 0.8) !important;
  border-bottom-color: rgb(55 65 81) !important;
}

/* Dark mode - media query fallback */
@media (prefers-color-scheme: dark) {
  header.nav-past-cover {
    background-color: rgb(15 23 42 / 0.8) !important;
    border-bottom-color: rgb(55 65 81) !important;
  }
}

header.nav-past-cover .nav-thumbnail,
header.nav-past-cover .nav-title,
header.nav-past-cover .nav-org-pill {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Three dots icon styles */
.nav-dots {
  color: rgb(55 65 81); /* gray-700 */
  transition: color 300ms ease-in-out;
}

.dark .nav-dots {
  color: rgb(209 213 219); /* gray-300 */
}

@media (prefers-color-scheme: dark) {
  .nav-dots {
    color: rgb(209 213 219); /* gray-300 */
  }
}

/* White dots over a DARK cover (a photo band), but not past it */
header.has-cover:not(.has-cover-light):not(.nav-past-cover) .nav-dots {
  color: rgb(255 255 255) !important;
}

/* Back chevron styles */
.nav-back-chevron {
  color: rgb(55 65 81); /* gray-700 */
  transition: color 300ms ease-in-out;
}

.dark .nav-back-chevron {
  color: rgb(209 213 219); /* gray-300 */
}

@media (prefers-color-scheme: dark) {
  .nav-back-chevron {
    color: rgb(209 213 219); /* gray-300 */
  }
}

/* White back chevron over a DARK cover, but not past it */
header.has-cover:not(.has-cover-light):not(.nav-past-cover) .nav-back-chevron {
  color: rgb(255 255 255) !important;
}

/* Icon button styles over cover image */
/* Give rounded icon buttons a dark backdrop so they're visible against any cover image */
header.has-cover:not(.has-cover-light):not(.nav-past-cover) button.rounded-full {
  background-color: rgba(0, 0, 0, 0.25);
  transition: background-color 300ms ease-in-out;
}

header.has-cover:not(.has-cover-light):not(.nav-past-cover) button.rounded-full:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Light-tone covers: the compact masthead's tint field. `has-cover-light` is
   mirrored from `#cover-sentinel[data-cover-tone="light"]` by
   sticky_nav_controller.js. The bar floats over the page surface above the
   field and, as you scroll, over the pale field itself -- white icons on a
   dark pill would be invisible on both. The pill is neutral rather than
   tinted on purpose: the field colour is Home::Palette's `tint_a` on the
   org's own brand hue (any hue, lightness ~0.92), so a per-hue pill would
   have to be re-proved for every org. White at 70% over any of those tints
   stays a near-white surface, and gray-900 on it clears AA everywhere --
   including Zen green's tint, which is what a circle with no org gets. */
header.has-cover-light:not(.nav-past-cover) .nav-dots,
header.has-cover-light:not(.nav-past-cover) .nav-back-chevron {
  color: rgb(17 24 39); /* gray-900 */
}

header.has-cover-light:not(.nav-past-cover) button.rounded-full {
  background-color: rgba(255, 255, 255, 0.7);
  transition: background-color 300ms ease-in-out;
}

header.has-cover-light:not(.nav-past-cover) button.rounded-full:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Dark mode is `prefers-color-scheme` here -- Tailwind v4's default `dark:`
   variant, with no class-based override in app/assets/tailwind/application.css
   -- so this is the ONE dark generation of these rules. An earlier
   `.dark header.has-cover-light ...` copy sat above it and could never match. */
@media (prefers-color-scheme: dark) {
  header.has-cover-light:not(.nav-past-cover) .nav-dots,
  header.has-cover-light:not(.nav-past-cover) .nav-back-chevron {
    color: rgb(243 244 246); /* gray-100 */
  }

  header.has-cover-light:not(.nav-past-cover) button.rounded-full {
    background-color: rgba(15, 23, 42, 0.7); /* slate-900 */
  }

  header.has-cover-light:not(.nav-past-cover) button.rounded-full:hover {
    background-color: rgba(15, 23, 42, 0.9) !important;
  }
}

/* Wide screens: while the cover is in view the controls sit inside the
   masthead, like on phones and the old full-bleed cover, instead of pushing
   the masthead down. This is tone-independent (owner decision 2026-09-19):
   a compact masthead carries the bar on its tint field exactly as the photo
   variant carries it on the photo, so both start 1.5rem below the top
   (Circles::HeaderComponent::CONTAINER_CLASSES `sm:pt-6`) and get the same
   treatment here. Only the *colours* above stay tone-aware.

   The header trades `fixed` for `sticky` and joins the flow: 1.5rem of top
   padding starts the h-14 row inside the masthead, the row scrolls with the
   page for those 24px, and `top: -1.5rem` then holds the row at the very
   top -- where the fixed bar sits on every other page, and where the
   sentinel observer's -56px rootMargin expects it. The negative bottom
   margin equals the explicit height (padding + row; the height keeps the
   past-cover 1px border from changing the footprint, which would nudge the
   sentinel and flip the observer), so the header takes no room in flow and
   the page header below starts at the same y as under `fixed`. Padding
   rather than a top margin: a first child's top margin would collapse
   through the layout wrapper and body and add 24px to the document.
   The header keeps sticky for the whole cover lifetime; box properties are
   left out of its transition so adding `has-cover` on load, or the
   past-cover border, never animates the layout. The row is inset 1rem
   inside the masthead's edge (the container's sm:px-6 / lg:px-8 plus 1rem)
   until the sentinel scrolls out (`nav-past-cover`), when it falls back to
   the standard container so the solid bar looks like every other page. */
header.has-cover > div {
  transition: padding 300ms ease-in-out;
}

@media (min-width: 40rem) {
  header.has-cover {
    position: sticky;
    top: -1.5rem;
    height: calc(3.5rem + 1.5rem);
    padding-top: 1.5rem;
    margin-bottom: calc(-3.5rem - 1.5rem);
    transition-property: transform, background-color, border-color, backdrop-filter;
  }

  header.has-cover:not(.nav-past-cover) > div {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 64rem) {
  header.has-cover:not(.nav-past-cover) > div {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}


/* Mobile action sheet — only what Tailwind can't handle */

/* State transitions: parent .is-open toggles children */
.action-sheet-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}

.action-sheet-overlay.is-open .action-sheet-panel {
  translate: 0 0;
}

/* Panel slide + safe-area bottom padding */
.action-sheet-panel {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0.5rem));
  translate: 0 100%;
  transition: translate 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Larger tap targets for menu items moved into the action sheet */
.action-sheet-menu a,
.action-sheet-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.action-sheet-menu a:active,
.action-sheet-menu button:active {
  background-color: rgb(243 244 246);
}

.dark .action-sheet-menu a:active,
.dark .action-sheet-menu button:active {
  background-color: rgb(31 41 55);
}

@media (prefers-color-scheme: dark) {
  .action-sheet-menu a:active,
  .action-sheet-menu button:active {
    background-color: rgb(31 41 55);
  }
}