/*
 * Default Trix editor styles. See Action Text overwrites below.
*/

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: black; }
  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-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

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

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

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::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: ' \2022 '; }
  .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%; }

/*
 * 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;
}

/*
 * Follow the Bulma theme (light and dark). Trix ships fixed greys, white
 * dialogs and black SVG toolbar icons, which vanish on a dark background.
*/
trix-editor,
trix-toolbar .trix-dialog,
trix-toolbar .trix-input--dialog {
  background-color: var(--bulma-scheme-main);
  border-color: var(--bulma-border);
  color: var(--bulma-text);
}
trix-toolbar .trix-dialog { box-shadow: var(--bulma-shadow); }
trix-toolbar .trix-button-group,
trix-toolbar .trix-button,
trix-toolbar .trix-button:not(:first-child) { border-color: var(--bulma-border); }
trix-toolbar .trix-button { color: var(--bulma-text); }
trix-toolbar .trix-button.trix-active {
  background: var(--bulma-link-soft);
  color: var(--bulma-link-soft-invert);
}
@media (prefers-color-scheme: dark) {
  trix-toolbar .trix-button--icon::before { filter: invert(1); }
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
/*
 * 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.
 *


 */

/* Theme. Bulma 1 derives everything — the 00–95 shade ladder, hover/active
   states, readable text-on-primary, and the dark theme — from these variables.
   Primary is sampled from the wordmark's ground (#45A5AE, green-logo.png).
   The neutral scheme hue is left at Bulma's default 221deg: the wordmark's
   gradient runs 164deg–255deg, so 221 is already its midpoint. */
:root {
  /* Bulma themes what it draws, but browser-drawn widgets (a select's option
     list, date pickers, scrollbars) only follow the OS theme when told to —
     otherwise a dark page gets a light option list with inherited light text. */
  color-scheme: light dark;

  --bulma-primary-h: 185deg;
  --bulma-primary-s: 43%;
  --bulma-primary-l: 48%;
  --bulma-link-h: 185deg;
  --bulma-link-s: 43%;
  --bulma-link-l: 48%;
  /* Bulma fixes each colour's text lightness at build time: near-black on its
     turquoise primary, white on its blue link. Both are the same teal here, and
     white on it is 2.85:1 (fails AA), so link text follows primary's dark. */
  --bulma-link-invert-l: var(--bulma-primary-invert-l);
  /* Link *text* (a, active tab, pagination) uses --bulma-link-on-scheme-l, also
     fixed at build for Bulma's vivid blue: 58% light / 73% dark. At 43%
     saturation the teal is washed out at those: 3.2:1 on white, and in dark
     mode nearly the same lightness as body text. 35% is 5.0:1 on white (AA);
     62% in dark is 8.8:1 and reads as a colour next to the 71% grey text. */
  --bulma-link-on-scheme-l: 35%;
  --bulma-family-primary: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Slim Select ships light-only defaults; point its variables at Bulma's so
     the widget follows the theme. */
  --ss-bg-color: var(--bulma-scheme-main);
  --ss-font-color: var(--bulma-text);
  --ss-font-placeholder-color: var(--bulma-text-weak);
  --ss-border-color: var(--bulma-border);
  --ss-primary-color: var(--bulma-primary);
  --ss-focus-color: var(--bulma-link);
}
@media (prefers-color-scheme: dark) {
  :root { --bulma-link-on-scheme-l: 62%; }
}

/* Firefox paints a select's option list with the select's own background and
   text colours, so a transparent select (the roster slot control) gets a light
   UA popup with the theme's light text in dark mode. Colour options explicitly. */
option {
  background-color: var(--bulma-scheme-main);
  color: var(--bulma-text);
}

/* Bulma gives buttons an is-soft variant that flips with the theme, but not
   notifications (is-light stays pale in dark mode). Same idea, same variables. */
.notification.is-soft {
  --bulma-notification-background-l: var(--bulma-soft-l);
  --bulma-notification-color-l: var(--bulma-soft-invert-l);
}

/* Charts are paper. The chart libraries draw print-style dark ink on a
   transparent canvas, so rather than re-theming the canvas by script, every
   chart container (.chart-paper via config/initializers/chartkick.rb, the
   correlations page's #chart) gets a white card in both themes. The PNG
   download's white background matches what's on screen. Invisible in light mode;
   in dark mode it reads as an embedded document. */
#chart,
.chart-paper {
  background: #fff;
  border-radius: var(--bulma-radius);
  padding: 0.75rem;
}

/* Round crop overlay for avatar cropping (data-controller="crop") */
[data-controller="crop"] .cropper-view-box,
[data-controller="crop"] .cropper-face {
    border-radius: 50%;
}

/* This is necessary for the consent confirmation question display */
.hidden {
    display: none;
}
.visible {
    display: block;
}

/* Summary table + coverage bar: the wrapper shrinks to the table's width so
   the bar underneath spans exactly the table. */
.summary-table-wrap {
  display: inline-block;
}

.summary-table-wrap .table {
  margin-bottom: 0;
}

.coverage-bar {
  display: flex;
  gap: 4px;
  height: 14px;
  margin: 0.75rem 0 0.25rem;
}

.coverage-bar > div {
  flex-basis: 0;
  border-radius: 2px;
}

/* Recorded is the "complete" state, so it takes the same success as the
   period grid; missing is a hatch of the theme's border colour. */
.coverage-bar-recorded {
  background-color: var(--bulma-success);
}

.coverage-bar-missing {
  background: repeating-linear-gradient(45deg, transparent 0 5px, var(--bulma-border) 5px 7px);
}

.button {
    .show-when-enabled {display: initial}
    .show-when-disabled {display: none}
    &[disabled]
    {
    .show-when-enabled {display: none}
    .show-when-disabled {display: initial}
    }
}

select[data-id^="ss-"] {
  pointer-events: none;
  opacity: 0;
  display: flex !important;
  position: relative;
  bottom: 0;
  height: 0px;
  width: 100%; /* Set width to 100% */
  align-items: flex-start; /* Align items to the start (left) */
  justify-content: flex-start; /* Justify content to the start (left) */
}

/* Force Slim Select box height only. */
.ss-main .ss-values {
  height: 2em !important;
}

/* Handover-alert "when to show it" sentence: inline controls that read as one
   statement and wrap gracefully; the optional field condition is a removable
   chip at the end. */
.handover-sentence {
  line-height: 2.6;
}
.handover-sentence .select,
.handover-sentence .input {
  vertical-align: middle;
}
.handover-sentence .input {
  display: inline-block;
}
.handover-condition {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  position: relative;
  background: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), .08);
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius);
  padding: 0.45rem 2.1rem 0.45rem 0.7rem;
}
.handover-condition .field,
.handover-condition .control {
  margin: 0 !important;
}
.handover-condition .field.is-grouped {
  display: inline-flex;
  gap: 0.35rem;
}
.handover-condition .delete {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
}

