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

/*
 * Compact rich-text composer (the inline comment box). Lexxy sizes the editor's
 * content area to `--lexxy-editor-rows` (default 8lh) via a zero-specificity
 * `:where()` rule, so this class selector overrides it: start at ~2 rows and
 * grow to the full height only while the editor has focus, so the activity feed
 * isn't dominated by an empty box. Lexxy loads after this file, but specificity
 * (0,2,1 here vs 0,0,0 there) wins regardless of order.
 */
lexxy-editor.rich-text--compact .lexxy-editor__content {
  min-block-size: 2lh;
  transition: min-block-size 150ms ease;
}
lexxy-editor.rich-text--compact:focus-within .lexxy-editor__content {
  min-block-size: 8lh;
}

/* The formatting toolbar only appears once the composer is focused, so an
   unfocused comment box is just a slim input. (display isn't animatable, so
   this toggles rather than eases; lexxy's own rule sets `display: flex`.) */
lexxy-editor.rich-text--compact lexxy-toolbar {
  display: none;
}
lexxy-editor.rich-text--compact:focus-within lexxy-toolbar {
  display: flex;
}

/* ---------------------------------------------------------------------------
   Dark mode for the lexxy rich-text editor.

   Lexxy is fully themed through `--lexxy-color-*` custom properties it sets on
   :root (lexxy-variables.css). It ships only a light palette, so we redefine the
   colour ramp + semantic tokens for dark — mirroring the app's token system
   (app/assets/tailwind/application.css): apply under BOTH an explicit `:root.dark`
   AND a dark OS when not forced light, so the editor follows system, light, and
   dark like everything else. This file (the :app stylesheet) is fine to do it in
   even though lexxy loads after it — `:root.dark` / `:root:not(.light)` outrank
   lexxy's bare `:root` on specificity regardless of source order. Values track
   our tokens (#1c1c1c field bg, #f3f4f6 content, #60a5fa accent) so the editor
   reads like the app's other inputs; code-block syntax tokens use a GitHub-dark
   palette (the light ones — e.g. near-black punctuation — vanish on a dark bg). */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --lexxy-color-ink: #f3f4f6;
    --lexxy-color-ink-medium: #a3a3a3;
    --lexxy-color-ink-light: #8b8b8b;
    --lexxy-color-ink-lighter: #3a3a3a;
    --lexxy-color-ink-lightest: #242424;
    --lexxy-color-canvas: #1c1c1c;
    --lexxy-color-link: #60a5fa;
    --lexxy-color-code-bg: #242424;
    --lexxy-color-selected: rgb(96 165 250 / 0.18);
    --lexxy-color-selected-hover: rgb(96 165 250 / 0.28);
    --lexxy-color-accent-lightest: rgb(96 165 250 / 0.14);
    --lexxy-color-accent-light: rgb(96 165 250 / 0.22);
    --lexxy-color-table-header-bg: #242424;
    --lexxy-color-table-cell-border: #3a3a3a;

    --lexxy-color-code-token-att: #79c0ff;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;
  }
}

:root.dark {
  --lexxy-color-ink: #f3f4f6;
  --lexxy-color-ink-medium: #a3a3a3;
  --lexxy-color-ink-light: #8b8b8b;
  --lexxy-color-ink-lighter: #3a3a3a;
  --lexxy-color-ink-lightest: #242424;
  --lexxy-color-canvas: #1c1c1c;
  --lexxy-color-link: #60a5fa;
  --lexxy-color-code-bg: #242424;
  --lexxy-color-selected: rgb(96 165 250 / 0.18);
  --lexxy-color-selected-hover: rgb(96 165 250 / 0.28);
  --lexxy-color-accent-lightest: rgb(96 165 250 / 0.14);
  --lexxy-color-accent-light: rgb(96 165 250 / 0.22);
  --lexxy-color-table-header-bg: #242424;
  --lexxy-color-table-cell-border: #3a3a3a;

  --lexxy-color-code-token-att: #79c0ff;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #c9d1d9;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;
}