/*
 * 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.
 */

/* ==========================================================================
   Sponsor Spotlight rich text editor (Lexical)
   --------------------------------------------------------------------------
   The editing surface is Lexical's contenteditable node, which the Stimulus
   controller labels `.srt-editor` directly in mount() — so the prose
   rules below target a plain element rather than a <trix-editor> custom
   element, and the toolbar chrome is our own markup rather than Trix's.

   Everything below is scoped under `.sponsor-rich-text.srt-shell`. The root
   rules require BOTH classes (not just `.sponsor-rich-text` alone) because
   `.sponsor-rich-text` is also used, without `.srt-shell`, by the plain
   default-toolbar Trix editor in app/views/cities/_sponsor_card_editor.html.erb
   — a bare `.sponsor-rich-text` rule would have silently reskinned that
   unrelated editor too. Everything else in the app keeps Rails' default
   actiontext.css look. Colors are drawn from the
   Tailwind config's `primary` scale plus the gray ramp the admin shell already
   uses, so the component reads as part of the dark dashboard chrome while the
   writing canvas stays a light "paper" surface.
   ========================================================================== */

.sponsor-rich-text.srt-shell {
  /* Chrome (matches the surrounding bg-gray-800 card, one step darker) */
  --srt-chrome: #111827;
  --srt-chrome-raised: #1f2937;
  --srt-border: #374151;
  --srt-border-soft: #1f2937;
  --srt-icon: #9ca3af;          /* 7.0:1 on --srt-chrome */
  --srt-icon-strong: #e5e7eb;   /* 13.6:1 on --srt-chrome */
  --srt-muted: #6b7280;

  /* Brand (tailwind.config.js `primary`) */
  --srt-accent: #2c5dbf;        /* primary-500 */
  --srt-accent-soft: rgba(44, 93, 191, 0.26);
  --srt-accent-text: #a9c3f2;   /* 7.4:1 on --srt-chrome-raised */

  /* Paper */
  --srt-paper: #ffffff;
  --srt-ink: #111827;           /* 16.1:1 on paper */
  --srt-ink-soft: #4b5563;      /* 7.6:1 on paper */
  --srt-rule: #e5e7eb;

  --srt-radius: 14px;
  --srt-ease: 140ms cubic-bezier(0.2, 0, 0.2, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--srt-chrome);
  border: 1px solid var(--srt-border);
  border-radius: var(--srt-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -18px rgba(0, 0, 0, 0.9);
  font-family: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: visible; /* dropdowns and the link dialog escape the shell */
}

/* Focus-within gives the whole component a single, calm focus treatment
   instead of ringing the inner contenteditable on its own. */
.sponsor-rich-text.srt-shell:focus-within,
.sponsor-rich-text.srt-shell--focused {
  border-color: var(--srt-accent);
  box-shadow: 0 0 0 3px rgba(44, 93, 191, 0.22), 0 8px 24px -18px rgba(0, 0, 0, 0.9);
}

.sponsor-rich-text.srt-shell [hidden] {
  display: none !important;
}

/* Momentary feedback when a keystroke is rejected at the 650-char limit
   (spotlight_editor_controller.js#flashLimitReached). The counter text also
   changes to "— limit reached", but that's easy to miss mid-typing since a
   blocked key otherwise looks identical to a dropped keystroke; the ring
   makes the block itself visible right where the user is looking. */
.sponsor-rich-text.srt-shell--limit {
  border-color: var(--srt-danger, #f87171);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25), 0 8px 24px -18px rgba(0, 0, 0, 0.9);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Fallback path when the Lexical dynamic import fails (see connect()'s .catch)
   — a plain textarea standing in so the saved content stays visible and
   editable, just without rich formatting. */
.sponsor-rich-text .srt-editor--fallback {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: var(--srt-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  padding: 16px;
}

.sponsor-rich-text .srt-load-error {
  margin: 0;
  padding: 8px 16px 14px;
  font-size: 12.5px;
  color: var(--srt-danger, #f87171);
}

/* --- Header ---------------------------------------------------------------
   Hosts the existing "Spotlight Text" label and the 650-character counter
   (still the same Stimulus target + aria-live region as before, just moved
   inside the component so it reads as part of it). */

.sponsor-rich-text .srt-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 8px;
}

.sponsor-rich-text .srt-header__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.sponsor-rich-text .srt-header__count {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Toolbar -------------------------------------------------------------- */

.sponsor-rich-text .srt-toolbar {
  position: relative; /* anchors the link popover */
  display: block;
  background-color: var(--srt-chrome);
  border-top: 1px solid var(--srt-border-soft);
  border-bottom: 1px solid var(--srt-border-soft);
  padding: 6px 10px;
}

.sponsor-rich-text .srt-toolbar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.sponsor-rich-text .srt-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sponsor-rich-text .srt-group--menu {
  position: relative;
}

.sponsor-rich-text .srt-group--end {
  margin-left: auto;
}

.sponsor-rich-text .srt-divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  margin: 0 5px;
  background-color: var(--srt-border);
}

/* --- Toolbar buttons ------------------------------------------------------ */

.sponsor-rich-text .srt-btn,
.sponsor-rich-text .srt-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--srt-icon);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--srt-ease), color var(--srt-ease),
              border-color var(--srt-ease), opacity var(--srt-ease);
}

.sponsor-rich-text .srt-btn svg,
.sponsor-rich-text .srt-trigger svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.sponsor-rich-text .srt-trigger {
  min-width: 118px;
  justify-content: space-between;
  padding: 0 8px 0 10px;
  border-color: var(--srt-border);
  background-color: var(--srt-chrome-raised);
  color: var(--srt-icon-strong);
}

.sponsor-rich-text .srt-trigger__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sponsor-rich-text .srt-trigger__caret {
  width: 14px;
  height: 14px;
  color: var(--srt-muted);
}

.sponsor-rich-text .srt-btn--split {
  min-width: 46px;
  padding: 0 4px;
}

.sponsor-rich-text .srt-btn--split .srt-trigger__caret {
  width: 12px;
  height: 12px;
}

.sponsor-rich-text .srt-btn:hover,
.sponsor-rich-text .srt-trigger:hover {
  background-color: var(--srt-chrome-raised);
  color: var(--srt-icon-strong);
}

.sponsor-rich-text .srt-trigger:hover {
  border-color: #4b5563;
}

.sponsor-rich-text .srt-btn:active,
.sponsor-rich-text .srt-trigger:active {
  transform: translateY(0.5px);
}

/* The Stimulus controller stamps .srt-active (and the matching
   aria-pressed / aria-checked) on any control whose command reports
   editor.isActive(...) at the caret. */
.sponsor-rich-text .srt-btn.srt-active {
  background-color: var(--srt-accent-soft);
  border-color: rgba(44, 93, 191, 0.5);
  color: var(--srt-accent-text);
}

.sponsor-rich-text .srt-btn[aria-expanded="true"],
.sponsor-rich-text .srt-trigger[aria-expanded="true"] {
  background-color: var(--srt-chrome-raised);
  border-color: #4b5563;
  color: var(--srt-icon-strong);
}

.sponsor-rich-text .srt-btn:disabled,
.sponsor-rich-text .srt-trigger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
  color: var(--srt-icon);
}

