/* Wardogs editor (public/js/editor.js) and the way ticket messages are shown. Flat, square, Barlow. Works on the site and in the admin. */
.ed { --ed-line: var(--line, #2c2c31); --ed-panel: var(--panel, #17171a); --ed-ink: var(--ink, #f2efe6); --ed-mid: var(--mid, #b9b5aa); --ed-dim: var(--dim, #8c887e); --ed-gold: var(--gold, #d4a93a); --ed-raised: var(--raised, #222226);
  position: relative; border: 1px solid #62605a; background: #101012; color: var(--ed-ink); }
.ed:focus-within { border-color: var(--ed-gold); }
.ed.is-drop { border-color: var(--ed-gold); outline: 2px dashed var(--ed-gold); outline-offset: -6px; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel); }
.ed-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ed-mid); cursor: pointer; }
.ed-btn:hover { background: var(--ed-raised); color: var(--ed-gold); }
.ed-btn[aria-pressed="true"] { background: var(--ed-raised); color: var(--ed-gold); box-shadow: inset 0 -2px 0 var(--ed-gold); }
.ed-btn:focus-visible, .ed-act:focus-visible, .ed-link:focus-visible, .ed-file-x:focus-visible { outline: 2px solid var(--ed-gold); outline-offset: -2px; }
.ed-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 4px; background: var(--ed-line); }
.ed-body { min-height: 160px; max-height: 480px; overflow-y: auto; padding: 12px 14px; font: 400 16px/1.6 Barlow, sans-serif; outline: none; overflow-wrap: anywhere; }
.ed.is-empty .ed-body::before { content: attr(data-placeholder); color: var(--ed-dim); pointer-events: none; }
.ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 4px 12px; border-top: 1px solid var(--ed-line); background: var(--ed-panel); font-size: 13px; color: var(--ed-dim); }
.ed-status.bad { color: #ff8a7a; }
.ed-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.ed-count.near { color: #ffb020; }
.ed-count.over { color: #ff8a7a; font-weight: 600; }
.ed-link { padding: 0; border: 0; background: none; color: var(--ed-gold); font: inherit; text-decoration: underline; cursor: pointer; }
.ed-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--ed-line); background: var(--ed-raised); }
.ed-pop[hidden] { display: none; }
.ed-input { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #62605a; border-radius: 0; background: #101012; color: var(--ed-ink); font: inherit; }
.ed-act { min-height: 40px; padding: 0 14px; border: 1px solid var(--ed-gold); border-radius: 0; background: var(--ed-gold); color: #17130b; font: 600 14px/1 Barlow, sans-serif; cursor: pointer; }
.ed-act.quiet { border-color: #62605a; background: none; color: var(--ed-ink); font-weight: 500; }
.ed-pop-err { flex-basis: 100%; color: #ff8a7a; font-size: 13px; }
.ed-pop-err:empty { display: none; }
.ed-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ed-files[hidden] { display: none; }
.ed-file { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 4px; border: 1px solid var(--line, #2c2c31); background: var(--panel, #17171a); }
.ed-file img { width: 44px; height: 44px; object-fit: cover; background: #000; }
.ed-file-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mid, #b9b5aa); font-size: 13px; }
.ed-file-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: none; color: var(--mid, #b9b5aa); cursor: pointer; }
.ed-file-x:hover { color: #ff8a7a; }

/* Message content: what the editor writes, as shown in the editor and in the conversation (member side and admin side). */
.ed-content p, .support-message-body p, .thread .body p { margin: 0 0 .7em; }
.ed-content > :last-child, .support-message-body > :last-child, .thread .body > :last-child { margin-bottom: 0; }
.ed-content ul, .ed-content ol, .support-message-body ul, .support-message-body ol, .thread .body ul, .thread .body ol { margin: 0 0 .7em; padding-left: 1.5em; }
.ed-content li, .support-message-body li, .thread .body li { margin: .15em 0; }
.ed-content blockquote, .support-message-body blockquote, .thread .body blockquote { margin: 0 0 .7em; padding: 2px 0 2px 14px; border-left: 3px solid var(--gold, #d4a93a); color: var(--mid, #b9b5aa); }
.ed-content code, .support-message-body code, .thread .body code { padding: 1px 5px; background: #0b0b0d; border: 1px solid var(--line, #2c2c31); font: 500 .9em/1.4 Consolas, "Liberation Mono", monospace; }
.ed-content pre, .support-message-body pre, .thread .body pre { margin: 0 0 .7em; padding: 10px 12px; overflow-x: auto; background: #0b0b0d; border: 1px solid var(--line, #2c2c31); font: 400 14px/1.5 Consolas, "Liberation Mono", monospace; white-space: pre-wrap; }
.ed-content pre code, .support-message-body pre code, .thread .body pre code { padding: 0; border: 0; background: none; }
.ed-content a, .support-message-body a, .thread .body a { color: var(--gold, #d4a93a); text-decoration: underline; overflow-wrap: anywhere; }
.ed-content h2, .ed-content h3, .support-message-body h2, .support-message-body h3, .thread .body h2, .thread .body h3 { margin: .8em 0 .35em; color: var(--ink, #f2efe6); font-size: 18px; letter-spacing: 0; text-transform: none; }
.ed-content hr, .support-message-body hr, .thread .body hr { margin: 1em 0; border: 0; border-top: 1px solid var(--line, #2c2c31); }

@media (max-width: 640px) {
  .ed-btn { width: 44px; height: 44px; }
  .ed-body { min-height: 140px; font-size: 16px; }
  .ed-foot { flex-wrap: wrap; }
  .ed-file-name { max-width: 120px; }
}
@media (prefers-reduced-motion: no-preference) { .ed, .ed-btn { transition: border-color .12s, background-color .12s, color .12s; } }

/* The admin labels its fields with an uppercase caption; the editor's label sits one level deeper. */
.field > label[for] > span { color: var(--dim, #8c887e); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.field > label[for] { display: block; margin-bottom: 8px; }

.ed-body.tall { min-height: 380px; max-height: none; }
.ed-source { display: block; width: 100%; min-height: 380px; padding: 12px 14px; border: 0; border-radius: 0; background: #0b0b0d; color: var(--ed-ink); font: 400 14px/1.55 Consolas, "Liberation Mono", monospace; resize: vertical; tab-size: 2; }
.ed-source:focus { outline: 2px solid var(--ed-gold); outline-offset: -2px; }
.ed-pop-cap { flex-basis: 100%; color: var(--ed-mid); font-size: 13px; }
.ed-btn:disabled { opacity: .35; cursor: default; }
.ed-btn:disabled:hover { background: none; color: var(--ed-mid); }
.ed-body figure { margin: 0 0 .9em; }
.ed-body figure img, .ed-content figure img { max-width: 100%; height: auto; display: block; }
.ed-body figcaption, .ed-content figcaption { margin-top: 6px; color: var(--ed-mid); font-size: 14px; }
.ed-gif-note { flex-basis: 100%; margin: 0; color: var(--ed-mid); font-size: 14px; }
.ed-gif-grid { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.ed-gif-result { min-width: 0; min-height: 80px; padding: 4px; border: 1px solid var(--ed-line); background: var(--ed-bg); cursor: pointer; }
.ed-gif-result img { display: block; width: 100%; height: 100px; object-fit: contain; }
.ed-gif-result:focus-visible { outline: 2px solid var(--ed-gold); outline-offset: -2px; }