/* Statut d'un article : la pastille qui ouvre le menu, les quatre étapes dans l'ordre, et leur pastille de couleur */
.status-wrap { display: inline-flex; }
.status-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px 0 9px; border: 0; border-radius: 99px;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font: inherit; font-size: var(--fs-meta); font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background var(--medium) var(--ease-out), color var(--medium) var(--ease-out), transform var(--fast) var(--ease);
}
.status-btn svg { opacity: 0.6; transition: transform var(--fast) var(--ease-out), opacity var(--fast); }
.status-btn:hover svg, .status-btn[aria-expanded='true'] svg { opacity: 1; }
.status-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.status-btn:active { transform: scale(0.97); }
.status-btn.is-draft { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.status-btn.is-online { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.status-btn:hover { background: var(--active); color: var(--text); }
.status-btn.is-draft:hover { background: var(--pill-warning-bg); color: var(--pill-warning-ink); filter: brightness(0.97); }
.status-btn.is-online:hover { background: var(--pill-positive-bg); color: var(--pill-positive-ink); filter: brightness(0.97); }
.status-btn.is-busy { cursor: progress; opacity: 0.7; }

/* La pastille : creuse tant que personne n'a relu, pleine ensuite, verte une fois en ligne */
.status-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  transition: background var(--medium) var(--ease-out);
}
.is-review > .status-dot { box-sizing: border-box; background: transparent; border: 1.5px solid currentColor; }
.status-item.is-review .status-dot { color: var(--faint); }
.status-item.is-approved .status-dot { color: var(--text); }
.status-item.is-draft .status-dot { color: var(--star); }
.status-item.is-online .status-dot { color: var(--accent); }

.status-menu { min-width: 320px; gap: 2px; }
.status-menu.menu-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.status-menu.menu-up.menu-end { transform-origin: bottom right; }
.status-item { align-items: flex-start; gap: 10px; min-height: 0; padding: 8px 10px; white-space: normal; }
.status-item .status-dot { margin-top: 6px; }
.status-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.status-text small { color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.status-item[aria-checked='true'] .status-text > span { font-weight: 600; }
.status-item .menu-check { margin-top: 2px; }
.status-item.is-blocked { cursor: not-allowed; }
.status-item.is-blocked:hover { background: transparent; }
.status-item.is-blocked .status-text > span { color: var(--faint); }
.status-item.is-blocked .status-dot { opacity: 0.4; }
.status-link { margin-top: 4px; gap: 6px; background: var(--raised); color: var(--accent-ink); }
.status-link:hover, .status-link:focus-visible { background: var(--active); }

/* Le tampon « En ligne » ouvre le même menu */
.stamp-btn { background: transparent; font: inherit; cursor: pointer; transition: background var(--fast); }
.stamp-btn:hover, .stamp-btn[aria-expanded='true'] { background: var(--accent-soft); }
.dialog-field { margin-top: 16px; }
.dialog-field + .form-error { margin-top: 10px; }

@media (max-width: 640px) {
  .status-menu { min-width: min(320px, calc(100vw - 32px)); }
}
/* Au doigt, la pastille se touche plus large qu'elle ne se voit */
@media (pointer: coarse) {
  .status-btn { position: relative; }
  .status-btn::after { content: ''; position: absolute; inset: -9px -4px; }
}

/* Programmé : entre Validé et En ligne ; une programmation à vérifier passe en rouge (statut). */
.status-btn.is-scheduled { background: var(--accent-soft); color: var(--accent-ink); }
.status-btn.is-scheduled:hover { background: var(--accent-soft); color: var(--accent-ink); filter: brightness(0.97); }
.status-item.is-scheduled .status-dot { box-sizing: border-box; background: transparent; border: 2px solid var(--accent); }
.status-btn.is-late { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.schedule-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin: 4px 0 14px; }
.dialog .choices { margin-bottom: 8px; }