/* servicedesk app styles — Blueprint token-only (no raw hex, no custom radii,
 * no gradients). Layout glue and EasyMDE ↔ Blueprint reconciliation. */

/* inline forms (e.g. the logout button in the nav) */
.sd-inline { display: inline; }
/* Long user-agent strings must not stretch the sessions table. */
.sd-truncate { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* neutral status pill (spec §9 "waiting"): blueprint-components.css defines
 * no --neutral pill variant, so the app supplies it — token-only. */
.bp-pill--neutral {
  background-color: var(--bp-surface-2);
  color: var(--bp-ink-dim);
  border-color: var(--bp-line);
}

/* compact select for dense table rows (mirrors the blueprint sm-control
 * pattern: fixed narrow width like .bp-input--sm, compact padding/font). */
.bp-select--sm {
  width: 140px;
  padding: var(--bp-space-1) var(--bp-space-2);
  font-size: var(--bp-text-2xs);
}

/* desk queue bulk bar: a select and its action button share one line inside
 * the field, so the button keeps its own (content) width and reads as an
 * action instead of stretching into a second stacked input box. The shared
 * resolution textarea takes a full row of its own: the toolbar bottom-aligns
 * its fields, so a multi-line control sharing the action row would push the
 * selects and buttons down away from their labels. */
/* A toolbar revealed by selection (the bulk bar) must honour its `hidden`
 * attribute: .bp-toolbar's display:flex is an author rule and so beats the
 * browser's own [hidden] { display: none }, which left the bulk bar — and its
 * action buttons — on screen with nothing selected. */
.bp-toolbar[hidden] { display: none; }

.sd-bulk-action {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
}
.sd-bulk-action .bp-btn { flex: none; white-space: nowrap; }
.sd-bulk-resolution { flex: 1 0 100%; }
.sd-bulk-resolution .bp-textarea { min-height: 0; }

/* sidebar footer: theme toggle, user identity, logout */
.sd-sidebar__foot {
  margin-top: auto;
  padding: var(--bp-space-4);
  border-top: var(--bp-border-width) solid var(--bp-line);
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  flex-wrap: wrap;
}

/* EasyMDE: align the vendored editor with Blueprint surfaces + tokens */
.EasyMDEContainer .CodeMirror {
  color: var(--bp-ink);
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-base);
}
.EasyMDEContainer .CodeMirror-cursor { border-color: var(--bp-ink); }
.EasyMDEContainer .editor-toolbar {
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
  background-color: var(--bp-surface-2);
}
.EasyMDEContainer .editor-toolbar button { color: var(--bp-ink-dim); }
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background-color: var(--bp-surface);
  border-color: var(--bp-line-strong);
  color: var(--bp-ink);
}
.EasyMDEContainer .editor-preview {
  color: var(--bp-ink);
  background-color: var(--bp-surface);
}

/* public new-ticket form: space above the submit row */
.sd-form-actions { margin-top: var(--bp-space-4); }

/* admin settings: per-field validation error + reset/clear action row */
.sd-field-error { color: var(--bp-crit); }
.sd-field-actions {
  display: flex;
  gap: var(--bp-space-2);
  margin-top: var(--bp-space-1);
}

/* ── Phase 5: list search bar, result snippets, draft notice ──────────────── */
/* The search input takes the free space next to its button. */
.bp-field--grow { flex: 1 1 auto; }
.sd-searchbar { margin-bottom: var(--bp-space-3); }
/* Search snippet under a result row. */
.sd-snippet { color: var(--bp-ink-dim); }
.sd-snippet mark { background-color: var(--bp-surface-2); color: var(--bp-ink); }
/* Restored-draft notice under a markdown editor. */
.sd-draft-note { color: var(--bp-ink-dim); }

/* Dashboard (§3.2): real counts, each drillable into the queue view it counts. */
.sd-stats { display: flex; flex-wrap: wrap; gap: var(--bp-space-3); margin-bottom: var(--bp-space-4); }
.sd-stat { display: flex; flex-direction: column; gap: var(--bp-space-1);
           padding: var(--bp-space-3); min-width: 9rem; text-decoration: none; color: inherit; }
