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

:root {
  /* Cell sizes and stroke width for the ruled field. */
  --field-rule: 1px;
  --field-cell: 64px;
  --field-major-cell: 256px;
}

.grid-bg {
  background-color: #f3f4f6;
  background-image:
    linear-gradient(to right, #d1d5dc var(--field-rule), transparent var(--field-rule)),
    linear-gradient(to bottom, #d1d5dc var(--field-rule), transparent var(--field-rule)),
    linear-gradient(to right, #e5e7eb var(--field-rule), transparent var(--field-rule)),
    linear-gradient(to bottom, #e5e7eb var(--field-rule), transparent var(--field-rule));
  background-size:
    var(--field-major-cell) var(--field-major-cell),
    var(--field-major-cell) var(--field-major-cell),
    var(--field-cell) var(--field-cell),
    var(--field-cell) var(--field-cell);
  background-position: max(24px, calc(50% - 616px)) 105px;
}

/* Entrance animation for the home page demo sheet panels */
.demo-pop {
  animation: demo-pop 0.35s ease;
}

@keyframes demo-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* Reduced motion still needs to signal that the panel changed — drop the
   movement, keep a short fade so the state change isn't silent. */
@media (prefers-reduced-motion: reduce) {
  .demo-pop {
    animation: demo-fade 0.15s ease;
  }

  @keyframes demo-fade {
    from {
      opacity: 0;
    }
  }
}