.news-admin-screen { display: flex; flex-direction: column; gap: 18px; }

.news-admin-screen .na-title-h {
  font-family: var(--font-display); font-weight: 500; margin: 4px 0 0; color: var(--ink);
}
.news-admin-screen .na-role-note { margin: 6px 0 0; font-size: 0.86rem; }
.news-admin-screen .na-gate,
.news-admin-screen .na-empty {
  padding: 40px 16px; text-align: center; color: var(--ink-3);
  background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-l);
}

.news-admin-screen .na-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.news-admin-screen .na-pill-live     { color: var(--laurel-2);  background: color-mix(in srgb, var(--laurel) 16%, transparent);   border-color: color-mix(in srgb, var(--laurel) 40%, transparent); }
.news-admin-screen .na-pill-pending  { color: var(--warn);      background: color-mix(in srgb, var(--warn) 16%, transparent);     border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.news-admin-screen .na-pill-archived { color: var(--ink-3);     background: var(--bg-2);                                          border-color: var(--border); }
.news-admin-screen .na-pill-reviewed { color: var(--lapis-2);   background: color-mix(in srgb, var(--lapis) 16%, transparent);   border-color: color-mix(in srgb, var(--lapis) 40%, transparent); }
.news-admin-screen .na-pinned-flag   { color: var(--bronze-2); }
.news-admin-screen .na-review-none   { font-size: 0.85rem; }
.news-admin-screen .na-solo-note     { margin-top: 5px; font-size: 0.8rem; }
.news-admin-screen .na-edit-meta     { font-size: 0.85rem; margin-top: -6px; }

.news-admin-screen .na-col-title { color: var(--ink); }
.news-admin-screen .na-col-actions { white-space: nowrap; text-align: right; }
.news-admin-screen .na-col-actions .btn { margin-left: 4px; }
.news-admin-screen .na-approve { color: var(--laurel-2); border-color: color-mix(in srgb, var(--laurel) 45%, var(--border)); }

.news-admin-screen .na-form {
  background: transparent; border-radius: var(--radius-l);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 16px;
}
.news-admin-screen .na-form-head h3 { font-family: var(--font-display); font-weight: 500; margin: 0; color: var(--ink); }
.news-admin-screen .na-form-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.news-admin-screen .na-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 160px; }
.news-admin-screen .na-field-wide { flex-basis: 100%; }
.news-admin-screen .na-field-narrow { flex: 0 0 120px; }
.news-admin-screen .na-field label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.news-admin-screen .na-field input,
.news-admin-screen .na-field select,
.news-admin-screen .na-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  padding: 10px 12px;
}
.news-admin-screen .na-form textarea { resize: vertical; line-height: 1.6; font-family: var(--font-sans); }
.news-admin-screen .na-check {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2);
  font-size: 0.9rem; flex: 0 0 auto; padding-bottom: 10px; cursor: pointer;
}
.news-admin-screen .na-field-minutes { flex: 0 0 auto; }
.news-admin-screen .na-check input {
  width: 16px; height: 16px; accent-color: var(--bronze-2); cursor: pointer;
}
/* wrap: the campaign detail carries four buttons and a phone cannot hold them on one line. */
.news-admin-screen .na-form-actions { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .news-admin-screen .na-col-actions { text-align: left; }
  .news-admin-screen .na-field-narrow { flex: 1 1 120px; }
  /* Full-width rows of tap targets rather than four cramped buttons on one line. */
  .news-admin-screen .na-form-actions { justify-content: stretch; }
  .news-admin-screen .na-form-actions > .btn { flex: 1 1 45%; }
}


/* Newsletter admin — reuses .news-admin-screen chrome + .dash-* tiles + .bf-* rail. Topic tiles: 5 in one row, mobile stacks. */
/* Collapse mechanics, and the one-per-row mobile stack, are the UNSCOPED .nl-kpi-* rules in
   components/list-screen.css. */

/* .na-field flex-basis(160px) is a WIDTH in .na-form-row but a HEIGHT as a direct child of the column-flex form — kill it there or fields carry dead space. */
.news-admin-screen .na-form > .na-field { flex: 0 0 auto; }
/* Stacked form: full-width fields; only the minutes input keeps a fixed width. */
.news-admin-screen .na-field-minutes input { width: 120px; }

.news-admin-screen .nl-detail-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--ink-2); font-size: 0.9rem;
}
/* min-width:0 + a break rule: a campaign body is operator-authored, so one long unbroken
   token (a URL) overflowed the flex column and pushed the whole screen sideways. */
.news-admin-screen .nl-detail-body {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 14px 16px; line-height: 1.6; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
}
.news-admin-screen .nl-detail-body p { margin: 0 0 12px; }
.news-admin-screen .nl-detail-body p:last-child { margin-bottom: 0; }
/* Buttons first, note after: the commit pair sits on the form's left edge like every other bar
   (create-form.css), and the footnote follows it rather than owning that corner. */
.news-admin-screen .nl-compose-foot { justify-content: space-between; align-items: center; }
.news-admin-screen .nl-compose-btns { order: 1; }
.news-admin-screen .nl-compose-note { order: 2; text-align: right; }
.news-admin-screen .nl-compose-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.news-admin-screen .nl-compose-note { font-size: 0.82rem; }

/* Tablet and phone: the note stays a footnote UNDER the buttons, and Cancel / Save split the
   full row rather than huddling in a corner. */
@media (max-width: 1024px) {
  .news-admin-screen .nl-compose-foot { flex-wrap: wrap; align-items: stretch; }
  .news-admin-screen .nl-compose-btns  { flex: 1 1 100%; }
  .news-admin-screen .nl-compose-btns .btn { flex: 1 1 0; }
  .news-admin-screen .nl-compose-note  { flex: 1 1 100%; text-align: left; }
}

/* The rail grid is ONE definition in components/list-screen.css (.nl-layout); only the cell placements belong here. */