.sponsor-rich-text .srt-btn:focus-visible,
.sponsor-rich-text .srt-trigger:focus-visible,
.sponsor-rich-text .srt-menu__item:focus-visible,
.sponsor-rich-text .srt-dialog__btn:focus-visible,
.sponsor-rich-text .srt-dialog__input:focus-visible {
  outline: 2px solid var(--srt-accent);
  outline-offset: 2px;
}

/* --- Tooltips -------------------------------------------------------------
   Pure CSS, driven by data-srt-tip. The accessible name always comes from the
   button's aria-label, so the tooltip is purely visual decoration (it is a
   pseudo-element and therefore not in the a11y tree — hence no role="tooltip").
   Hidden on coarse pointers so there is no hover-only affordance on touch. */

.sponsor-rich-text [data-srt-tip]::after {
  content: attr(data-srt-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  z-index: 40;
  padding: 5px 9px;
  border-radius: 7px;
  background-color: #030712;
  border: 1px solid #374151;
  color: #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--srt-ease), transform var(--srt-ease), visibility var(--srt-ease);
}

.sponsor-rich-text [data-srt-tip]:hover::after,
.sponsor-rich-text [data-srt-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sponsor-rich-text [data-srt-tip]:disabled::after,
.sponsor-rich-text [data-srt-tip][aria-expanded="true"]::after {
  content: none;
}

@media (hover: none) {
  .sponsor-rich-text [data-srt-tip]::after {
    content: none;
  }
}

/* --- Dropdown menus ------------------------------------------------------- */

.sponsor-rich-text .srt-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 50;
  min-width: 216px;
  max-width: calc(100vw - 32px);
  padding: 5px;
  border: 1px solid var(--srt-border);
  border-radius: 12px;
  background-color: var(--srt-chrome-raised);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.sponsor-rich-text .srt-menu--compact {
  min-width: 178px;
}

.sponsor-rich-text .srt-menu--right,
.sponsor-rich-text .srt-menu--flip {
  left: auto;
  right: 0;
}

.sponsor-rich-text .srt-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e5e7eb;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--srt-ease), color var(--srt-ease);
}

