/*
 * RhinoEditor's shipped stylesheets, vendored here since import maps are JS-only (CSS can't be
 * `bin/importmap pin`-tracked the same way). Pinned JS version: rhino-editor@0.18.3 — bumping
 * that pin (config/importmap.rb) means re-copying these two upstream files by hand:
 *   https://cdn.jsdelivr.net/npm/rhino-editor@0.18.3/exports/styles/trix-core.css
 *   https://cdn.jsdelivr.net/npm/rhino-editor@0.18.3/exports/styles/rhino-editor.css
 * The `.dark` overrides at the bottom of this file are ours, not upstream — keep them after any
 * re-copy.
*/

/* trix-core.css */
.rhino-editor .trix-content {
  border: 1px solid var(--rhino-border-color);
  border-radius: 0px 0px var(--rhino-border-radius) var(--rhino-border-radius);
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 200px;
}

.trix-content {
  outline: transparent;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content[contenteditable=true] {
  white-space: pre-wrap;
}

.trix-content:is(:focus, :focus-within) {
  border-color: var(--rhino-button-active-border-color);
}

.trix-content :is(img, svg, figure) {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.trix-content :is(figure, p) {
  padding: 0;
  margin: 0;
}

.trix-content figure {
  position: relative;
}

.trix-content figcaption {
  line-break: anywhere;
  display: inline-block;
  white-space: normal;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.trix-content[contenteditable=true] figcaption {
  white-space: break-spaces;
}

.trix-content .rhino-upload-error {
  background-color: rgba(255, 0, 0, 0.3);
}

.trix-content:not([readonly]) .attachment--preview:is(:focus-within, :focus, .has-focus) :is(img) {
  outline: transparent;
  box-shadow: var(--rhino-focus-ring);
}

.trix-content:not([readonly]) .attachment:not(.attachment--preview):is(:focus-within, :focus, .has-focus) {
  outline: transparent;
  box-shadow: var(--rhino-focus-ring);
}

.rhino-attachment-editor::part(delete-button),
.rhino-attachment-editor::part(file-metadata) {
  display: none;
}

.trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(delete-button),
.trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(file-metadata) {
  display: flex;
}

.trix-content .placeholder {
  position: absolute;
  pointer-events: none;
  color: var(--rhino-placeholder-text-color);
  color: light-dark(var(--rhino-placeholder-text-color), var(--rhino-dark-placeholder-text-color));
  cursor: text;
  content: "";
}

.trix-content figure.attachment figcaption {
  position: relative;
}

.trix-content p.is-editor-empty:first-child::before,
.trix-content figure[data-trix-attachment].has-focus figcaption.is-empty::before {
  color: var(--rhino-placeholder-text-color);
  color: light-dark(var(--rhino-placeholder-text-color), var(--rhino-dark-placeholder-text-color));
  content: attr(data-placeholder);
  pointer-events: none;
}

.trix-content figure[data-trix-attachment]:not(.has-focus) figcaption.is-empty::before {
  content: attr(data-default-caption);
  pointer-events: none;
}

.trix-content ul {
  list-style: disc;
}

.trix-content ol {
  list-style-type: decimal;
}

.trix-content figure[data-trix-attachment].has-focus figcaption.is-empty::before {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0%);
}

.trix-content p.is-editor-empty:first-child::before {
  float: left;
  height: 0;
  pointer-events: none;
}

.trix-content {
  box-sizing: border-box;
}

.trix-content * {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-inline-start-width: 0.3em;
  margin-inline-start: 0.3em;
  padding-inline-start: 0.6em;
}

.trix-content li {
  margin-inline-start: 1em;
}

.trix-content :not(pre) code {
  background-color: #eee;
  border-radius: 2px;
  padding: 2px;
  margin: 0 1px;
  border: 1px solid rgba(192, 192, 192, 0.5);
  display: inline;
}

.trix-content code,
.trix-content pre {
  box-decoration-break: clone;
}

.trix-content pre {
  display: block;
  width: 100%;
  font-family: monospace;
  padding: 0.5em;
  white-space: pre;
  overflow-x: auto;
  background-color: #eee;
  font-size: 0.9em;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment figcaption a,
.trix-content .attachment figcaption a:hover {
  color: LinkText;
}

.trix-content .attachment figcaption a:visited,
.trix-content .attachment figcaption a:hover:visited {
  color: VisitedText;
}

.trix-content .attachment__caption {
  text-align: center;
  margin-top: 0.5em;
}

.trix-content .attachment__caption .attachment__name+.attachment__size::before {
  content: " \b7  ";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
  margin: 0.6em 0;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment.attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid var(--rhino-border-color);
  border-radius: var(--rhino-border-radius);
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content figure.attachment {
  display: inline-block;
  position: relative;
  white-space: normal;
}

.trix-content .attachment-gallery>p {
  width: 0px;
  padding: 0;
  flex-basis: 0%;
  max-width: 0%;
  flex-shrink: 1;
  flex-grow: 0;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 100%;
  padding: 0 0.5em;
  max-width: 100%;
  white-space: normal;
}

.trix-content .attachment-gallery> :is(.attachment--preview, action-text-attachment[previewable=true]) {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
  white-space: normal;
}

.trix-content .attachment-gallery> :is(.attachment, action-text-attachment):first-of-type:nth-last-of-type(1)~ :is(.attachment, action-text-attachment),
.trix-content .attachment-gallery> :is(.attachment, action-text-attachment):first-of-type:nth-last-of-type(1) {
  padding: 0;
  flex-basis: 100%;
  max-width: 100%;
}

.attachment-gallery> :is(.attachment--preview, action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(2),
.attachment-gallery> :is(.attachment--preview, action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(2)~ :is(.attachment--preview, action-text-attachment[previewable=true]),
.attachment-gallery> :is(.attachment--preview, action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(4),
.attachment-gallery> :is(.attachment--preview, action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(4)~ :is(.attachment--preview, action-text-attachment[previewable=true]) {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content .attachment-gallery.attachment-gallery--2 action-text-attachment>.attachment,
.trix-content .attachment-gallery.attachment-gallery--4 action-text-attachment>.attachment,
.trix-content .attachment-gallery action-text-attachment>.attachment {
  max-width: 100%;
}

/* rhino-editor.css */
:host,
.trix-content {
  --rhino-focus-ring: 0px 0px 1px 1px var(--rhino-button-active-border-color);
  --rhino-border-radius: 4px;
  --rhino-danger-border-color: red;
  --rhino-danger-background-color: #ffdddd;
  --rhino-text-color: #374151;
  --rhino-dark-text-color: white;
  --rhino-border-color: #cecece;
  --rhino-placeholder-text-color: #cecece;
  --rhino-dark-placeholder-text-color: gray;
  --rhino-button-text-color: #889;
  --rhino-button-dark-text-color: #eee;
  --rhino-button-border-color: #cecece;
  --rhino-button-disabled-text-color: #d1d5db;
  --rhino-button-disabled-border-color: #d1d5db;
  --rhino-button-disabled-background-color: #d1d5db;
  --rhino-button-active-border-color: #005a9c;
  --rhino-button-active-background-color: rgb(226 239 255);
  --rhino-toolbar-text-color: hsl(219, 6%, 43%);
  --rhino-toolbar-icon-size: 1em;
  --rhino-dialog-border-color: hsl(var(--rhino-button-focus-background-color-hsl) / 50%);
  --rhino-button-focus-background-color: hsl(var(--rhino-button-focus-background-color-hsl));
  --rhino-button-focus-background-color-hsl: 219 26% 95%;
  --rhino-fake-selection-color: rgb(220, 220, 220);
  display: block;
  color: var(--rhino-text-color);
  color: light-dark(var(--rhino-text-color), var(--rhino-dark-text-color));
}

@keyframes rhino-blink {
  49% {
    border-color: unset;
  }

  50% {
    border-color: Canvas;
  }

  99% {
    border-color: Canvas;
  }
}

.rhino-editor .no-cursor {
  caret-color: transparent;
}

:where(.rhino-editor) .fake-cursor {
  margin: 0;
  padding: 0;
  margin-right: -1px;
  border-left-width: 1px;
  border-left-style: solid;
  animation: rhino-blink 1s;
  animation-iteration-count: infinite;
  position: relative;
  z-index: 1;
}

:where(.rhino-editor .ProseMirror):not(:focus-within) .rhino-selection {
  background: var(--rhino-fake-selection-color);
}

.ProseMirror-separator {
  display: none !important;
}

.rhino-toolbar-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rhino-border-color);
  border-radius: var(--rhino-border-radius);
  padding: 0.4em;
  color: var(--rhino-button-text-color);
  color: light-dark(var(--rhino-button-text-color), var(--rhino-button-dark-text-color));
  background: Canvas;
  font-size: inherit;
  display: inline-grid;
}

.rhino-toolbar-button:is([aria-disabled=true], :disabled) {
  color: var(--rhino-button-disabled-text-color);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button[aria-disabled=true]:focus {
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button svg {
  min-height: var(--rhino-toolbar-icon-size);
  min-width: var(--rhino-toolbar-icon-size);
  max-height: var(--rhino-toolbar-icon-size);
  max-width: var(--rhino-toolbar-icon-size);
}

.rhino-toolbar-button:is(:focus, :hover):not([aria-disabled=true], :disabled) {
  outline: transparent;
  border-color: var(--rhino-button-active-border-color);
}

.rhino-toolbar-button:is(:focus):not([aria-disabled=true], :disabled) {
  box-shadow: var(--rhino-focus-ring);
}

.rhino-toolbar-button:is(:hover):not([aria-disabled=true], :disabled, [aria-pressed=true], [part~=toolbar__button--active]) {
  background-color: var(--rhino-button-focus-background-color);
  background-color: light-dark(var(--rhino-button-focus-background-color), gray);
}

.rhino-toolbar-button:is([aria-disabled=true], :disabled):not([part~=toolbar__button--active]) {
  color: var(--rhino-button-disabled-text-color);
  color: light-dark(var(--rhino-button-disabled-text-color), gray);
  border-color: var(--rhino-button-disabled-border-color);
}

.rhino-toolbar-button:is(:focus, :hover):is([aria-disabled=true], :disabled):not([part~=toolbar__button--active]) {
  outline: transparent;
  color: var(--rhino-button-disabled-text-color);
  color: light-dark(var(--rhino-button-disabled-text-color), gray);
  border-color: var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px var(--rhino-button-disabled-border-color);
  box-shadow: 0 0 0 1px light-dark(var(--rhino-button-disabled-border-color), transparent);
}

/*
 * App theming: override RhinoEditor's --rhino-* custom properties to match this app's Tailwind
 * gray palette (same colors as simple_form_tailwind.rb's INPUT_CLASSES) instead of Rhino's own
 * light-dark() defaults, so the editor matches every other themed form control. Custom properties
 * are inherited properties — they cross the toolbar's Shadow DOM boundary from this light-DOM
 * selector without needing ::part() overrides for color.
*/
rhino-editor,
.trix-content {
  --rhino-border-color: #d1d5db;
  /* gray-300, matches INPUT_CLASSES border */
}

.dark rhino-editor,
.dark .trix-content {
  --rhino-text-color: #f3f4f6;
  /* gray-100 */
  --rhino-border-color: #374151;
  /* gray-700 */
  --rhino-placeholder-text-color: #6b7280;
  /* gray-500 */
  --rhino-button-text-color: #d1d5db;
  /* gray-300 */
  --rhino-button-border-color: #374151;
  /* gray-700 */
  --rhino-button-active-border-color: #3855a2;
  /* brand-primary */
  --rhino-button-active-background-color: rgb(56 85 162 / 20%);
  /* brand-primary/20 */
  --rhino-toolbar-text-color: #9ca3af;
  /* gray-400 */
  --rhino-fake-selection-color: #374151;
  /* gray-700 */
}

.dark rhino-editor {
  background-color: #111827;
  /* gray-900, matches INPUT_CLASSES dark background */
}

.dark rhino-editor::part(toolbar__base) {
  background-color: #1f2937;
  /* gray-800 */
  border-color: #374151;
  /* gray-700 */
}

/*
 * Toolbar buttons and the link dialog container hardcode `background: Canvas` (a browser system
 * color) in RhinoEditor's own CSS instead of a --rhino-* variable, so a light-DOM custom-property
 * override can't reach them — Canvas tracks the OS/browser color scheme, not this app's manual
 * `.dark` class toggle. These need ::part() overrides instead (the buttons/dialog live in the
 * toolbar's Shadow DOM; the CSS custom properties above already cover everything that *is*
 * parameterized, e.g. button text/border color).
*/
.dark rhino-editor::part(toolbar__button) {
  background-color: transparent;
}

.dark rhino-editor::part(link-dialog__container) {
  background-color: #1f2937;
  /* gray-800 */
  border-color: #374151;
  /* gray-700 */
}

/*
 * The editable content area (ProseMirror's contenteditable root) is a light-DOM child of
 * <rhino-editor>, not shadow-scoped — same `.trix-content` class as the read-only render in
 * layouts/action_text/contents/_content.html.erb — so these apply to both the live editor and
 * published pages. trix-core.css hardcodes light colors for code/attachments with no --rhino-*
 * variable to hook into, so they're overridden directly here instead.
*/
.dark .trix-content :not(pre) code {
  background-color: #374151;
  /* gray-700 */
  color: #f3f4f6;
  /* gray-100 */
  border-color: #4b5563;
  /* gray-600 */
}

.dark .trix-content pre {
  background-color: #1f2937;
  /* gray-800 */
  color: #f3f4f6;
  /* gray-100 */
}

.dark .trix-content .attachment--preview .attachment__caption {
  color: #9ca3af;
  /* gray-400 */
}

.dark .trix-content .attachment.attachment--file {
  color: #f3f4f6;
  /* gray-100 */
  border-color: #374151;
  /* gray-700 */
}

/* Tables — the TipTap table extension is baked into the editor bundle (vendor/editor/, built by bin/build-editor). `.trix-content` covers both the live editor and read-only rendering; .selectedCell/.column-resize-handle/.resize-cursor are prosemirror-tables' editing chrome and only ever appear inside the editor. */
.trix-content .tableWrapper {
  overflow-x: auto;
  margin: 0.5em 0;
}

.trix-content table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.trix-content th,
.trix-content td {
  border: 1px solid #d1d5db;
  /* gray-300 */
  padding: 0.375em 0.5em;
  vertical-align: top;
  position: relative;
  min-width: 1em;
}

.trix-content th {
  background-color: #f3f4f6;
  /* gray-100 */
  font-weight: 600;
  text-align: left;
}

.dark .trix-content th,
.dark .trix-content td {
  border-color: #374151;
  /* gray-700 */
}

.dark .trix-content th {
  background-color: #1f2937;
  /* gray-800 */
}

.trix-content .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(56 85 162 / 15%);
  /* brand-primary/15 */
  pointer-events: none;
  z-index: 2;
}

.trix-content .column-resize-handle {
  position: absolute;
  top: 0;
  bottom: -2px;
  right: -2px;
  width: 4px;
  background-color: #3855a2;
  /* brand-primary */
  pointer-events: none;
  z-index: 20;
}

.trix-content.resize-cursor {
  cursor: col-resize;
}

/* The slotted insert-table button (rhino_text_area_input.rb) is light-DOM, so the ::part(toolbar__button) override above can't reach it — same `background: Canvas` problem, patched directly on the class. The hover/focus variant needs its own higher-specificity rule: the vendored hover rule above resolves its background through light-dark(), which follows the OS color scheme instead of this app's manual .dark toggle. Transparent (hover feedback stays the border-color change) to match the shadow-DOM toolbar buttons, whose ::part override keeps them transparent on hover too. */
.dark .rhino-toolbar-button,
.dark .rhino-toolbar-button:is(:focus, :hover):not([aria-disabled=true], :disabled) {
  background-color: transparent;
}

/*
 * Read-only render spacing (ours). Upstream's trix-core.css zeroes every margin inside
 * .trix-content (`.trix-content *` and `.trix-content :is(figure, p)`) — correct for the live
 * ProseMirror editor, which manages its own rhythm, but it leaves published content (pages/show
 * and any other has_rich_text render through layouts/action_text/contents/_content.html.erb)
 * with zero gap between blocks. The editor root gets contenteditable="true" from RhinoEditor's
 * JS (see the upstream `.trix-content[contenteditable=true]` selector above); read-only renders
 * never carry the attribute, so :not([contenteditable]) targets only the published view without
 * touching any vendored rule. margin-top-only (no margin-bottom) so no margins ever collapse
 * against each other; source order below is load-bearing — the heading-hugs-following-text rule
 * comes last so a heading directly after another heading stays tight too.
*/
.trix-content:not([contenteditable]) > * + * {
  margin-top: 0.75em;
}

.trix-content:not([contenteditable]) > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.5em;
  /* a heading starts a new section: extra air above it */
}

.trix-content:not([contenteditable]) > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0.25em;
  /* whatever follows a heading hugs it */
}

.trix-content:not([contenteditable]) blockquote > * + * {
  margin-top: 0.75em;
  /* multi-paragraph blockquotes keep the same inter-block gap (the `>` rules above only reach top-level blocks) */
}