/* rich-editor.css — theming for the self-hosted Quill editor (see rich-editor.js).
   Matches the editorial palette: ink #1A1714, brand #C8442C, Inter Tight. */

.rich-editor-host {
  background: #fff;
  display: flex;
  flex-direction: column;
  /* Never let the editor itself push a modal past the viewport — the inline
     max-height set from the init `height` is further bounded here. The toolbar
     stays fixed and the content area scrolls. */
  max-height: min(60vh, 500px);
}

/* In a centred/scrollable modal the editor lives in a flex column; the content
   area takes the remaining space and scrolls internally instead of growing. */
.rich-editor-host .ql-container {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.rich-editor-host .ql-toolbar {
  flex: 0 0 auto;
}

/* Quill splits the toolbar and the content into two bordered boxes; round and
   tint them to sit in the design system like a tw-input would. */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: #e5e1db;
}
.ql-toolbar.ql-snow {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #faf8f5;
}
.ql-container.ql-snow {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.ql-editor {
  font-family: "Inter Tight", Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #1A1714;
  min-height: 180px;
}

/* Brand colour for active/hovered toolbar buttons. */
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button.ql-active {
  color: #C8442C;
}
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: #C8442C;
}
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: #C8442C;
}
.ql-snow a {
  color: #C8442C;
}