/* HTML Entity Encoder / Decoder — a toolbar bar (mode, scope, Swap, Clear),
   then the input and the read-only result side by side as two cards; the
   result card ends with the status caption (layout from
   styles/components/form.css). The text areas are
   styles/components/editor.css panes; the scope uses form.css's inline-field. */

/* Title-icon gradient tile, mirroring the catalog's app-icon aesthetic.
   Colors match the registry grad for this tool. */
.he-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #06B6D4, #0284C7);
  color: #fff;
}

.he-note {
  align-self: center;
  font-size: 11px;
  color: var(--text-placeholder);
  white-space: nowrap;
}

textarea.he-area {
  min-height: 44vh;
}
.he-status {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  /* The long scope pill wraps onto its own line at phone width, which
     would leave the separator dangling after the mode segment. */
  .he-sep { display: none; }
}

@media (max-width: 640px) {
  /* Side-by-side height doubles when the panes stack; trim it on a phone. */
  textarea.he-area { min-height: 30vh; }
}