.sponsor-rich-text .srt-menu__item + .srt-menu__item {
  margin-top: 1px;
}

.sponsor-rich-text .srt-menu__item:hover {
  background-color: #374151;
  color: #ffffff;
}

.sponsor-rich-text .srt-menu__item.srt-active {
  color: var(--srt-accent-text);
}

.sponsor-rich-text .srt-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

.sponsor-rich-text .srt-menu__icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--srt-icon);
}

.sponsor-rich-text .srt-menu__item:hover .srt-menu__icon,
.sponsor-rich-text .srt-menu__item.srt-active .srt-menu__icon {
  color: inherit;
}

.sponsor-rich-text .srt-menu__check {
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transition: opacity var(--srt-ease);
}

.sponsor-rich-text .srt-menu__check svg {
  width: 16px;
  height: 16px;
}

.sponsor-rich-text .srt-menu__item.srt-active .srt-menu__check {
  opacity: 1;
}

/* Type specimens in the Text style menu, so the choice is legible at a glance. */
.sponsor-rich-text .srt-menu__preview--p  { font-size: 13.5px; font-weight: 500; }
.sponsor-rich-text .srt-menu__preview--h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.sponsor-rich-text .srt-menu__preview--h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.sponsor-rich-text .srt-menu__preview--h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

/* --- Link popover ---------------------------------------------------------
   Shown/hidden by the [hidden] attribute (see the `[hidden] { display: none }`
   reset at the top of this block), positioned against .srt-toolbar. */

.sponsor-rich-text .srt-dialog {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0 auto;
  max-width: 420px;
  padding: 12px 13px 11px;
  border: 1px solid var(--srt-border);
  border-radius: 12px;
  background-color: var(--srt-chrome-raised);
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.sponsor-rich-text .srt-dialog__label {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sponsor-rich-text .srt-dialog__input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #4b5563;
  border-radius: 8px;
  background-color: #111827;
  color: #f3f4f6;
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color var(--srt-ease), box-shadow var(--srt-ease);
}

.sponsor-rich-text .srt-dialog__input::placeholder {
  color: #6b7280;
}

.sponsor-rich-text .srt-dialog__input:focus {
  outline: none;
  border-color: var(--srt-accent);
  box-shadow: 0 0 0 3px rgba(44, 93, 191, 0.25);
}

/* The controller sets aria-invalid only after a failed Apply; :invalid alone
   would light the field up before the user has finished typing. */
.sponsor-rich-text .srt-dialog__input[aria-invalid="true"] {
  border-color: #C8102E;
  background-color: rgba(200, 16, 46, 0.12);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
}

.sponsor-rich-text .srt-dialog__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.sponsor-rich-text .srt-dialog__spacer {
  flex: 1 1 auto;
}

.sponsor-rich-text .srt-dialog__btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--srt-ease), border-color var(--srt-ease), color var(--srt-ease);
}

