/* ==========================================================================
   Lexxy Editor Extensions

   Custom extensions to Lexxy editor styling.
   ========================================================================== */

/* Override Lexxy's default blue accent with our parchment gold.
   Set at :root so it applies to both the editor and display-mode content. */
:root {
  --lexxy-color-accent-dark: var(--color-accent);
  --lexxy-color-accent-medium: var(--parchment-400);
  --lexxy-color-accent-light: var(--parchment-200, #efe6d5);
  --lexxy-color-accent-lightest: var(--parchment-100, #f5f0e6);
  --lexxy-color-link: var(--color-accent);
}

/* Reset inherited line-height so Lexxy's lh-based sizing works correctly */
lexxy-editor {
  line-height: normal;
}

/* Indent lists so markers (bullets/numbers) don't overlap text */
lexxy-editor ul,
lexxy-editor ol {
  padding-inline-start: 1.5em;
}

/* Lexxy's default max-inline-size: 40ch on the dropdown content is too
   narrow to fit 9/10 color buttons at 2lh each. Likely an upstream bug.
   48ch fits all buttons comfortably. */
.lexxy-editor__toolbar-dropdown-content {
  max-inline-size: 48ch;
}

/* ==========================================================================
   Focus Highlight

   The global *:focus-visible puts a thick outline on the inner contenteditable
   div, which looks wrong (only highlights the text area, not the toolbar).
   Instead, highlight the whole lexxy-editor element on focus-within.
   ========================================================================== */

lexxy-editor:focus-within {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Suppress the global focus-visible outline on the inner contenteditable */
lexxy-editor .lexxy-editor__content:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Use our accent color for focus rings on inputs inside the editor.
   TODO: rgba(193, 147, 80, 0.2) duplicates --color-accent at 20% opacity.
   We lack a design token for semi-transparent accent colors — this pattern
   is repeated across base.css, layout.css, character-sheet.css, etc.
   See variables.css for a future --color-accent-alpha token. */
lexxy-editor input:focus,
lexxy-editor input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(193, 147, 80, 0.2);
}

/* ==========================================================================
   Auto-Save Status Indicator

   Shows save state as a floating indicator in the bottom-right of the editor:
   - Hidden when clean (no pending changes)
   - Animated dots when dirty/saving
   - Static green dots on success, then fades out
   - Static red dots on error
   - Click-through (pointer-events: none) to not interfere with editing
   ========================================================================== */

/* Positioning context for the save indicator */
.has-autosave-indicator {
  position: relative;
}

.autosave-progress-indicator {
  position: absolute;
  bottom: 0.75em;
  right: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base) var(--ease-out),
              visibility var(--transition-base);
}

/* Indicator icon - uses currentColor so we set color property */
.autosave-progress-indicator-icon {
  width: 1.5em;
  height: 1.5em;
  color: var(--grey-500);
  transition: color var(--transition-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
   3-Dot Pulse Animation (based on svg-spinners by n3r4zzurr0)
   Uses transform: scale() for better browser support than animating r attribute
   -------------------------------------------------------------------------- */

@keyframes autosave-dot-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.2);
  }
}

/* Set transform-origin for each dot (cx values from SVG viewBox) */
.autosave-dot-1 {
  transform-origin: 4px 12px;
}

.autosave-dot-2 {
  transform-origin: 12px 12px;
}

.autosave-dot-3 {
  transform-origin: 20px 12px;
}

/* --------------------------------------------------------------------------
   State: Dirty / Saving (animated dots)
   -------------------------------------------------------------------------- */

.autosave-progress-indicator-dirty {
  opacity: 1;
  visibility: visible;
}

.autosave-progress-indicator-dirty .autosave-dot {
  animation: autosave-dot-pulse 0.8s ease-in-out infinite;
}

.autosave-progress-indicator-dirty .autosave-dot-2 {
  animation-delay: -0.53s;
}

.autosave-progress-indicator-dirty .autosave-dot-3 {
  animation-delay: -0.27s;
}

/* --------------------------------------------------------------------------
   State: Success (green dots expand then fade out)
   -------------------------------------------------------------------------- */

@keyframes autosave-dot-success {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.autosave-progress-indicator-success {
  opacity: 1;
  visibility: visible;
}

.autosave-progress-indicator-success .autosave-progress-indicator-icon {
  color: var(--color-success);
}

.autosave-progress-indicator-success .autosave-dot {
  animation: autosave-dot-success 0.6s ease-out forwards;
}

.autosave-progress-indicator-success .autosave-dot-2 {
  animation-delay: 0.05s;
}

.autosave-progress-indicator-success .autosave-dot-3 {
  animation-delay: 0.1s;
}

/* --------------------------------------------------------------------------
   State: Error (red, with tooltip)
   -------------------------------------------------------------------------- */

.autosave-progress-indicator-error {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: help;
}

.autosave-progress-indicator-error .autosave-progress-indicator-icon {
  color: var(--color-error);
  animation: none;
}