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

body {
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

@keyframes progress {
  0%   { width: 0% }
  60%  { width: 75% }
  90%  { width: 90% }
  100% { width: 95% }
}

/* Chevron rotation for native <details> disclosure elements.
   Applied to .details-chevron SVGs sitting inside a <details> element.
   Uses the CSS sibling/descendant relationship: when <details> has the
   [open] attribute, the summary's sibling container finds the SVG. */
details[open] .details-chevron {
  transform: rotate(180deg);
}