/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---- Find & Replace highlight styles -------------------------------------
   These live in this plain, Propshaft-served stylesheet rather than the
   Tailwind input (app/assets/tailwind/application.css) on purpose: Tailwind
   v4's CSS optimizer (Lightning CSS 1.32.x) does not yet recognize the valid
   `::highlight()` pseudo-element and warns on every build. Serving the rule raw
   keeps it out of that optimize pass. Move it back once Tailwind bundles
   Lightning CSS >= 1.33.0. Linked via stylesheet_link_tag "application" in the
   application layout; behavior is driven by
   app/javascript/controllers/find_replace_controller.js.

   The two editing surfaces need two mechanisms. The rich (Trix) editor is
   contenteditable, so matches are painted with the CSS Custom Highlight API —
   no DOM mutation, so Trix's own document model is left untouched. The
   plain-note <textarea> can't style its own substrings, so the controller
   mirrors the textarea's text into an aligned backdrop behind it and wraps
   matches in <mark>; the textarea's background is made transparent
   (.fr-highlighting) so the marks show through, its text and caret still drawn
   on top. Light yellow with dark text — legible in dark mode too — while the
   *current* match keeps the browser's native selection colour. */
::highlight(find-match) {
  background-color: #fef08a;
  color: #1c1206;
}
.fr-highlighting {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}
.fr-backdrop {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  margin: 0;
}
.fr-backdrop-content {
  /* white-space / overflow-wrap / word-break are copied from the live textarea
     by find_replace_controller (syncBackdrop) so wrapping matches exactly; these
     are only pre-sync defaults. */
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  will-change: transform;
}
.fr-backdrop-content mark {
  background-color: #fef08a;
  color: transparent;
  border-radius: 2px;
}