/* In the filter grid, keep the date inputs and slim-select widgets the same
   height so every field lines up. The inputs inherit a larger font here, so pin
   them to 1rem (matching slim) — otherwise their em-based height is taller. */
.fixed-grid .input {
  font-size: 1rem;
  box-sizing: border-box;
}
.fixed-grid .input,
.fixed-grid .ss-main {
  height: 2.5rem;
}
.fixed-grid .ss-main .ss-values {
  height: 100% !important;
}


footer{
    padding: 1rem 1rem 1rem !important;
}

.site-footer .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.site-footer .footer-separator {
  color: #888;
}

.site-footer .fa-facebook {
  color: #1877F2;
}

.site-footer .fa-youtube {
  color: #FF0000;
}

.static-page-content {
  max-width: 60rem;
  margin: 0 auto;
}

#flex-container {
   display:flex;
   flex-direction:column;
   min-height:100vh;
   min-height:100svh;
}

#flex-container > footer {
   margin-top:auto;
}

/* Bulma's .icon is a fixed 1.5rem box, so a tab carrying an icon (Archive, the
   add "+", chart tabs) is a different height to a text-only tab. Tabs are
   centered in the row, so a shorter active tab floats above the row's bottom
   border and no longer covers it, leaving a line under the active tab.
   1.5em is one text line box at the tab's own font size, so icon-only tabs
   (the "+") match icon+text and text-only tabs at every tab size. Font Awesome
   sets line-height:1 on the glyph, which is why height:auto is not enough. */
.tabs .icon {
   height: 1.5em;
   width: auto;
}

/* Form hierarchy (subreportdefs#index).
 *
 * This layout is load-bearing for the drag-and-drop, not just cosmetic. On touch
 * SortableJS walks up from the element under the finger and stops at the FIRST
 * list it finds -- and a list that refuses the drop still counts as having
 * answered, so no outer list gets a second chance. The drop level is therefore
 * decided purely by which list's box is under the finger.
 *
 * That is why this is a flat outline rather than nested Bulma .box cards: a card
 * with 1.25rem padding wrapping its own child list left the parent almost
 * entirely covered, so only the innermost list was ever reachable and forms
 * could be nested but never un-nested.
 *
 * Two rules keep it working. Rows must stay tall -- a row is the only region
 * whose nearest list is its PARENT's, so it is the sole target for "drop at the
 * level above". And nested lists must be indented with MARGIN, never padding:
 * margin hit-tests to the parent row (giving a full-height un-nest strip down
 * the left), whereas padding would extend the child over its parent again.
 */
