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

/*
 * Trix editor and rich-text output, restyled to the design system.
 *
 * These live here rather than in the Tailwind file on purpose. actiontext.css
 * ships unlayered CSS (a bare `trix-editor { border: 1px solid #bbb }`), and
 * unlayered rules beat anything inside @layer regardless of specificity - so a
 * .field-input in @layer components loses to it. Same cascade-layer trap that
 * made an earlier main-margin fix look like it did nothing. Unlayered here,
 * loaded after actiontext.css, so it wins cleanly.
 *
 * Tokens come from Tailwind's @theme, which emits them as real custom
 * properties, so these follow light/dark without duplicating the palette.
 */
/* The editor carries Trix's own `trix-content` class, not `.field-input`. The
   Rails helper does `options[:class] ||= "trix-content"`, so passing a class
   *replaces* it rather than adding to it - the views used to pass
   `class: "field-input"` and silently traded away every `.trix-content` rule
   below, which is why a bullet list looked like plain text while you typed it
   and only grew bullets once saved. The field look is set here instead. */
trix-editor {
  display: block;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--color-text);
  font-size: 15px;
  min-height: 7em;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.08);
}
trix-editor:focus {
  border-color: var(--color-accent);
  outline: none;
}
trix-editor:empty:not(:focus)::before {
  color: var(--color-dim);
}

/* Attachments are off (see application.js), so the file group and the spacer
   that pushed it to the far right both go. That plus the wider form column is
   what gets the toolbar back onto one row - it used to wrap to three. */
trix-toolbar .trix-button-group--file-tools,
trix-toolbar .trix-button-group-spacer {
  display: none;
}

trix-toolbar {
  margin-bottom: 8px;
}
trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  overflow-x: visible;
}
trix-toolbar .trix-button-group {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-raised);
  margin-bottom: 0;
}
trix-toolbar .trix-button {
  border-bottom: none;
  border-left-color: var(--color-border);
  color: var(--color-text);
}
trix-toolbar .trix-button:not(:disabled):hover {
  background: var(--color-accent);
  color: var(--color-bg);
}
trix-toolbar .trix-button.trix-active {
  background: var(--color-accent);
  color: var(--color-bg);
}
/* Trix draws its icons as background images in a fixed dark colour, which
   disappears against the dark theme. Inverting them tracks the theme without
   shipping a second icon set. */
:root:not([data-theme="light"]) trix-toolbar .trix-button::before {
  filter: invert(1);
}

/* Rendered output. Trix emits plain divs plus the usual inline tags, so this is
   what gives owner-authored prose its shape once it's on the page. */
.trix-content {
  line-height: 1.7;
}
.trix-content div + div {
  margin-top: 0.75em;
}
.trix-content a {
  color: var(--color-accent);
  text-decoration: underline;
}
.trix-content ul,
.trix-content ol {
  padding-left: 1.4em;
  margin: 0.75em 0;
}
.trix-content ul { list-style: disc; }
.trix-content ol { list-style: decimal; }
.trix-content li { margin-bottom: 0.35em; }
.trix-content blockquote {
  border-left: 2px solid var(--color-accent);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--color-dim);
}
.trix-content pre {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  font-family: var(--font-mono), monospace;
  font-size: 13px;
}
.trix-content h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1em 0 0.4em;
}