/* WindspeedSEO public website — preview-only styling.
   ---------------------------------------------------------------------------
   Linked and published ONLY by a preview build. Every rule here styles markup that a
   production artifact does not contain: the preview banner, the draft callouts, and the
   marker rendered where a legal value is still unfilled.

   It is a separate file for a launch-safety reason, not a stylistic one. The production
   artifact scan covers CSS as well as HTML, and `callout--draft` is one of the structural
   markers it refuses. Keeping these rules in the shared stylesheet would have meant either
   shipping a preview marker in the production CSS or exempting the stylesheet from the
   scan. Splitting them means production ships neither the markup nor the rules for it. */

.preview-banner {
  background: var(--ws-warning-bg);
  border-bottom: 1px solid var(--ws-warning-border);
  color: var(--ws-warning-fg);
  font-size: var(--ws-type-bodySmall-size);
  line-height: var(--ws-type-bodySmall-lh);
}
.preview-banner__inner { padding-block: var(--ws-spacing-2); }

.callout--draft { border-color: var(--ws-pending-border); background: var(--ws-pending-bg); }
.callout--draft .callout__title { color: var(--ws-pending-fg); }

.pending-value {
  display: inline-block;
  padding: 0 var(--ws-spacing-2);
  border: 1px dashed var(--ws-pending-border);
  border-radius: var(--ws-radius-sm);
  background: var(--ws-pending-bg);
  color: var(--ws-pending-fg);
  font-size: var(--ws-type-caption-size);
  font-weight: var(--ws-weight-semibold);
}