/* .reorder-list is the same look for the app's reorder-only lists (shifts,
   questions, enum values, handover alerts), which drag via sortable_controller
   rather than the nested hierarchy one. */
.root-subreportdef,
.reorder-list {
  border: 1px solid var(--bulma-border);
  background-color: var(--bulma-scheme-main);
}

/* border-top, not border-bottom: the last row may be deeply indented, so a
   bottom border would stop short of the container edge and look ragged. */
.heirarchy-row {
  min-height: 4.5rem;
  padding: 1rem;
  border-top: 1px solid var(--bulma-border-weak);
}

/* The first row's border would double up against the container's own. In the
   reorder lists each row is wrapped in the <li> Sortable moves. */
.root-subreportdef > .heirarchy-row:first-child,
.reorder-list > li:first-child > .heirarchy-row {
  border-top: none;
}

/* :not(:empty) so a leaf form's empty container collapses instead of padding
   every row with blank space, and the guide line stays off leaves. */
.nested-heirarchy:not(:empty) {
  margin-left: 2rem;
  border-left: 1px solid var(--bulma-border-weak);
}

/* The sole drag origin. Stretched to full row height and bled into the row's
   padding, so the target is the whole left edge rather than a glyph.
   touch-action: none is essential -- without it the browser claims a touch
   starting here as a scroll before Sortable ever sees it. */
.drag-handle,
.drag-handle-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 2.75rem;
  margin: -1rem 0.5rem -1rem -1rem;
  background-color: var(--bulma-background);
  border-right: 1px solid var(--bulma-border-weak);
  color: var(--bulma-text-weak);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.drag-handle:active {
  cursor: grabbing;
  background-color: var(--bulma-background-active);
}

/* Same strip, same footprint -- but visibly inert: no grab cursor, no press
   state, and a much lighter glyph. Keeps the root row aligned with the rest
   while making clear it can't be moved. */
.drag-handle-locked {
  cursor: not-allowed;
  color: var(--bulma-border);
  background-color: var(--bulma-scheme-main-bis);
}

/* The in-form variant: same drag origin, but sits inline in a nested-fields
   row (no row padding to bleed into, no full-height strip). */
.drag-handle-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 2.5rem;
  color: var(--bulma-text-weak);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.drag-handle-inline:active {
  cursor: grabbing;
}

.heirarchy-actions {
  flex: 0 0 auto;
  gap: 0.25rem;
}

/* The index rows' quiet halves: the description after the name, and the fact
   line (questions · shifts · schedule) beneath it. */
.heirarchy-desc {
  color: var(--bulma-text-weak);
  font-style: italic;
}

/* Whole-row links (stretched-link on the name). The drag handle and action
   buttons sit above the overlay so drag and click still reach them. */
.heirarchy-row:has(.stretched-link) { position: relative; }
.heirarchy-row:has(.stretched-link):hover { background-color: var(--bulma-scheme-main-bis); }
.heirarchy-row .drag-handle,
.heirarchy-row .drag-handle-locked,
.heirarchy-row .heirarchy-actions {
  position: relative;
  z-index: 1;
}

.heirarchy-facts {
  font-size: 0.85rem;
  color: var(--bulma-text-weak);
  margin-top: 0.15rem;
}

.heirarchy-facts .tag {
  vertical-align: baseline;
}

/* The form builder's question rows: two lines per question — handle · name ·
   type · flags · actions, then the prompt full-width. No header row, so
   nothing collides when the top line wraps on narrow screens. */
.question-row {
  border: 1px solid var(--bulma-border-weak);
  border-radius: var(--bulma-radius);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.question-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.question-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  /* The name field carries a mini-label above it, so the rest of the line
     hangs from the bottom edge, level with the input itself. */
  align-items: flex-end;
}

.question-row-name {
  flex: 1 1 12rem;
  min-width: 10rem;
}

/* The in-row teaching labels: "Name" on the top line, "Prompt" above the
   textarea. Small and muted — the row's structure does the rest. */
.question-row-name,
.question-row-prompt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.question-row-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bulma-text-weak);
}

/* Nudge the baseline-ish items up so they sit level with the input's text
   (the action buttons are tall enough to just bottom-align). */
.question-row-type,
.question-row-checks {
  margin-bottom: 0.4rem;
}

.question-row-type {
  color: var(--bulma-text-weak);
  white-space: nowrap;
}

.question-row-checks {
  display: flex;
  gap: 1rem;
  align-items: center;
  white-space: nowrap;
}

