/* CMS & portals hero window: an announcement block is written, reviewed, approved and published, and the portal
   preview swaps to it. Shell and tokens (.app, .app__bar, .status, .mod, .post__icon) come from /style.css. */
.cms .app__main { gap: 10px; }
.cms .status--draft { color: var(--muted-fg-2); background: var(--muted); border-color: var(--line); }
.cms-crumb { display: inline-flex; align-items: center; gap: 4px; }
.cms-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cms-card__head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.cms-card__head b { font-weight: 600; white-space: nowrap; }
.cms-card__head span { margin-left: auto; color: var(--muted-fg); font-size: 12px; white-space: nowrap; }

/* Editor: two fields, typed; the field being typed gets a focus border and a caret */
.cms-fields { display: grid; gap: 5px; padding: 8px 12px; }
.cms-field { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 8px; }
.cms-field small { padding-top: 5px; color: var(--muted-fg); font-size: 12px; }
.cms-field span { min-height: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; line-height: 18px; }
.cms-field:first-child span { font-weight: 600; }
.cms-field.is-on span { border-color: #a1a1aa; }
.cms-field.is-on span::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--fg); }

/* Review: one row per role, pending, working, done */
.cms-appr { border-top: 1px solid var(--line); }
.cms-appr li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 30px; padding: 0 12px; }
.cms-appr li + li { border-top: 1px solid var(--line); }
.cms-role { min-width: 64px; height: 20px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center; white-space: nowrap; }
.cms-appr .act { color: var(--muted-fg-2); white-space: nowrap; }
.cms-appr li:not(.is-done):not(.is-busy) .act { color: var(--muted-fg); }
.cms-appr time { color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Portal preview: the old and new announcement share one cell so they cross-fade */
.cms-view { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; padding: 8px 12px; }
.cms-swap { display: grid; }
.cms-post { grid-area: 1 / 1; display: grid; align-content: start; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--muted); }
.cms-post small { display: flex; align-items: center; gap: 6px; color: var(--muted-fg-2); font-size: 11.5px; font-weight: 500; }
.cms-post b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.cms-post span { color: var(--muted-fg-2); font-size: 12px; }
.cms-post--old { opacity: 0; } /* the finished state shows the new post; hero.js fades from the old one */
.cms-new { padding: 0 6px; border-radius: 4px; background: var(--coral); color: var(--fg); font-size: 11px; font-style: normal; font-weight: 600; line-height: 16px; }
.cms-quick { display: grid; align-content: start; gap: 3px; }
.cms-quick li { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-fg-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.cms-quick svg { flex: none; width: 13px; height: 13px; }

@media (max-width: 600px) {
  .cms-appr .post__icon { grid-area: auto; } /* style.css names this area for the home console's rows */
  .cms-view { grid-template-columns: minmax(0, 1fr); }
  .cms-quick { display: none; }
}
@media (max-width: 400px) {
  .cms-crumb, .cms-card__head span, .cms-appr time, .cms-field small { display: none; }
  .cms-field { grid-template-columns: minmax(0, 1fr); }
  .cms .foot__state { white-space: normal; } /* wrap rather than cut the status line */
}