/*
 * #331 - The public profile reminder on the home page.
 *
 * Its own file rather than a block in styles.css, for the same reason its
 * script is its own file: the home page is edited by a lot of tickets at once.
 * It reads as one of the page's own .box panels, with a coral left edge to
 * separate it from the lists without shouting.
 */

.profile-reminder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-left: 4px solid coral;
}

.profile-reminder-text {
	flex: 1 1 320px;
	min-width: 0;
	line-height: 1.45;
	text-align: left;
}

.profile-reminder-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.profile-reminder-cta {
	font-weight: bold;
	white-space: nowrap;
}

/* "Not now" is a button for keyboard and screen-reader users, but it should
   read as the quiet option beside the call to action. */
.profile-reminder-dismiss {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.9em;
	font-weight: normal;
	color: #666;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

.profile-reminder-dismiss:hover {
	color: #333;
}

@media (max-width: 600px) {
	.profile-reminder {
		align-items: flex-start;
	}

	.profile-reminder-actions {
		width: 100%;
		justify-content: space-between;
	}
}