.question-row-actions {
  margin-left: auto;
}

/* Ransack joins label and sort icon with &nbsp;, but Firefox still breaks
   before the inline-block icon in a narrow header cell. */
a.sort_link { white-space: nowrap; }

/* Freeze the top row in Admin user table*/
.sticky-header-wrapper {
  max-height: 650px;      
  overflow-y: auto;      
}

.sticky-header-wrapper thead th {
  position: sticky; 
  top: 0;          
  z-index: 10;      
}

.feature-grid {
  align-items: stretch;
}

.feature-grid .cell {
  display: flex;
}

.feature-grid .box {
  height: 100%;
  width: 100%;
}

/* Button-toggles: a hidden input (kept focusable — no display:none) inside a
   label.button. Shared by "Nothing to report" (checkbox) and the Yes/No
   answers (radios), which need thumb-sized targets on a phone. */
.nil-toggle input,
.radio-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

/* selected look: filled "locked in" state, flipping with the theme */
.nil-toggle:has(:checked),
.radio-toggle:has(:checked) {
  background-color: var(--bulma-text);
  border-color: var(--bulma-text);
  color: var(--bulma-scheme-main);
}
/* A required Yes/No left unanswered shows the same invalid ring as native
   controls (the ring can't sit on the hidden radio itself). */
.radio-toggle { min-width: 5rem; justify-content: center; }
/* A scale's numbers: narrower, so 1–5 sits on one line of a phone. */
.radio-toggle.scale-option { min-width: 3rem; }
/* A choice question's options carry arbitrary text: let a long option wrap
   instead of clipping at .button's fixed height. */
.radio-toggle.choice-option { white-space: normal; height: auto; }
.radio-toggle:has(:user-invalid) {
  outline: 2px solid var(--bulma-danger);
  outline-offset: 2px;
}

/* "<form> · <time>" opens that recording, so it must stay a submit button — but
   Bulma's .button nowraps and fixes the height, which clips a long form name on
   mobile. Let it wrap. */
.recorded-entry {
  white-space: normal;
  height: auto;
}

/* Quiz answer options: Bulma's .button nowraps at a fixed height, which clips a
   long answer on a narrow screen. Let the answer text wrap and grow the button
   to fit, keeping the "A)" label and chevron pinned to the edges. */
.quiz-option {
  white-space: normal;
  height: auto;
  min-height: 2.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.quiz-option > span:nth-child(2) {
  flex: 1 1 auto;
  text-align: left;
  padding: 0 0.75em;
}
.quiz-option > span:first-child,
.quiz-option > .icon {
  flex: 0 0 auto;
}

/* nil checked -> the Record button in the same section goes inert */
.form-section:has(.nil-toggle :checked) .record-btn {
  opacity: 0.5; pointer-events: none;
}

/* Save tapped while forms below are unresolved (save-guard): the same danger
   ring required questions use, on the whole card, until each form is
   recorded or marked "Nothing to report". */
.form-section.needs-attention {
  outline: 2px solid var(--bulma-danger);
  outline-offset: 2px;
}

/* A question row flagged "Archived" in the form builder reads as inactive.
   Visual only: nothing is disabled, so every value (and the archive checkbox
   itself) still submits, and the row stays clickable to un-archive. */
.nested-fields:has(input[name$="[archive]"]:checked) {
  opacity: 0.5;
}

/* Form validation feedback, app-wide. Mirrors Bulma's is-danger / is-success
   off native HTML5 validation. :user-invalid / :user-valid only match after the
   user has interacted with and left a field, so untouched fields stay neutral. */
.input:user-invalid,
.textarea:user-invalid,
.select select:user-invalid {
  border-color: var(--bulma-danger);
}
.input:user-invalid:focus,
.textarea:user-invalid:focus,
.select select:user-invalid:focus {
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 0.25);
}

/* Success is scoped to required fields, so optional filled-in fields don't all go green. */
.input:required:user-valid,
.textarea:required:user-valid,
.select select:required:user-valid {
  border-color: var(--bulma-success);
}
.input:required:user-valid:focus,
.textarea:required:user-valid:focus,
.select select:required:user-valid:focus {
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 0.25);
}

/* Radios, checkboxes and file inputs aren't Bulma .input boxes, so highlight them
   directly. Covers a required radio group left unselected (both options match
   until one is picked) and a required file picker left empty. */
input[type="radio"]:user-invalid,
input[type="checkbox"]:user-invalid,
input[type="file"]:user-invalid {
  outline: 2px solid var(--bulma-danger);
  outline-offset: 2px;
}

/* SlimSelect (myenum multi-select) hides the real <select> and renders its own
   .ss-main widget as the next sibling, so drive the widget's border off the
   hidden select's validity. */
