/* ===========================================================================
   Compatibility layer for the ported composer components.
   ===========================================================================

   The components came from GreenmorMail, which uses Tailwind. This app
   deliberately does not: it has a hand-written token system where everything
   derives from four whitelabel dials.

   Rewriting 674 lines of working components to change their class names would
   risk their behaviour for no functional gain, so instead the ~113 utility
   classes they use are defined here, mapped onto OUR tokens.

   ⭐ The important part: every `emerald-*` becomes var(--accent) and every
   `gray-*` becomes a neutral token. The original hardcoded #059669 would have
   silently broken whitelabel -- a partner's accent would simply not apply to
   the composer, which is the one screen they spend most of their time in.

   Scoped under .composer so these generic names cannot leak into the rest of
   the interface.
   =========================================================================== */

.composer {
  --c-gray-50:  var(--ink-050);
  --c-gray-100: var(--ink-100);
  --c-gray-200: var(--ink-200);
  --c-gray-300: var(--ink-200);
  --c-gray-400: var(--hint);
  --c-gray-500: var(--muted);
  --c-gray-700: var(--text-soft);
  --c-rose:     var(--critical);
}

/* layout */
.composer .flex { display: flex; }
.composer .grid { display: grid; }
.composer .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.composer .flex-col { flex-direction: column; }
.composer .flex-wrap { flex-wrap: wrap; }
.composer .flex-1 { flex: 1 1 0%; min-width: 0; }
.composer .items-center { align-items: center; }
.composer .justify-center { justify-content: center; }
.composer .relative { position: relative; }
.composer .absolute { position: absolute; }
.composer .inset-0 { inset: 0; }
.composer .left-0 { left: 0; }
.composer .z-30 { z-index: 30; }
.composer .block { display: block; }
.composer .overflow-hidden { overflow: hidden; }
.composer .overflow-y-auto { overflow-y: auto; }

/* spacing */
.composer .gap-0\.5 { gap: .125rem; }
.composer .gap-1\.5 { gap: .375rem; }
.composer .gap-2 { gap: .5rem; }
.composer .p-2 { padding: .5rem; }
.composer .p-2\.5 { padding: .625rem; }
.composer .p-3 { padding: .75rem; }
.composer .p-4 { padding: 1rem; }
.composer .px-1 { padding-inline: .25rem; }
.composer .px-2 { padding-inline: .5rem; }
.composer .px-2\.5 { padding-inline: .625rem; }
.composer .px-3 { padding-inline: .75rem; }
.composer .py-1 { padding-block: .25rem; }
.composer .py-1\.5 { padding-block: .375rem; }
.composer .py-2 { padding-block: .5rem; }
.composer .pt-2 { padding-top: .5rem; }
.composer .pt-3 { padding-top: .75rem; }
.composer .mb-2 { margin-bottom: .5rem; }
.composer .mt-1 { margin-top: .25rem; }
.composer .mt-2 { margin-top: .5rem; }
.composer .mx-0\.5 { margin-inline: .125rem; }
.composer .space-y-2 > * + * { margin-top: .5rem; }
.composer .space-y-3 > * + * { margin-top: .75rem; }

/* sizing */
.composer .w-full { width: 100%; }
.composer .w-32 { width: 8rem; }
.composer .w-px { width: 1px; }
.composer .h-4 { height: 1rem; }
.composer .h-full { height: 100%; }
.composer .max-h-56 { max-height: 14rem; }
.composer .max-w-none { max-width: none; }
.composer .min-h-\[6rem\] { min-height: 6rem; }
.composer .min-w-\[160px\] { min-width: 160px; }

/* surfaces -- all derived, so a partner's accent reaches the composer */
.composer .bg-white { background: var(--surface); }
.composer .bg-gray-50 { background: var(--c-gray-50); }
.composer .bg-gray-200 { background: var(--c-gray-200); }
.composer .bg-emerald-50,
.composer .bg-emerald-50\/50 { background: var(--accent-weak); }
.composer .bg-emerald-600 { background: var(--accent); }

.composer .border { border: 1px solid var(--c-gray-200); }
.composer .border-b { border-bottom: 1px solid var(--c-gray-200); }
.composer .border-t { border-top: 1px solid var(--c-gray-200); }
.composer .border-dashed { border-style: dashed; }
.composer .border-gray-100 { border-color: var(--c-gray-100); }
.composer .border-gray-200 { border-color: var(--c-gray-200); }
.composer .border-gray-300 { border-color: var(--c-gray-300); }
.composer .border-emerald-200 { border-color: var(--accent-line); }
.composer .border-rose-200 { border-color: var(--critical-line); }

.composer .rounded-lg { border-radius: var(--radius-sm); }
.composer .rounded-xl { border-radius: var(--radius); }
.composer .shadow-lg { box-shadow: var(--shadow); }

/* type -- weights follow the thin house scale, not Tailwind's defaults */
.composer .text-xs { font-size: var(--t-micro); }
.composer .text-\[11px\] { font-size: 11px; }
.composer .text-sm { font-size: var(--t-small); }
.composer .font-medium { font-weight: var(--w-medium); }
.composer .font-semibold { font-weight: var(--w-strong); }
.composer .font-bold { font-weight: 600; }
.composer .font-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.composer .uppercase { text-transform: uppercase; }
.composer .tracking-wider { letter-spacing: .05em; }
.composer .italic { font-style: italic; }
.composer .underline { text-decoration: underline; }
.composer .line-through { text-decoration: line-through; }
.composer .text-left { text-align: left; }

.composer .text-white { color: var(--accent-ink); }
.composer .text-gray-400 { color: var(--c-gray-400); }
.composer .text-gray-500 { color: var(--c-gray-500); }
.composer .text-gray-700 { color: var(--c-gray-700); }
.composer .text-emerald-700,
.composer .text-emerald-800 { color: var(--accent); }
.composer .text-rose-600,
.composer .text-rose-700 { color: var(--c-rose); }

/* interaction */
.composer .cursor-pointer { cursor: pointer; }
.composer .transition { transition: background-color .15s, border-color .15s, color .15s; }
.composer .opacity-0 { opacity: 0; }
.composer .outline-none, .composer .focus\:outline-none:focus { outline: none; }
.composer .disabled\:opacity-50:disabled { opacity: .5; }
.composer .hover\:bg-gray-50:hover { background: var(--hover); }
.composer .hover\:bg-emerald-50:hover { background: var(--accent-weak); }
.composer .hover\:bg-rose-50:hover { background: var(--critical-weak); }
.composer .hover\:border-emerald-300:hover,
.composer .hover\:border-emerald-700:hover { border-color: var(--accent); }
.composer .hover\:text-emerald-700:hover { color: var(--accent); }
.composer .hover\:underline:hover { text-decoration: underline; }
.composer .focus\:ring-2:focus,
.composer .focus\:ring-emerald-200:focus,
.composer .focus\:ring-\[var\(--gm-accent\)\]:focus {
  outline: 2px solid var(--accent-line); outline-offset: 1px;
}

/* the editor's own classes */
.composer .bk-rich p { margin: 0 0 1em; }
.composer .he-editable {
  min-height: 6rem; padding: .5rem .65rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.composer .he-editable:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.composer .obtn {
  font: inherit; font-size: var(--t-micro); font-weight: var(--w-medium);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-soft);
  padding: .25rem .5rem; cursor: pointer;
}
.composer .obtn:hover { background: var(--hover); color: var(--text); }
.composer .obtn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.composer .obtn.sm { padding: .15rem .4rem; }