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

/* SPEC-047-1. The "Preview — not accepted" banner (shared/_preview_banner).
 * Here rather than editorial.css because every layout loads this file, and the
 * admin layout doesn't load editorial.css; so the colours are literal, not
 * var(--warning). No fixed width and no nowrap: it wraps at phone width. */
.preview-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px dashed #c97c2e;
  border-radius: 10px;
  background: #fff6e8;
  color: #5a3b12;
  font: 500 0.86rem/1.4 system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.preview-banner-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.preview-banner-meta {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}