select:user-invalid + .ss-main {
  border-color: var(--bulma-danger);
}
select:required:user-valid + .ss-main {
  border-color: var(--bulma-success);
}

/* Bulma's .image.is-square stretches the <img> to fill the square box (object-fit
   defaults to fill), distorting non-square photos like portrait shots. Crop to fill
   instead so thumbnails keep their aspect ratio. */
.image.is-square img {
  object-fit: cover;
}

/* The dropdown chevron defaults to the link colour; it belongs to the FAQ
   item, so it takes the item text colour like the icon beside it. */
.navbar { --bulma-navbar-dropdown-arrow: currentColor; }

/* On touch/mobile (below Bulma's desktop breakpoint) the navbar collapses into
   the burger and Bulma renders dropdown menus permanently expanded. Hide them
   until their parent gets .is-active (toggled on tap in application.js) so the
   FAQ sub-items collapse like a normal accordion. Desktop keeps hover. */
@media screen and (max-width: 1023px) {
  .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none;
  }
}

/* Roster form cells. Both states — a scheduled shift (.shift-slot) and the
   stand-in for a not-required one (.shift-empty) — are always in the DOM and
   are the same height, so toggling a cell never reflows the row. */
.roster-slot {
  min-width: 9rem;
}

/* The select's own border is removed below, so focus needs its own marker. */
.roster-slot select:focus-visible {
  outline: 2px solid var(--bulma-link);
  outline-offset: -2px;
}


.shift-slot {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-right: .25rem;
  border-radius: var(--bulma-radius);
  background: var(--bulma-scheme-main-bis);
}
.shift-slot .select { width: 100%; height: 100%; }
.shift-slot .select select {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-left: .5rem;
}
.shift-slot.is-unallocated { background: var(--bulma-warning-soft); }
.shift-slot.is-unallocated select { color: var(--bulma-warning-soft-invert); }

.shift-slot .delete { background: transparent; flex: none; }
.shift-slot .delete::before,
.shift-slot .delete::after { background: var(--bulma-text-weak); }

.shift-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.25rem;
  border: 1px dashed var(--bulma-border);
  border-radius: var(--bulma-radius);
  background: transparent;
  color: var(--bulma-text-weak);
  cursor: pointer; /* not inheriting Bulma's .button, which supplies this */
}
.shift-empty:hover { border-color: var(--bulma-link); color: var(--bulma-link); }

.roster-table td { padding: 4px; vertical-align: middle; }

/* rosters#show: the cycle flattened to chart mode. Allocated cells are plain
   text; the two non-default states use whole-cell fills, the same language as
   the period grid's cells — warning for the one that needs attention, a faint
   grey for a cell that is out of the schedule. */
.roster-pattern { font-variant-numeric: tabular-nums; }
.roster-pattern td.is-unallocated { background: var(--bulma-warning-soft); color: var(--bulma-warning-soft-invert); }
.roster-pattern td.is-not-required { background: var(--bulma-scheme-main-bis); color: var(--bulma-text-weak); }

/* Week grouping on the roster form. Each week's header row carries a
   visually-hidden radio picking the *current* week — the one whose row dates
   are this real-world week. roster_days_controller toggles .is-current /
   .is-current-week / .is-only-week; everything visual hangs off those. */
.roster-table .week-header td,
.roster-pattern .week-header td { padding: 8px; background: var(--bulma-scheme-main-bis); }
/* Soft pair for the header, a translucent wash for its rows: both read the
   same in either theme (the fixed -90/-95 shades didn't). */
.roster-table .week-header.is-current td,
.roster-pattern .week-header.is-current td { background: var(--bulma-primary-soft); color: var(--bulma-primary-soft-invert); }
.roster-table tr.is-current-week td { background: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), .08); }
/* On the pattern the current week marks only the header and date column — a
   row-wide wash would fight the cells' own state fills. */
.roster-pattern tr.is-current-week td:first-child { background: var(--bulma-primary-soft); color: var(--bulma-primary-soft-invert); }

.week-current-toggle { cursor: pointer; }
.week-current-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.week-current-toggle input[type="radio"]:focus-visible + .set-current-button {
  outline: 2px solid var(--bulma-link);
  outline-offset: 2px;
}
.week-header .current-week-label { display: none; }
.week-header.is-current .set-current-button { display: none; }
.week-header.is-current .current-week-label { display: inline-flex; }
.week-header.is-only-week .week-current-toggle { display: none; }

/* clients#show period grid. Three axes, one channel each: line 1 word +
   cell fill carry status, line 2 carries assignment (warning text when
   unallocated, struck when unrecoverable), a line-2 suffix carries
   provenance. Glyphs sit in the cell corner, always visible — no
   hover-reveal (docs/DONE-clients-show-grid-plan.md). */