.sponsor-rich-text .srt-dialog__btn--ghost {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.sponsor-rich-text .srt-dialog__btn--ghost:hover {
  background-color: #4b5563;
  color: #ffffff;
}

.sponsor-rich-text .srt-dialog__btn--primary {
  background-color: var(--srt-accent);
  color: #ffffff;
}

.sponsor-rich-text .srt-dialog__btn--primary:hover {
  background-color: #24509f;
}

/* --- Writing canvas ------------------------------------------------------- */

/* Square: the footer below supplies the shell's bottom corners. */
.sponsor-rich-text .srt-canvas {
  position: relative;
  background-color: var(--srt-paper);
}

.sponsor-rich-text .srt-editor {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  max-height: 460px;
  overflow-y: auto;
  padding: 26px 24px 32px;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  color: var(--srt-ink);
  font-family: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.003em;
  outline: none;
  overflow-wrap: break-word;
}

/* Caps the measure at a comfortable ~70 characters and centres it, so the
   editor still reads like a document when the two-column grid is wide. */
.sponsor-rich-text .srt-editor > * {
  max-width: 680px;
  margin-inline: auto;
}

.sponsor-rich-text .srt-editor ::selection {
  background-color: rgba(44, 93, 191, 0.24);
}

.sponsor-rich-text .srt-editor::selection,
.sponsor-rich-text .srt-editor *::selection {
  background-color: rgba(44, 93, 191, 0.24);
}

/* Placeholder empty state. Lexical has no built-in placeholder decoration
   (unlike Tiptap's Placeholder extension) — spotlight_editor_controller.js's
   syncPlaceholder() adds .is-editor-empty + data-placeholder to the editor's
   first paragraph by hand on every sync(). Rendering it as ::before content
   on that real paragraph (rather than a separately positioned overlay) keeps
   it in the real text flow, so nothing can drift out of alignment. */
.sponsor-rich-text .srt-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: #9ca3af;
  pointer-events: none;
}

/* --- Lexical inline theme classes ------------------------------------------
   Lexical's contenteditable is a plain, browser-native contenteditable div —
   no gap-cursor concept, no injected base stylesheet to reproduce. The
   `theme` object passed to core.createEditor() in mount() adds these classes
   ADDITIVELY alongside the semantic tag Lexical already renders (e.g. a bold
   TextNode is a real <strong>-less <span class="srt-mark-bold">, a heading
   node is a real <h1 class="srt-node-h1">), so the tag-selector prose rules
   below still do the heavy lifting; these are just the hooks for formats that
   have no semantic tag of their own. */

.sponsor-rich-text .srt-mark-bold { font-weight: 700; }
.sponsor-rich-text .srt-mark-italic { font-style: italic; }
.sponsor-rich-text .srt-mark-underline { text-decoration: underline; text-underline-offset: 2px; }
.sponsor-rich-text .srt-mark-strike { text-decoration: line-through; }
.sponsor-rich-text .srt-mark-underline.srt-mark-strike { text-decoration: underline line-through; }

/* --- Prose typography inside the canvas -----------------------------------
   Scoped to .srt-editor so Rails' global .trix-content rules in actiontext.css
   (used by admin pages elsewhere) are untouched. */

.sponsor-rich-text .srt-editor > div,
.sponsor-rich-text .srt-editor > p {
  margin: 0 auto 0.85em;
}

.sponsor-rich-text .srt-editor > *:last-child {
  margin-bottom: 0;
}

.sponsor-rich-text .srt-editor h1,
.sponsor-rich-text .srt-editor h2,
.sponsor-rich-text .srt-editor h3 {
  color: #0b1220;
  font-weight: 700;
  text-wrap: balance;
}

