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

@keyframes portal-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portal-enter {
  animation: portal-enter 360ms ease-out both;
}

.sign-in-action {
  transition: transform 160ms ease, background-color 160ms ease;
}

.sign-in-action:hover {
  transform: translateY(-1px);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--color-primary);
  outline-offset: 2px;
}

turbo-frame {
  transition: opacity 140ms ease;
}

turbo-frame[busy] {
  opacity: 0.58;
}

[data-ticket-row],
[data-draft-id] {
  transition: background-color 140ms ease, border-color 140ms ease;
}

[data-ticket-row]:hover,
[data-draft-id]:hover {
  background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
}

/* Typography for sanitized email HTML and Markdown previews. Preflight
   strips element defaults, so the allowlisted tags get theirs back here. */
.message-html p,
.message-html blockquote,
.message-html pre,
.message-html table,
.message-html ul,
.message-html ol {
  margin-block: 0.75em;
}

.message-html ul {
  list-style: disc;
  padding-inline-start: 1.5em;
}

.message-html ol {
  list-style: decimal;
  padding-inline-start: 1.5em;
}

.message-html h1,
.message-html h2,
.message-html h3,
.message-html h4,
.message-html h5,
.message-html h6 {
  margin-block: 1em 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.message-html h1 { font-size: 1.25em; }
.message-html h2 { font-size: 1.15em; }
.message-html h3 { font-size: 1.05em; }

.message-html a {
  color: var(--color-primary);
  text-decoration: underline;
}

.message-html blockquote {
  border-inline-start: 2px solid var(--fd-line-strong, currentColor);
  padding-inline-start: 1em;
  color: color-mix(in oklab, currentColor 75%, transparent);
}

.message-html pre {
  overflow-x: auto;
  border: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  border-radius: 0.25rem;
  padding: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.message-html code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.message-html table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.message-html td,
.message-html th {
  border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
  padding: 0.35em 0.6em;
  text-align: start;
}

.message-html > :first-child { margin-block-start: 0; }
.message-html > :last-child { margin-block-end: 0; }

@keyframes frame-updated {
  from {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  to {
    background-color: transparent;
  }
}

.frame-updated {
  animation: frame-updated 600ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .portal-enter,
  .frame-updated {
    animation: none;
  }

  .sign-in-action {
    transition: none;
  }

  turbo-frame,
  [data-ticket-row],
  [data-draft-id] {
    transition: none;
  }
}