/* The grid lives in .grid-scroll: sideways scroll on narrow screens instead
   of squeezing, with the date column stuck to the left edge. Column widths
   come from the header cells (340px preferred, 200px floor), so short cell
   text changing under turbo streams never reflows the table. Tabular
   numerals so dates and counts keep their column rhythm as cells update. */
.grid-scroll { overflow-x: auto; }
.roster-grid { font-variant-numeric: tabular-nums; }
.roster-grid thead th:not(:first-child) { width: 340px; min-width: 200px; }
.roster-grid thead th:first-child,
.roster-grid tbody .grid-date { position: sticky; left: 0; z-index: 3; }
.roster-grid thead th {
  background: var(--bulma-scheme-main-bis);
  color: var(--bulma-text-weak);
  font-weight: 400;
  border-bottom: 1px solid var(--bulma-border);
}
.roster-grid thead th:first-child { width: 8rem; }
.roster-grid tbody .grid-date { background: var(--bulma-scheme-main-bis); }

/* Uniform row height. td height is a minimum (content can grow it), so it
   sits above the tallest cell content — two lines plus padding (~60px) —
   making every row exactly this height on every page, whether its cells are
   one-line, two-line, or empty. */
.roster-grid tbody td { height: 4rem; }

.roster-grid td.roster-cell { padding: 0; }

/* Cell hover rather than row hover: a slight darkening that works over any
   fill — tinted status cells included — without replacing their colour. In
   dark mode the fills are dark, so the shift brightens instead. (OS-level
   theme only: the app sets no data-theme attribute.) */
.roster-grid td.roster-cell:hover { filter: brightness(.96); }
@media (prefers-color-scheme: dark) {
  .roster-grid td.roster-cell:hover { filter: brightness(1.2); }
}

.roster-grid .cell-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  height: 100%;
  padding: .45rem 2.4rem .45rem .6rem; /* right pad clears the glyph corner */
  color: inherit;
}
a.cell-body:hover .cell-status { text-decoration: underline; }

.roster-grid .cell-status { font-weight: 600; }
.roster-grid .cell-assignment { font-size: .85rem; }
/* Glyphs: 18px marks centred in 26px boxes. */
.roster-grid .cell-glyphs {
  position: absolute;
  top: .2rem;
  right: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--bulma-text-weak);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

/* Fill = status, always. Due/Scheduled keep the neutral surface (the table
   border is the hairline); Not required/Unrecoverable have no fill and rely
   on muted text. Bulma's soft/soft-invert pairs flip with the theme, and the
   colour sits on the cell so every line inside the tint inherits it — the
   status word only adds weight. */
.roster-cell.is-fill-complete { background: var(--bulma-success-soft); color: var(--bulma-success-soft-invert); }
.roster-cell.is-fill-in-progress { background: var(--bulma-warning-soft); color: var(--bulma-warning-soft-invert); }
.roster-cell.is-fill-overdue { background: var(--bulma-danger-soft); color: var(--bulma-danger-soft-invert); }
.roster-cell.is-fill-none .cell-status { color: var(--bulma-text-weak); font-weight: 400; }
/* The "no fill" states still paint the page surface explicitly (identical at
   rest), so the hover's brightness shift has something to darken. */
.roster-cell.is-fill-neutral,
.roster-cell.is-fill-none { background: var(--bulma-scheme-main); }

/* Assignment modifiers: unrecoverable strikes (and mutes) the name but keeps
   it visible — assignment is the blame trail; unallocated warns in the text,
   never the fill. */
.roster-grid .cell-assignment.is-struck {
  text-decoration: line-through;
  color: var(--bulma-text-weak);
}
.roster-grid .cell-assignment.is-unallocated { color: var(--bulma-warning-on-scheme); }

.roster-grid .cell-provenance { color: var(--bulma-text-weak); font-size: .8rem; }

.roster-grid tr.is-today .grid-date-label { font-weight: 700; }
.roster-grid .today-label {
  display: block;
  font-size: .75rem;
  color: var(--bulma-primary-on-scheme);
}

/* Roster period navigation: Today · ‹ · › · the period label, left-justified.
   Shared by clients#show, Report Summary and History. */
.roster-period-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: 1rem;
}
.roster-period-nav .roster-period-label { margin: 0 0 0 .75rem; }

/* team_performance#show heatmap: support people × periods, each cell that
   period's share of reports filed on time, banded into the grid's signal
   colours (RostersHelper#report_heatmap_band). A cell with no shifts is a
   weak dash; the selected period marks its header only, like the current
   week on the roster pattern. */