.sponsor-rich-text .srt-editor h1 {
  margin: 1.2em auto 0.4em;
  font-size: 1.85em;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.sponsor-rich-text .srt-editor h2 {
  margin: 1.15em auto 0.38em;
  font-size: 1.35em;
  line-height: 1.28;
  letter-spacing: -0.018em;
}

.sponsor-rich-text .srt-editor h3 {
  margin: 1em auto 0.32em;
  font-size: 1.1em;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.sponsor-rich-text .srt-editor > h1:first-child,
.sponsor-rich-text .srt-editor > h2:first-child,
.sponsor-rich-text .srt-editor > h3:first-child {
  margin-top: 0;
}

.sponsor-rich-text .srt-editor ul,
.sponsor-rich-text .srt-editor ol {
  margin: 0.7em auto 0.85em;
  padding-left: 1.5em;
}

.sponsor-rich-text .srt-editor ul { list-style: disc; }
.sponsor-rich-text .srt-editor ol { list-style: decimal; }
.sponsor-rich-text .srt-editor ul ul { list-style: circle; }
.sponsor-rich-text .srt-editor ul ul ul { list-style: square; }
.sponsor-rich-text .srt-editor ol ol { list-style: lower-alpha; }
.sponsor-rich-text .srt-editor ol ol ol { list-style: lower-roman; }

.sponsor-rich-text .srt-editor li {
  margin: 0.22em 0;
  padding-left: 0.18em;
}

/* Nested lists are children of their parent <li>, so they must not re-apply
   the outer max-width/auto-margin from the `> *` rule. */
.sponsor-rich-text .srt-editor li > ul,
.sponsor-rich-text .srt-editor li > ol {
  margin: 0.22em 0 0.22em;
  max-width: none;
}

.sponsor-rich-text .srt-editor li::marker {
  color: #9ca3af;
}

.sponsor-rich-text .srt-editor blockquote {
  margin: 0.9em auto;
  padding: 0.15em 0 0.15em 1.05em;
  border-left: 3px solid var(--srt-accent);
  color: var(--srt-ink-soft);
  font-style: normal;
}

.sponsor-rich-text .srt-editor blockquote blockquote {
  max-width: none;
  margin: 0.5em 0;
}

.sponsor-rich-text .srt-editor code {
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background-color: #eef1f6;
  color: #9f1239;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.sponsor-rich-text .srt-editor pre {
  margin: 0.9em auto;
  padding: 14px 16px;
  border: 1px solid var(--srt-rule);
  border-radius: 10px;
  background-color: #f6f8fb;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  line-height: 1.65;
  /* pre-wrap, not pre: Lexical's contenteditable depends on it for position mapping. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 2;
}

/* @lexical/code's CodeNode renders as a block-level <code class="srt-node-code">,
   not wrapped in a <pre> the way the paragraph-era markup was — so it inherits
   the inline `.srt-editor code` rule above (small padding, tiny border-radius)
   and reads as inline code, not a code block. Override with the same
   padding/border/background/font values as the `pre` rule above so it reads
   the same either way; the extra class in the selector out-specifies the
   bare `code` rule. */
.sponsor-rich-text .srt-editor code.srt-node-code {
  display: block;
  margin: 0.9em auto;
  padding: 14px 16px;
  border: 1px solid var(--srt-rule);
  border-radius: 10px;
  background-color: #f6f8fb;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 2;
}

/* markHorizontalRuleParagraphs() (see spotlight_editor_controller.js) tags a
   paragraph containing exactly "---" with this class on every sync(). Style
   it as a clean divider instead of literal dashes. */
.sponsor-rich-text .srt-editor p.srt-node-hr {
  height: 0;
  margin: 1.4em auto;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--srt-rule);
  font-size: 0;
  line-height: 0;
  color: transparent;
  user-select: none;
}

.sponsor-rich-text .srt-editor a {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.35);
  text-underline-offset: 2px;
  transition: color var(--srt-ease), text-decoration-color var(--srt-ease);
}

.sponsor-rich-text .srt-editor a:hover {
  color: #1e3a8a;
  text-decoration-color: currentColor;
}

.sponsor-rich-text .srt-editor u {
  text-underline-offset: 2px;
}

.sponsor-rich-text .srt-editor hr {
  max-width: 680px;
  margin: 1.35em auto;
  height: 0;
  border: 0;
  border-top: 1px solid var(--srt-rule);
}

.sponsor-rich-text .srt-editor strong { font-weight: 700; }
.sponsor-rich-text .srt-editor del { color: var(--srt-ink-soft); }

/* --- Footer --------------------------------------------------------------- */

.sponsor-rich-text .srt-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 14px;
  border-top: 1px solid var(--srt-rule);
  background-color: #f9fafb;
  border-radius: 0 0 calc(var(--srt-radius) - 1px) calc(var(--srt-radius) - 1px);
}

/* Deliberately quieter than the 650-character limit counter in the header —
   this is an informational stat, not the thing that blocks saving. */
