/* "Next steps" popup (public/js/admin/next-steps.js): a light card in the bottom corner of a document page; never a backdrop, never in the way of the page's own bar. */
.ns-host { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 27; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.ns-host > * { pointer-events: auto; }
.ns-card { inline-size: min(340px, calc(100vw - 32px)); max-block-size: min(60vh, 460px); display: flex; flex-direction: column; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.ns-card.ns-new { animation: ns-in .16s ease-out; }
@keyframes ns-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ns-head { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 14px 6px; min-block-size: 44px; }
.ns-head > .ico { color: var(--accent-solid); }
.ns-count { font-size: 12.5px; white-space: nowrap; }
.ns-fold { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.ns-fold:hover, .ns-fold:focus-visible { background: var(--panel-3); color: var(--ink); }
.ns-bar { display: block; block-size: 3px; background: var(--line-2); }
.ns-bar > span { display: block; block-size: 100%; background: var(--ok); }
.ns-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; }
.ns-step { display: flex; align-items: flex-start; gap: 10px; padding: 7px 14px; line-height: 1.4; }
.ns-mark { flex: 0 0 auto; inline-size: 22px; block-size: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.ns-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ns-text small { font-size: 12px; line-height: 1.35; }
.ns-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.ns-link:hover > span { text-decoration: underline; }
.ns-step.is-done .ns-mark { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-ink); }
.ns-step.is-done .ns-text { color: var(--muted); }
.ns-step.is-current { background: var(--accent-soft); }
.ns-step.is-current .ns-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.ns-step.is-current .ns-link { color: var(--accent-d); font-weight: 650; }
.ns-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ns-chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ns-chip > .ico { color: var(--accent-solid); }
.ns-chip-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.ns-chip .ns-bar { position: absolute; inset-inline: 0; bottom: 0; }
.ns-chip:hover { border-color: var(--accent); }
/* phone: above the bottom bar and the document's own action bar (measured), the full width of the screen */
@media (max-width: 720px) {
  .ns-host { inset-inline: 8px; bottom: var(--ns-bottom, calc(72px + env(safe-area-inset-bottom, 0px))); }   /* --ns-bottom: next-steps.js lift() */
  .ns-card { inline-size: 100%; max-block-size: 45vh; max-block-size: 45dvh; }
}
@media print { .ns-host { display: none; } }
@media (prefers-reduced-motion: reduce) { .ns-card.ns-new { animation-duration: .01s; } }