/* News admin (#sectionNews, portal/news-admin.js). Decomposition slice 4 out of index.html's
   first inline <style> block (README_BACKLOG.md). */

.admin-form-wide {
  max-width: 900px;
}
.news-editor-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.news-editor-col {
  flex: 1 1 320px;
  min-width: 280px;
}
.news-editor-col textarea#newsBodyInput {
  min-height: 280px;
  font-family: var(--mono, monospace);
}
.news-preview-pane {
  background: var(--paper, #fbf7ec);
  color: var(--ink, #1d1a14);
  border: 1px solid var(--dash-border-strong);
  border-radius: 6px;
  padding: 16px 18px;
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  font-family: var(--kalam, sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
}
.news-preview-pane > * + * {
  margin-top: 0.8em;
}
.news-preview-pane h1,
.news-preview-pane h2,
.news-preview-pane h3 {
  font-family: var(--marker, sans-serif);
  line-height: 1.2;
}
.news-preview-pane img {
  max-width: 100%;
  border-radius: 6px;
}
.news-preview-pane code {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 0 4px;
}
.news-preview-empty {
  color: var(--dash-text-mute);
  font-style: italic;
}
.admin-news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Mirrors .admin-event-item: without this, the title/meta column has no
     wrap partner to yield space to on a narrow (portrait phone) screen and
     gets squeezed into a one-word-per-line sliver under the action buttons. */
  flex-wrap: wrap;
  background: var(--dash-surface);
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid var(--dash-border);
  gap: 10px;
}
.admin-news-item .news-info {
  /* A real flex-basis (not a bare `flex: 1`, i.e. basis 0) so the parent's
     flex-wrap actually drops .admin-news-actions to its own line on a narrow
     screen. With basis 0 the info column instead collapsed to a
     one-word-per-line sliver while the three action buttons stayed beside it
     and overran the text. */
  flex: 1 1 240px;
  min-width: 0;
}
.admin-news-item .news-info strong {
  color: var(--dash-text);
}
.admin-news-item .news-info span {
  color: var(--dash-text-mute);
  font-size: 0.83em;
  margin-left: 8px;
}
.news-status-badge {
  display: inline-block;
  font-family: var(--arch, sans-serif);
  font-size: 0.72em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 8px;
}
.news-status-badge.status-draft {
  background: var(--dash-warn-bg);
  color: var(--dash-warn-text);
}
.news-status-badge.status-published,
.news-status-badge.status-live {
  background: var(--dash-accent-bg);
  color: var(--dash-accent-text);
}
.news-status-badge.status-scheduled {
  background: var(--dash-info-bg);
  color: var(--dash-info-text);
}
.news-status-badge.status-ended {
  background: var(--dash-surface-2);
  color: var(--dash-text-mute);
}
.admin-news-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}