.sponsor-rich-text .srt-footer__stat {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .sponsor-rich-text .srt-toolbar__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .sponsor-rich-text .srt-toolbar__row::-webkit-scrollbar {
    display: none;
  }

  .sponsor-rich-text .srt-group--end {
    margin-left: 4px;
    position: static; /* let the More menu anchor to the toolbar, not a scrolled group */
  }

  .sponsor-rich-text .srt-btn,
  .sponsor-rich-text .srt-trigger {
    min-width: 40px;
    height: 40px;
  }

  .sponsor-rich-text .srt-trigger {
    min-width: 104px;
  }

  /* Secondary controls fold away on phones; everything they do is still
     reachable from the More menu or the Text style dropdown. */
  .sponsor-rich-text .srt-btn[data-se-command="outdent"],
  .sponsor-rich-text .srt-btn[data-se-command="indent"],
  .sponsor-rich-text .srt-btn[data-se-command="inlineCode"],
  .sponsor-rich-text .srt-btn[data-se-command="codeBlock"],
  .sponsor-rich-text .srt-btn[data-se-command="horizontalRule"],
  .sponsor-rich-text .srt-divider {
    display: none;
  }

  .sponsor-rich-text .srt-menu {
    left: auto;
    right: 0;
    max-width: calc(100vw - 40px);
  }

  .sponsor-rich-text .srt-editor {
    padding: 20px 16px 26px;
    font-size: 16px;
  }

  .sponsor-rich-text .srt-dialog {
    left: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-rich-text * {
    transition-duration: 1ms !important;
  }
}

/* Legacy Trix "center" block attribute (see app/javascript/application.js)
   renders as a plain <p> with no attributes of its own; style it here for the
   Trix editors that remain (cities sponsor card, businesses new/edit) and any
   in-app .trix-content display of their output. Emailed content gets text-align
   inlined at render time instead, since email clients don't load this stylesheet.

   Note this rule is deliberately NOT applied to the Lexical-authored spotlight
   preview below: Lexical writes an explicit inline text-align on every block, so
   blanket-centering paragraphs there would fight the author's actual choice. */
trix-editor p,
.trix-content p {
  text-align: center;
}

.trix-content h2,
.trix-content h3 {
  font-weight: 700;
  line-height: 1.3;
}

.trix-content h2 { font-size: 1.3em; margin: 0.8em 0 0.3em; }
.trix-content h3 { font-size: 1.1em; margin: 0.7em 0 0.25em; }

/* --------------------------------------------------------------------------
   Sponsor spotlight live preview (business dashboard)
   --------------------------------------------------------------------------
   Approximates the newsletter email, which loads no stylesheet at all — so this
   deliberately stays close to browser defaults and only supplies the rhythm an
   email client would give these tags anyway. Alignment is intentionally absent:
   it arrives inline, from the content itself.
   -------------------------------------------------------------------------- */

.srt-preview > *:first-child { margin-top: 0; }
.srt-preview > *:last-child { margin-bottom: 0; }

.srt-preview p { margin: 0 0 0.85em; }

.srt-preview h1,
.srt-preview h2,
.srt-preview h3 {
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

.srt-preview h1 { font-size: 1.55em; margin: 0.8em 0 0.35em; }
.srt-preview h2 { font-size: 1.3em;  margin: 0.8em 0 0.3em; }
.srt-preview h3 { font-size: 1.1em;  margin: 0.7em 0 0.25em; }

.srt-preview ul,
.srt-preview ol { margin: 0.6em 0 0.85em; padding-left: 1.4em; }
.srt-preview ul { list-style: disc; }
.srt-preview ol { list-style: decimal; }
.srt-preview li { margin: 0.2em 0; }

.srt-preview blockquote {
  margin: 0.8em 0;
  padding-left: 0.9em;
  border-left: 3px solid rgba(255, 255, 255, 0.35);
}

.srt-preview hr {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 1.1em 0;
}

.srt-preview a { color: #fbbf24; text-decoration: underline; }

.srt-preview code {
  padding: 0.1em 0.32em;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.srt-preview pre {
  margin: 0.8em 0;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  white-space: pre-wrap;
  overflow-x: auto;
}