/* page-actions — bottom-of-page "I read this" + feedback (templates/components/page-actions.php)
   Markup shape:
     div.page-actions         (a plain block; the page wraps it in a page-section)
       .mark-complete-button   (button; when done: p.completed + Undo button)
       form.feedback-form      (hidden until marked read; input-field textarea, footer.actions)
*/

.page-actions {

	.mark-complete-button {
		display: flex;
		align-items: center;
		gap: 1em;

		flex-wrap: wrap;

		.completed {
			display: flex;
			gap: 0.5em;
			margin: 0;
		}

		.toggle-error {
			flex-basis: 100%;
			margin: 0;

			&[hidden] {
				display: none;
			}
		}
	}

	.feedback-form {
		display: grid;
		gap: 1em;
		margin-top: 1.5em;
		max-width: 36rem;

		&[hidden] {
			display: none;
		}
	}

	.actions {
		display: flex;
		align-items: center;
		gap: 1em;
	}
}