.sd-stat__value { font-size: var(--bp-text-xl); }
.sd-stat__unknown { color: var(--bp-ink-dim); }
.sd-attention { display: grid; grid-template-columns: 1fr; gap: var(--bp-space-4); }
@media (min-width: 60rem) { .sd-attention { grid-template-columns: 1fr 1fr; } }

/* Keyboard cursor row (§3.3). It is a focus target, not only a colour: the
   row carries tabindex="-1" and is focused, so assistive technology follows
   the selection. */
.bp-table tr.is-cursor { outline: var(--bp-border-width) solid var(--bp-accent); outline-offset: -1px; }
.bp-table tr.is-cursor:focus { outline-color: var(--bp-accent); }
#sd-shortcuts-body > div { display: flex; gap: var(--bp-space-3); align-items: baseline; margin-bottom: var(--bp-space-1); }
#sd-shortcuts-body kbd { min-width: 2rem; text-align: center; }

/* Attachment thumbnails (§3.6). The image itself comes from the preview route,
   which serves only a SNIFFED allowlisted image type under a sandboxing CSP —
   a file that merely claims to be an image renders as a broken slot here. */
.sd-attach-grid { display: flex; flex-wrap: wrap; gap: var(--bp-space-2); }
.sd-thumb { max-width: 12rem; max-height: 12rem; }

/* Drag-and-drop upload zone (§3.6). Progressive enhancement around the real
   file input, which is never hidden from assistive technology. */
.sd-dropzone { border: 1px dashed var(--bp-line); padding: var(--bp-space-4); }
.sd-dropzone--over { border-color: var(--bp-accent); }

/* §3.7 — the phone pass. One markup, two layouts: the queue table becomes a
   stack of cards whose labels are rendered from the same data-label the
   desktop header row already carries, so nothing is duplicated in the
   template. Tokens only, no raw colour values. */
.sd-navdrop > summary { display: none; }

/* A control that exists only for browsers without JavaScript: the submit
   button next to a checkbox that submits itself. The root carries sd-js from
   the pre-paint script, so with scripting ON this is hidden before it can
   flash, and with scripting OFF it is simply there. */
.sd-js .sd-nojs-only { display: none; }

/* Sidebar groups as disclosures.
   Twenty entries in one flat column meant the eleven administration links sat
   between the daily work and everything else. The groups now collapse, and the
   order runs most-used first with administration last.
   The caret is drawn in CSS rather than added to the markup: it is pure
   decoration next to a real label, so it has no business in the document. It
   inherits currentColor and turns with the group's state. */
