/* Lexxy theme overrides — map Lexxy's tokens onto the app's
   Tailwind/Flowbite palette so the editor reads as part of the form
   rather than a foreign widget.

   Lexxy exposes its design tokens as CSS custom properties on
   <lexxy-editor>. Overriding them here applies to every editor in the
   app — no shadow-DOM piercing needed. */

lexxy-editor {
  /* Neutral palette — mirrors gray-50 → gray-700 from Tailwind. */
  --lexxy-color-ink: #111827;            /* gray-900 — body text */
  --lexxy-color-ink-medium: #4b5563;     /* gray-600 — toolbar icons */
  --lexxy-color-ink-light: #9ca3af;      /* gray-400 — placeholder */
  --lexxy-color-ink-lighter: #e5e7eb;    /* gray-200 — toolbar divider */
  --lexxy-color-ink-lightest: #f3f4f6;   /* gray-100 — hover background */
  --lexxy-color-ink-inverted: #ffffff;
  --lexxy-color-canvas: #ffffff;
  --lexxy-color-text: var(--lexxy-color-ink);

  /* Emerald accent matches the app's primary brand colour. */
  --lexxy-color-accent-dark: #047857;    /* emerald-700 */
  --lexxy-color-accent-medium: #10b981;  /* emerald-500 */
  --lexxy-color-accent-light: #d1fae5;   /* emerald-100 */
  --lexxy-color-accent-lightest: #ecfdf5;/* emerald-50 */
  --lexxy-color-selected: #d1fae5;
  --lexxy-color-selected-dark: #6ee7b7;
  --lexxy-color-selected-hover: #a7f3d0;

  --lexxy-focus-ring-color: #10b981;
  --lexxy-focus-ring-size: 2px;
  --lexxy-focus-ring-offset: -2px;

  /* Match Tailwind's `rounded-lg` (8px) so corners line up with the
     surrounding form controls. */
  --lexxy-radius: 8px;
  --lexxy-shadow: none;

  /* Slightly roomier toolbar — closer to Flowbite button spacing. */
  --lexxy-toolbar-button-size: 28px;
  --lexxy-toolbar-icon-size: 16px;
  --lexxy-toolbar-gap: 4px;
  --lexxy-toolbar-spacing: 8px;

  --lexxy-editor-padding: 16px;
  --lexxy-editor-rows: 14lh;
  --lexxy-font-base: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --lexxy-text-small: 13px;
  --lexxy-content-margin: 0.75rem;

  /* Kill the editor's own border — the surrounding form wrapper supplies
     the border + focus ring, so the doubled chrome looks busy. */
  border: none !important;
}

/* Hide the image + file-upload toolbar buttons. FileNote bodies don't
   carry attachments — those are tracked via the dealflow document
   library, not embedded in the note. Lexxy doesn't expose a config
   attribute to drop these buttons, but the toolbar lives in light DOM
   so a CSS rule is enough. Belt-and-braces selectors — match both by
   tag-name descendant + by toolbar class so we win the cascade. */
lexxy-editor button[name="image"],
lexxy-editor button[name="file"],
.lexxy-editor__toolbar-button[name="image"],
.lexxy-editor__toolbar-button[name="file"] {
  display: none !important;
}

/* Bullet + numbered list markers were rendering outside the editor's
   padding (overflowing the rounded border). Lexxy's default `ol/ul`
   uses `margin-inline-start` only — for list-style-position: outside
   markers, we need padding too so they sit inside the content box. */
lexxy-editor ol,
lexxy-editor ul:not(.lexxy-prompt-menu) {
  padding-inline-start: 1.75rem !important;
}

/* Dark-mode palette — engaged when an ancestor carries `.dark` (the
   app's Tailwind dark variant). */
.dark lexxy-editor,
:where(.dark *) lexxy-editor {
  --lexxy-color-ink: #f9fafb;            /* gray-50 */
  --lexxy-color-ink-medium: #d1d5db;     /* gray-300 */
  --lexxy-color-ink-light: #9ca3af;      /* gray-400 */
  --lexxy-color-ink-lighter: #4b5563;    /* gray-600 — divider */
  --lexxy-color-ink-lightest: #374151;   /* gray-700 — hover bg */
  --lexxy-color-ink-inverted: #111827;
  --lexxy-color-canvas: #374151;         /* gray-700 — matches form input bg */
  --lexxy-color-text: var(--lexxy-color-ink);

  --lexxy-color-accent-dark: #34d399;    /* emerald-400 — pops on dark */
  --lexxy-color-accent-medium: #10b981;  /* emerald-500 */
  --lexxy-color-accent-light: rgba(16, 185, 129, 0.15);
  --lexxy-color-accent-lightest: rgba(16, 185, 129, 0.08);
  --lexxy-color-selected: rgba(16, 185, 129, 0.18);
  --lexxy-color-selected-dark: #34d399;
  --lexxy-color-selected-hover: rgba(16, 185, 129, 0.28);
}

/* ── Toolbar on a phone ────────────────────────────────────────────────
   <lexxy-toolbar> is display:flex, flex-wrap:nowrap, and the app wraps the
   editor in a rounded box with overflow-hidden. Below sm: that clipped the
   toolbar instead of scrolling it: measured on stage at a 411px viewport,
   clientWidth 330 against scrollWidth 539, so ~209px of buttons — roughly
   the last third of the strip — could not be reached at all. The readiness
   card's first fix is "Edit the note", so this is on the path a phone user
   is actively sent down.

   Wrapping rather than a scroll strip: a horizontally scrollable toolbar
   inside an overflow-hidden box has no visible affordance, so the buttons
   stay just as invisible — they only become reachable if you guess. Two
   rows costs one line of vertical space and shows everything.

   Desktop is untouched: at >= 640px the strip has never overflowed. */
@media (max-width: 639px) {
  lexxy-toolbar {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}