.rich-content-editor{min-width:0;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.rich-editor-modes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rich-editor-modes button{white-space:nowrap;padding:8px 14px}
.rich-editor-modes button[aria-pressed=true]{background:#E0F2EF;border-color:#238D80;color:#155D55}
.rich-content-editor .template-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#F8F7F4;border:1px solid #D8D5CD;border-radius:8px}
.rich-content-editor .template-editor-toolbar button{font:inherit;border:1px solid #D8D5CD;border-radius:6px;background:#fff;padding:7px 10px}
.rich-content-editor .template-editor-surface{min-height:220px;border:1px solid #D8D5CD;border-radius:8px;padding:16px;overflow-wrap:anywhere;background:#fff}
.rich-content-editor .template-editor-surface:focus-visible{outline:2px solid #238D80;outline-offset:2px}
.rich-editor-source{font:13px/1.6 Consolas,monospace!important;box-sizing:border-box;min-height:240px;resize:vertical;width:100%;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.rich-editor-link-fields{display:flex;flex-wrap:wrap;gap:12px}.rich-editor-link-fields input{min-width:0;flex:1 1 180px}
.rich-content-editor [hidden]{display:none!important}
.template-catalog-card-heading>.template-edit-action{margin-left:auto;flex:0 0 auto}
.message-template-editor{display:flex;flex-direction:column;gap:16px}.message-template-editor .action-row{margin-top:16px}
@media(max-width:600px){.template-catalog-card-heading{flex-wrap:wrap}.template-catalog-card-heading>h2{flex-basis:100%}.rich-editor-modes button{flex:1 1 auto}.rich-editor-source{font-size:12px!important}}

/* Formatting controls use a compact document toolbar in every editor. */
:is(.rich-content-editor, .template-editor-dialog) .rich-editor-modes {
  margin: 0;
  gap: 4px;
}
:is(.rich-content-editor, .template-editor-dialog) .rich-editor-modes button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
}
:is(.rich-content-editor, .template-editor-dialog) .template-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  padding: 6px;
}
.editor-tool-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 2px;
  padding-inline: 4px;
}
.editor-tool-group + .editor-tool-group { border-inline-start: 1px solid var(--line-strong, #d8d5cd); }
:is(.rich-content-editor, .template-editor-dialog) .template-editor-toolbar button,
.template-editor-toolbar input[aria-label],
.template-editor-toolbar select[aria-label]:not([multiple]) {
  flex: 0 1 auto;
  width: auto;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  color: var(--ink, #000);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
}
.template-editor-toolbar select[aria-label]:not([multiple]) {
  max-width: 136px;
  padding-inline-end: 26px;
  background-position: right 4px center;
  background-size: 16px;
  border-color: var(--line-strong, #d8d5cd);
  text-overflow: ellipsis;
}
.template-editor-toolbar input[type=number][aria-label] {
  width: 54px !important;
  padding-inline: 4px;
  border-color: var(--line-strong, #d8d5cd);
}
.template-editor-toolbar input[type=color][aria-label] {
  width: 32px;
  padding: 5px;
  cursor: pointer;
}
:is(.rich-content-editor, .template-editor-dialog) .template-editor-toolbar button:hover:not(:disabled) {
  background: var(--line-subtle, #efede7);
  border-color: var(--line-strong, #d8d5cd);
}
:is(.rich-content-editor, .template-editor-dialog) .template-editor-toolbar button[aria-pressed=true] {
  background: #dff5f3;
  border-color: #037569;
}
.template-editor-toolbar button[data-editor-tool=bold] { font-weight: 700; }
.template-editor-toolbar button[data-editor-tool=italic] { font-style: italic; }
.template-editor-toolbar button[data-editor-tool=underline] { text-decoration: underline; }
.template-editor-toolbar button[data-editor-tool=strike] { text-decoration: line-through; }
.template-editor-toolbar :is(button[data-editor-tool=no_list], button[data-editor-tool=link],
  button[data-editor-tool=remove_link], button[data-editor-tool=clear],
  button[data-editor-tool=undo], button[data-editor-tool=redo]) {
  display: inline-grid;
  place-items: center;
  width: 32px;
}
.template-editor-toolbar [data-editor-tool]::before {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-tool-icon) center / contain no-repeat;
}
.template-editor-toolbar [data-editor-tool=no_list] {
  --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h13M8 12h7M8 18h7M3 6h1M3 12h1M3 18h1M18 15l5 6m0-6-5 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.template-editor-toolbar [data-editor-tool=link] {
  --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 7 3-3a5 5 0 0 1 7 7l-3 3M14 17l-3 3a5 5 0 0 1-7-7l3-3m1 6 8-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.template-editor-toolbar [data-editor-tool=remove_link] {
  --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13 4 1-1a5 5 0 0 1 7 7l-1 1M11 20l-1 1a5 5 0 0 1-7-7l1-1M3 3l18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.template-editor-toolbar [data-editor-tool=clear] {
  --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h14M11 5l-3 14m7-4 6 6m0-6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.template-editor-toolbar [data-editor-tool=undo] {
  --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 3 10l6 6M3 10h11a6 6 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.template-editor-toolbar [data-editor-tool=redo] { --editor-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 4 6 6-6 6m6-6H10a6 6 0 0 0 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.template-editor-toolbar :is([data-editor-tool=no_list], [data-editor-tool=link],
  [data-editor-tool=remove_link], [data-editor-tool=clear],
  [data-editor-tool=undo], [data-editor-tool=redo])::before { content: ""; }
@media (max-width: 600px), (pointer: coarse) {
  :is(.rich-content-editor, .template-editor-dialog) .rich-editor-modes button { min-height: 44px; }
  :is(.rich-content-editor, .template-editor-dialog) .template-editor-toolbar button,
  .template-editor-toolbar input[aria-label],
  .template-editor-toolbar select[aria-label]:not([multiple]) {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
  }
}
@media (forced-colors: active) {
  .template-editor-toolbar [data-editor-tool]::before { background: ButtonText; }
}