/* ============================================================================================================================
	rm-notify.css - the site's notifications (assets/js/ui/rm-notify.js, Step 3a, 5 Oct 2026; toastr 2.1.4 before). The look the site
	gave toastr: square-ish coloured boxes with white text, no shadow, full width at the bottom of the window. Success and info in
	the accent colour (the company theme colour, by default our orange; owner, 5 Oct 2026 - success was green), warning amber,
	error red.
	ONE place for every type (owner, 18 Oct 2026: "always at the bottom of the screen, even if they are red errors. Never in the
	middle or at the top."): the bottom of the window on every page and at every size, also over an open dialog (the top layer).
	The top-right / top-left / top / centre positions and the move to the top edge over a dialog's footer (J-10) are gone.
	Colours from the brand tokens (assets/tokens/rm-brand-tokens.css).
============================================================================================================================ */

.rm-notify {
	--rm-notify-success: var(--rm-accent);			/* owner, 5 Oct 2026: success and info in our orange (the accent), not green */
	--rm-notify-info: var(--rm-accent);
	--rm-notify-warning: var(--rm-toast-warning);
	--rm-notify-error: var(--rm-toast-error);
	--rm-notify-text: var(--rm-white);
	--rm-notify-radius: 3px;

	position: fixed;
	z-index: var(--rm-z-notify);
	pointer-events: none;
	/* a popover (top layer): none of the browser's popover box */
	inset: auto;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	background: transparent;
	color: inherit;
	/* the one place (18 Oct 2026): the bottom edge of the window, full width (after the popover reset above, which sets inset: auto) */
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}
.rm-notify * { box-sizing: border-box; }

.rm-notify__item {
	position: relative;
	pointer-events: auto;
	overflow: hidden;
	margin: 0 0 6px;
	padding: var(--rm-space-4) 25px;
	width: 300px;
	border-radius: var(--rm-notify-radius);
	color: var(--rm-notify-text);
	font-family: var(--rm-font-family);
	font-size: 13px;
	overflow-wrap: break-word;
	background-color: var(--rm-notify-info);
}
.rm-notify__item:hover { cursor: pointer; }
.rm-notify__item--success { background-color: var(--rm-notify-success); }
.rm-notify__item--info { background-color: var(--rm-notify-info); }
.rm-notify__item--warning { --rm-notify-text: var(--rm-darker); background-color: var(--rm-notify-warning); }		/* (dark text on the amber: 8:1, white was 2.3:1) */
.rm-notify__item--error { background-color: var(--rm-notify-error); }
/* over an open dialog's footer: the clicks/taps go through to its buttons (rm-notify.js avoidFooters, J-10; 18 Oct 2026) */
.rm-notify__item--passthrough { pointer-events: none; }

/* full width at every size (two classes: above the narrow widths of the media queries below) */
.rm-notify .rm-notify__item { width: 96%; margin-left: auto; margin-right: auto; }

.rm-notify__message a,
.rm-notify__message label { color: var(--rm-notify-text); }
.rm-notify__message a:hover { color: var(--rm-light); text-decoration: none; }

.rm-notify__close {
	position: relative;
	right: -0.3em;
	top: -0.3em;
	float: right;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: var(--rm-notify-text);
	text-shadow: 0 1px 0 var(--rm-white);
	opacity: 0.8;
	cursor: pointer;
}
.rm-notify__close:hover { color: var(--rm-black); opacity: 0.4; }
/* (keyboard focus: the glyph at full strength with a ring - the faded hover look made it harder to see) */
.rm-notify__close:focus-visible { color: var(--rm-notify-text); opacity: 1; border-radius: var(--rm-radius-sm); box-shadow: 0 0 0 2px var(--rm-notify-text); }
.rm-notify__item--warning .rm-notify__close { text-shadow: none; }

/* the live regions for screen readers (rm-notify.js announce()): read, not shown */
.rm-notify__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 240px) {
	.rm-notify__item { padding: var(--rm-space-2) var(--rm-space-3); width: 11em; }
	.rm-notify__close { right: -0.2em; top: -0.2em; }
}
@media (min-width: 241px) and (max-width: 480px) {
	.rm-notify__item { padding: var(--rm-space-2) var(--rm-space-3); width: 18em; }
	.rm-notify__close { right: -0.2em; top: -0.2em; }
}
@media (min-width: 481px) and (max-width: 768px) {
	.rm-notify__item { padding: var(--rm-space-3) var(--rm-space-4); width: 25em; }
}