/* The forum's rich text box (forum-editor.js): toolbar, link bar, emoji panel, the text and its character count.
   Tokens only; the forest look is in the FORUM EDITOR block of themes/forest.css. */
.fe { position: relative; margin-bottom: 12px; border: var(--field-border); border-radius: var(--field-radius-lg); background: var(--field-bg); }
.fe:focus-within { border-color: var(--field-focus); }

.fe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.fe-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line); }
.fe-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--btn-radius-sm); background: none; color: var(--frost); cursor: pointer;
  font-family: var(--font-body); font-size: calc(0.9375rem * var(--text-scale)); line-height: 1;
}
.fe-btn:hover { border-color: rgba(var(--gold-rgb), 0.5); color: var(--bone); }
.fe-btn[aria-pressed="true"], .fe-btn[aria-expanded="true"] { background: rgba(var(--gold-rgb), 0.16); border-color: rgba(var(--gold-rgb), 0.45); color: var(--bone); }
.fe-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fe-btn svg circle:not(.fe-ico-dot) { fill: none; }
.fe-btn--insertUnorderedList svg circle, .fe-btn svg .fe-ico-dot { fill: currentColor; stroke: none; }
.fe-btn .fe-ico-txt { fill: currentColor; stroke: none; font-size: 6px; font-family: var(--font-ui); }

.fe-linkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); }
.fe-linkbar[hidden] { display: none; }
.fe .fe-linkbar input { flex: 1 1 200px; width: auto; margin: 0; padding: 7px 10px; }
.fe-mini {
  padding: 7px 14px; border: 1px solid var(--gold); border-radius: var(--btn-radius-sm); background: var(--btn-bg); color: var(--btn-text);
  cursor: pointer; font-family: inherit; font-size: calc(0.8125rem * var(--text-scale));
}
.fe-mini:hover { background: var(--btn-hover-bg); }
.fe-mini--ghost { background: none; color: var(--gold); }
.fe-mini--ghost:hover { background: rgba(var(--gold-rgb), 0.1); }
.fe-mini[hidden] { display: none; }
.fe-linkerr { flex-basis: 100%; color: var(--error); font-size: calc(0.78125rem * var(--text-scale)); }
.fe-linkerr:empty { display: none; }

.fe-area {
  position: relative; min-height: 140px; max-height: 60vh; overflow-y: auto; padding: 12px 14px;
  color: var(--field-text); font-family: var(--font-body); font-size: calc(0.9375rem * var(--text-scale)); line-height: 1.7;
  outline: none; overflow-wrap: anywhere;
}
.fe-area.is-empty::before { content: attr(data-placeholder); position: absolute; left: 14px; top: 12px; color: var(--field-text); opacity: 0.45; pointer-events: none; }
.fe-area p { margin: 0 0 0.7em; }
.fe-area :is(ul, ol) { margin: 0 0 0.7em; padding-left: 1.6em; }
.fe-area blockquote { margin: 0 0 0.8em; padding: 4px 0 4px 12px; border-left: 3px solid rgba(var(--gold-rgb), 0.55); background: rgba(var(--gold-rgb), 0.06); }
.fe-area a { color: var(--gold); text-decoration: underline; }

.fe-foot { display: flex; justify-content: space-between; gap: 12px; padding: 4px 12px 8px; font-size: calc(0.71875rem * var(--text-scale)); color: var(--frost); opacity: 0.7; }
.fe-over .fe-count { color: var(--error); opacity: 1; font-weight: 700; }
.fe-over { border-color: var(--error); }

/* emoji panel: opens under the toolbar */
.fe-emoji {
  position: absolute; z-index: 20; top: 50px; right: 8px; width: min(360px, calc(100% - 16px));
  background: var(--menu-bg); border: var(--menu-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
}
.fe-emoji[hidden] { display: none; }
.fe-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.fe-tab {
  min-width: 36px; height: 34px; border: 1px solid transparent; border-radius: var(--btn-radius-sm); background: none; cursor: pointer;
  font-family: var(--font-emoji); font-size: calc(1.125rem * var(--text-scale)); line-height: 1; color: var(--bone);
}
.fe-tab--rune { font-family: var(--font-rune); color: var(--gold); }
.fe-tab:hover { border-color: rgba(var(--gold-rgb), 0.45); }
.fe-tab[aria-selected="true"] { background: rgba(var(--gold-rgb), 0.18); border-color: rgba(var(--gold-rgb), 0.5); }
.fe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; max-height: 230px; overflow-y: auto; padding: 6px; }
.fe-pick {
  height: 38px; border: 1px solid transparent; border-radius: var(--btn-radius-sm); background: none; cursor: pointer;
  font-family: var(--font-emoji); font-size: calc(1.375rem * var(--text-scale)); line-height: 1; color: var(--bone);
}
.fe-grid--runes .fe-pick { font-family: var(--font-rune); color: var(--gold); }
.fe-pick:hover, .fe-pick:focus-visible { background: rgba(var(--gold-rgb), 0.16); border-color: rgba(var(--gold-rgb), 0.45); }

@media (max-width: 600px) {
  .fe-hint { display: none; }
  .fe-foot { justify-content: flex-end; }
  .fe-btn { min-width: 40px; height: 40px; }
  .fe-sep { display: none; }
  .fe-emoji { left: 8px; right: 8px; width: auto; top: auto; }
}