.report-heatmap { font-variant-numeric: tabular-nums; }
.report-heatmap th, .report-heatmap td { text-align: center; }
.report-heatmap th:first-child, .report-heatmap td:first-child { text-align: left; }
.report-heatmap th.is-selected { background: var(--bulma-primary-soft); }
.report-heatmap th.is-selected a { color: var(--bulma-primary-soft-invert); }
.report-heatmap td.band-good { background: var(--bulma-success-soft); color: var(--bulma-success-soft-invert); }
.report-heatmap td.band-mid { background: var(--bulma-warning-soft); color: var(--bulma-warning-soft-invert); }
.report-heatmap td.band-poor { background: var(--bulma-danger-soft); color: var(--bulma-danger-soft-invert); }
.report-heatmap td.band-none { color: var(--bulma-text-weak); }

/* The ⋯ corrections affordance (edit users, gap cells): a separate link in
   the cell corner, outside the whole-cell link — the one and only way to the
   corrections popover. When + is also present the two sit together — +
   shifts left to make room. Always visible, never hover-revealed. */
.roster-grid td.roster-cell { position: relative; }
.roster-cell .cell-corrections {
  position: absolute;
  top: .2rem;
  right: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--bulma-radius);
  color: var(--bulma-text-weak);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.roster-cell .cell-corrections:hover {
  color: var(--bulma-link);
  background: var(--bulma-scheme-main-bis);
}
.roster-cell.has-corrections .cell-glyphs { right: calc(.25rem + 28px); }
.roster-cell.has-corrections .cell-body { padding-right: 4.2rem; }

/* The corrections popover: anchored beside its grid cell by
   cell_modal_controller, the page visible behind — the underlay is
   transparent and only catches outside clicks. Starts hidden; the controller
   shows it once placed. The status control inside is the shared .roster-slot
   component, byte-identical to the roster form's. */
.cell-popover-underlay { position: fixed; inset: 0; z-index: 45; }
.cell-popover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 46;
  visibility: hidden;
  width: 26rem;
  max-width: calc(100vw - 1rem);
  background: var(--bulma-scheme-main);
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius-large);
  box-shadow: 0 10px 30px rgba(10, 10, 10, .2);
}
.cell-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bulma-border);
}
.cell-popover-title { font-weight: 600; }
.cell-popover-body { padding: 1rem; }
.cell-popover-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--bulma-border);
}

.cell-modal .cell-modal-subline { margin-bottom: .75rem; }
.cell-modal .cell-modal-scope-note { margin-top: .5rem; }
.cell-modal .cell-modal-unrecoverable { margin: .5rem 0; }
.cell-modal .cell-modal-unrecoverable p { margin-left: 1.6rem; }
.cell-modal .cell-modal-deviation { margin-top: 1rem; }

.cell-modal .scope-option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .75rem;
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius);
  margin-bottom: .5rem;
  cursor: pointer;
}
.cell-modal .scope-option:has(input:checked) {
  border-color: var(--bulma-link);
  background: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), .08);
}
.cell-modal .scope-option > input { margin-top: .25rem; }

/* Save flash: a turbo-stream-replaced followup row or roster cell fades in
   from the success tint, so a change visibly registers without a page reload.
   from-only keyframe: the element settles back to its natural background
   (stripe or status fill included), and the animation runs once, on insertion. */
@keyframes save-flash {
  from { background-color: var(--bulma-success-soft); }
}
tr.save-flash > td,
td.save-flash {
  animation: save-flash 1.5s ease-out;
}


/* Follow up… modal: each radio card's body (field + help) is shown only while
   its radio is checked — no JS involved. */
.followup-modal .scope-option .followup-option-body { display: none; }
.followup-modal .scope-option:has(input:checked) .followup-option-body { display: block; }
/* A card with nothing to submit (the setup link): no radio to align to, and
   nothing to click on the card itself. */
.followup-modal .scope-option.is-static { cursor: default; }
.followup-modal hr { margin: .75rem 0; }
.followup-modal .scope-option .input,
.followup-modal .scope-option .textarea { cursor: text; }

/* Followup checklist rows. A row done for today (followed up or resolved
   today, the participant's day) sits on the success tint — set through Bulma's table
   variables so the stripe and hover rules keep working, with the hover shade
   derived the way Bulma derives its own. A resolved row (written off, or
   report completed late) is also muted: Bulma colours cells via
   --bulma-table-color, so that is what's overridden — a text helper on the
   <tr> wouldn't reach the <td>s. */
