/* 007's publish marks (components/publish.js; the approved Demo's `.stag`) and the opened product's publish section
   (screens/review_publish.js). A tag is a small outlined word, never a filled box that touches the text beside it: it keeps the
   row's inline gap. Every value is a token. */
.stag {
  display: inline-block;
  margin-inline-end: var(--spacing-sm);
  padding-inline: var(--spacing-sm);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  color: var(--app-ink-soft);
  font-size: var(--font-size-badge);
  font-weight: 700;
  line-height: 1.6;
}

.stag.warn {
  border-color: var(--app-note-line);
  color: var(--app-note-ink);
}

.stag.ok {
  border-color: var(--app-btn);
  color: var(--app-btn);
}

/* the section «حالة النشر»: the tags, the run's line, its ways under it, then a refusal; each a gap from the next */
.pubstate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-gap);
  padding: var(--spacing-gap) var(--spacing-window);
}

.pubstate .pubtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.pubstate .stag {
  margin-inline-end: 0;
}

.pubstate .publine {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--app-ink);
}

.pubstate .pubways,
.pubstate .pubsched {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-gap);
}

.pubstate .tw-error {
  margin: 0;
  align-self: stretch;
}