.sd-navgroup > summary {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sd-navgroup > summary::-webkit-details-marker { display: none; }
.sd-navgroup > summary:hover { color: var(--bp-ink); }
.sd-navgroup > summary::after {
  content: "";
  margin-left: auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 120ms ease;
  opacity: 0.7;
}
.sd-navgroup[open] > summary::after { transform: rotate(45deg); }
/* The label takes the remaining width so a long entry wraps against the
   sidebar edge instead of pushing its icon out of the row. */
.sd-navgroup__label { min-width: 0; }
.sd-bulk-count { margin: 0; }

@media (max-width: 720px) {
  .bp-app { grid-template-columns: 1fr; }
  .sd-navdrop > summary { display: list-item; padding: var(--bp-space-2) 0; cursor: pointer; }
  /* The sidebar is full-width on a phone, so a caret pushed to the far edge
     ends up hundreds of pixels from the label it belongs to. Below the
     breakpoint it follows the text instead. */
  .sd-navgroup > summary::after { margin-left: var(--bp-space-2); }
  .sd-queue-table thead { display: none; }
  .sd-queue-table tr { display: block; border-bottom: 1px solid var(--bp-line); padding: var(--bp-space-2) 0; }
  .sd-queue-table td { display: flex; justify-content: space-between; gap: var(--bp-space-2); border: 0; }
  .sd-queue-table td::before { content: attr(data-label); color: var(--bp-ink-dim); }
  .sd-bulkbar { position: sticky; bottom: 0; background: var(--bp-surface);
                border-top: 1px solid var(--bp-line); padding: var(--bp-space-2); display: block; }
  .sd-bulkbar .bp-field { display: block; margin-bottom: var(--bp-space-2); }
  .sd-bulkbar .bp-btn,
  .sd-queue-table .bp-checkbox { min-height: 44px; min-width: 44px; }
}

/* SLA indicator (§1.5). A ticket no policy covers renders no pill at all — the
   real-data rule — so there is deliberately no "unknown" pill variant here. */
.sd-sla { white-space: nowrap; }

/* ── Public background (internal/branding) ────────────────────────────────
   The image is served from a directory on the server and can be exchanged at
   runtime; the two URLs arrive as --sd-bg-light / --sd-bg-dark on the public
   shell element, so this rule is the ONLY place that decides which theme gets
   which. The desk shell (.bp-app) never carries .sd-bg.

   It is painted by a fixed pseudo-element rather than as the shell's own
   background: the shell is a centred 960px column, so painting on it would
   show the image in a strip down the middle of an otherwise empty canvas.
   z-index:-1 puts it behind the page content but above the canvas colour
   (the body's background propagates to the canvas, which paints below it).

   There is NO filter, tint or overlay on the image. Content sits on Blueprint
   surface panels, which are opaque, so text contrast is the panel's, not the
   photograph's. */
.sd-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--sd-bg-light, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Dark theme: the operator's dark variant, or — when they supplied none —
   `none`, and the theme keeps its own surface. A dimmed or inverted rendering
   of the light image would be a guess, and a muddy one. */
[data-theme="dark"] .sd-bg::before { background-image: var(--sd-bg-dark, none); }

/* Reduced motion is unaffected (nothing animates here), but a very small
   viewport gets the image anchored to the top so the focal area survives the
   crop. */
@media (max-width: 720px) {
  .sd-bg::before { background-position: center top; }
}

/* ── Keeping the content clear of the picture ─────────────────────────────
   The column stays CENTRED and the picture stays full-bleed. What separates
   them is a surface under the content: the text sits on its own sheet, with a
   margin of clear space around it, and the picture shows past its edges.

   Two approaches were tried against a real logo and rejected, so they are not
   tried again:

   - Moving the column to one edge. It dodges the picture but puts the reading
     position against the side of the screen, and the reading position is not
     a thing to give up for a decoration.
   - Painting the image only in the gutter beside the column. It depends
     entirely on how the image is composed: a logo sitting on a wide canvas
     scales to almost nothing inside a narrow band, because `contain` fits the
     canvas, not the subject.

   A sheet works for any image at any width, and needs to know nothing about
   what the picture contains. */
.sd-bg {
  background-color: var(--bp-surface);
  border: var(--bp-border-width) solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  /* A real shadow, not a flat ring of the surface colour. The ring was the
     same colour as the page, so the card had no edge and the picture looked
     CLIPPED by something invisible instead of passing behind a card. The
     border and the shadow are what make the distance legible. */
  box-shadow: 0 2px 16px rgb(0 0 0 / 10%);
  margin-top: var(--bp-space-8);
  margin-bottom: var(--bp-space-10);
}

/* On a phone the sheet would cover the whole screen, so its rounding and its
   outer ring buy nothing and only cost the picture. */
@media (max-width: 720px) {
  .sd-bg { border-radius: 0; box-shadow: none; margin-top: 0; }
}

/* ------------------------------------------------------------------------ *
 * MARKDOWN EDITOR TOOLBAR ICONS
 *
 * EasyMDE draws its toolbar as <i class="fa fa-bold">, i.e. FontAwesome icon
 * classes. FontAwesome was never vendored here — the app ships easymde.min.js
 * and easymde.min.css and nothing else — so every button rendered as an empty
 * box: the controls worked, they were simply invisible.
 *
 * Rather than pull in a whole icon font for twelve glyphs, the icons are drawn
 * here on the SAME 16-unit grid and 1.5 stroke as the sidebar set
 * (internal/app/navicons.go), so the two read as one vocabulary.
 *
 * They are MASKS, not background images, so the glyph takes its colour from
 * the button — which means EasyMDE's own hover, active and disabled states
 * keep working without a single override.
 *
 * A button whose icon is missing here would be invisible again, so
 * TestEveryEasyMDEToolbarIconHasAGlyph reads the vendored bundle and fails if
 * one appears that this file does not draw.
 * ------------------------------------------------------------------------ */
.editor-toolbar i.fa {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.editor-toolbar i.fa-bold { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.5%203v10'/%3E%3Cpath%20d='M5.5%203h3.4a2.5%202.5%200%200%201%200%205H5.5'/%3E%3Cpath%20d='M5.5%208h4a2.5%202.5%200%200%201%200%205H5.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.5%203v10'/%3E%3Cpath%20d='M5.5%203h3.4a2.5%202.5%200%200%201%200%205H5.5'/%3E%3Cpath%20d='M5.5%208h4a2.5%202.5%200%200%201%200%205H5.5'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-italic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.8%203h-3.2'/%3E%3Cpath%20d='M8.4%2013H5.2'/%3E%3Cpath%20d='M9.4%203%206.6%2013'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.8%203h-3.2'/%3E%3Cpath%20d='M8.4%2013H5.2'/%3E%3Cpath%20d='M9.4%203%206.6%2013'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-header { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%203.5v9'/%3E%3Cpath%20d='M11%203.5v9'/%3E%3Cpath%20d='M4%208h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%203.5v9'/%3E%3Cpath%20d='M11%203.5v9'/%3E%3Cpath%20d='M4%208h7'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-heading { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%203.5v9'/%3E%3Cpath%20d='M11%203.5v9'/%3E%3Cpath%20d='M4%208h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%203.5v9'/%3E%3Cpath%20d='M11%203.5v9'/%3E%3Cpath%20d='M4%208h7'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-quote-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204v8'/%3E%3Cpath%20d='M6%205h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204v8'/%3E%3Cpath%20d='M6%205h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011h4'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-list-ul { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204.5h.01'/%3E%3Cpath%20d='M3%208h.01'/%3E%3Cpath%20d='M3%2011.5h.01'/%3E%3Cpath%20d='M6%204.5h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011.5h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204.5h.01'/%3E%3Cpath%20d='M3%208h.01'/%3E%3Cpath%20d='M3%2011.5h.01'/%3E%3Cpath%20d='M6%204.5h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011.5h7'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-list-ol { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204.5h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011.5h7'/%3E%3Cpath%20d='M2.3%203.7h.9v2.3'/%3E%3Cpath%20d='M2.2%208.1h1.5L2.2%2010.2h1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204.5h7'/%3E%3Cpath%20d='M6%208h7'/%3E%3Cpath%20d='M6%2011.5h7'/%3E%3Cpath%20d='M2.3%203.7h.9v2.3'/%3E%3Cpath%20d='M2.2%208.1h1.5L2.2%2010.2h1.6'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.5%209.5%209.5%206.5'/%3E%3Cpath%20d='M7.6%204.9%209%203.4a2.4%202.4%200%200%201%203.4%203.4l-1.5%201.4'/%3E%3Cpath%20d='M8.4%2011.1%207%2012.6a2.4%202.4%200%200%201-3.4-3.4l1.5-1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.5%209.5%209.5%206.5'/%3E%3Cpath%20d='M7.6%204.9%209%203.4a2.4%202.4%200%200%201%203.4%203.4l-1.5%201.4'/%3E%3Cpath%20d='M8.4%2011.1%207%2012.6a2.4%202.4%200%200%201-3.4-3.4l1.5-1.4'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-image { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M2.6%2010.4%206%207l2.5%202.5L11%207l2.4%202.4'/%3E%3Ccircle%20cx='5.6'%20cy='6'%20r='.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M2.6%2010.4%206%207l2.5%202.5L11%207l2.4%202.4'/%3E%3Ccircle%20cx='5.6'%20cy='6'%20r='.9'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.6%208S4%204.2%208%204.2%2014.4%208%2014.4%208%2012%2011.8%208%2011.8%201.6%208%201.6%208z'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.6%208S4%204.2%208%204.2%2014.4%208%2014.4%208%2012%2011.8%208%2011.8%201.6%208%201.6%208z'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='1.8'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-columns { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M8%203.5v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M8%203.5v9'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-arrows-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5H2.5V6'/%3E%3Cpath%20d='M10%202.5h3.5V6'/%3E%3Cpath%20d='M6%2013.5H2.5V10'/%3E%3Cpath%20d='M10%2013.5h3.5V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5H2.5V6'/%3E%3Cpath%20d='M10%202.5h3.5V6'/%3E%3Cpath%20d='M6%2013.5H2.5V10'/%3E%3Cpath%20d='M10%2013.5h3.5V10'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-question-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5.5'/%3E%3Cpath%20d='M6.4%206.4a1.7%201.7%200%200%201%203.2.5c0%201.2-1.6%201.4-1.6%202.4'/%3E%3Cpath%20d='M8%2011.7v.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5.5'/%3E%3Cpath%20d='M6.4%206.4a1.7%201.7%200%200%201%203.2.5c0%201.2-1.6%201.4-1.6%202.4'/%3E%3Cpath%20d='M8%2011.7v.01'/%3E%3C/svg%3E"); }

/* The bundle also ships these buttons; they are not on the default toolbar,
   but drawing them now means switching one on can never reintroduce a blank
   button. The test below reads the bundle, so this list cannot fall behind. */
.editor-toolbar i.fa-code { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204%202.5%208%206%2012'/%3E%3Cpath%20d='M10%204%2013.5%208%2010%2012'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204%202.5%208%206%2012'/%3E%3Cpath%20d='M10%204%2013.5%208%2010%2012'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-eraser { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203.5%203.4%209.1a1.2%201.2%200%200%200%200%201.7l1.8%201.7h3l5-5a1.2%201.2%200%200%200%200-1.7L11%203.5a1.4%201.4%200%200%200-2%200z'/%3E%3Cpath%20d='M13.5%2012.5h-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203.5%203.4%209.1a1.2%201.2%200%200%200%200%201.7l1.8%201.7h3l5-5a1.2%201.2%200%200%200%200-1.7L11%203.5a1.4%201.4%200%200%200-2%200z'/%3E%3Cpath%20d='M13.5%2012.5h-5'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-minus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%208h11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%208h11'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-repeat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%206.5H6.2A3.2%203.2%200%201%200%206.2%2013H8'/%3E%3Cpath%20d='M10.5%204%2013%206.5%2010.5%209'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%206.5H6.2A3.2%203.2%200%201%200%206.2%2013H8'/%3E%3Cpath%20d='M10.5%204%2013%206.5%2010.5%209'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-strikethrough { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%208h11'/%3E%3Cpath%20d='M11%205.3A3%203%200%200%200%208.2%203.6c-1.8%200-3%20.9-3%202.1%200%201%20.7%201.6%202%202'/%3E%3Cpath%20d='M5.4%2010.4c.3%201.4%201.4%202%203%202%201.9%200%203-1%203-2.3%200-.6-.2-1-.7-1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%208h11'/%3E%3Cpath%20d='M11%205.3A3%203%200%200%200%208.2%203.6c-1.8%200-3%20.9-3%202.1%200%201%20.7%201.6%202%202'/%3E%3Cpath%20d='M5.4%2010.4c.3%201.4%201.4%202%203%202%201.9%200%203-1%203-2.3%200-.6-.2-1-.7-1.4'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-table { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M2.5%206.8h11'/%3E%3Cpath%20d='M6.2%206.8v5.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='11'%20height='9'%20rx='1'/%3E%3Cpath%20d='M2.5%206.8h11'/%3E%3Cpath%20d='M6.2%206.8v5.7'/%3E%3C/svg%3E"); }
.editor-toolbar i.fa-undo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206.5h6.8A3.2%203.2%200%201%201%209.8%2013H8'/%3E%3Cpath%20d='M5.5%204%203%206.5%205.5%209'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206.5h6.8A3.2%203.2%200%201%201%209.8%2013H8'/%3E%3Cpath%20d='M5.5%204%203%206.5%205.5%209'/%3E%3C/svg%3E"); }