tr.followup-ticked {
    --bulma-table-striped-row-even-background-color: var(--bulma-success-soft);
    /* Both hover variables: hoverable+striped tables paint even rows from the
       second one, so covering only the first left them going grey on hover. */
    --bulma-table-row-hover-background-color:
        hsl(var(--bulma-success-h), var(--bulma-success-s),
            calc(var(--bulma-soft-l) + var(--bulma-hover-background-l-delta)));
    --bulma-table-striped-row-even-hover-background-color:
        hsl(var(--bulma-success-h), var(--bulma-success-s),
            calc(var(--bulma-soft-l) + var(--bulma-hover-background-l-delta)));
    background-color: var(--bulma-success-soft);
}
tr.followup-resolved { --bulma-table-color: var(--bulma-text-weak); }

/* The Follow up progress bar while there is still work to do: a pale teal,
   quieter than the full-brand is-primary the bar turns when everything is
   done. */
.progress.is-underway { --bulma-progress-value-background-color: #9ccfc9; }

/* Short single-value inputs (a phone number, an OTP code) whose contents would
   drown in a full-width field on desktop. On phones they fill the screen. */
.input-short { max-width: 20em; }

/* Chrome (and Safari) wrap a <details>' contents in a ::details-content
   pseudo-element, which Bulma's `* { box-sizing: inherit }` reset can't reach —
   so everything inside a fold would fall back to content-box (selects grow past
   their wrapper, for one). Pass the inherited value through the wrapper. */
::details-content { box-sizing: inherit; }

/* Combined Follow up page: each participant is a <details> fold whose summary
   holds a heading and the tracker; the heading sits on the marker's line and
   the tracker takes the summary's full width below it. */
.followup-section > summary { cursor: pointer; }
.followup-section > summary > .subtitle { display: inline; }
.followup-section > summary > .is-block { margin-top: .5rem; }

/* Initials avatar (ClientsHelper#client_avatar). Initials scale with the
   Bulma image size the helper picks — one rule per size in use. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: none;
}
.avatar.is-48x48 { font-size: 19px; }
.avatar.is-32x32 { font-size: 13px; }

/* The participant bar's identity block: avatar · name · quiet edit pencil. */
.participant-bar-identity { align-items: center; gap: 0.5rem; }

/* Section side-menu column (Shifts; later Forms and Charts). Bulma's default
   active fill is the full link colour — too loud for chrome, so the active
   entry uses the soft pair instead (flips with dark mode). */
.menu-col { min-width: 200px; }
.menu {
  --bulma-menu-item-selected-background-l: var(--bulma-soft-l);
  --bulma-menu-item-selected-color-l: var(--bulma-soft-invert-l);
}

/* Same reasoning for pagination: the current page is "where you are", not an
   action, so it gets the soft pair instead of the full link fill. */
.pagination {
  --bulma-pagination-selected-item-background-l: var(--bulma-soft-l);
  --bulma-pagination-selected-item-border-l: var(--bulma-soft-l);
  --bulma-pagination-selected-item-color-l: var(--bulma-soft-invert-l);
}

/* And for the navbar's is-active (the current page's entry): soft pair, not
   Bulma's full link fill. The hue stays the selected (link) hue. */
.navbar {
  --bulma-navbar-item-selected-background-l: var(--bulma-soft-l);
  --bulma-navbar-item-selected-color-l: var(--bulma-soft-invert-l);
}

/* Whole-row click without nesting anchors: the name link's ::after covers the
   row; the row's other actions sit above it. */
.panel-block:has(.stretched-link),
tr:has(.stretched-link) { position: relative; }
.stretched-link::after { content: ""; position: absolute; inset: 0; }
.panel-block .buttons { position: relative; z-index: 1; }
.panel-block:has(.stretched-link):hover { background-color: var(--bulma-panel-block-hover-background-color); }

/* shared/_image_upload: preview sizing that used to be inline styles. */
.upload-preview { width: auto; height: 200px; }
.upload-preview.is-rounded-crop { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.crop-stage { max-width: 320px; }
.crop-stage img { max-width: 100%; display: block; }

/* A <details> fold as a light bordered strip, not a padded .box — chart-mode
   weight: the Filter on subreportdefs#show and the chart pages, the builder's
   schedule/alerts folds, History on a Dibs Report or shift instance. Pages
   set the open attribute when the fold holds something active. */
.disclosure { border: 1px solid var(--bulma-border); border-radius: var(--bulma-radius); padding: 0.5rem 0.75rem; }
.disclosure summary { cursor: pointer; font-weight: 600; }
.disclosure[open] summary { margin-bottom: 0.75rem; }

/* The results table's rows are whole-row links (stretched-link on the date);
   an in-cell image thumbnail keeps its own click above the row overlay. */
.reports-table .js-modal-trigger { position: relative; z-index: 1; }