/* ============================================================
   Announcement banner (Task Manager ticket #20)
   Written at Admin > Announcement banner; markup comes from
   api/functions/fx-announcement-banner.php. Loaded by the sign-in
   page, by layouts.php when the portal banner is on, and by the
   editor for its preview.
   ============================================================ */

/* ---------- Sign-in page ----------
   The block itself is the .ap-login-notice in active-pharm-auth.css,
   unchanged. These rules only cover messages shaped differently from
   the original welcome text: bullets, a list straight under the
   title, more than one footer paragraph, a list after a footer. */
.ap-login-notice__bullets {
	margin: 0;
	padding-left: 1.2rem;
	list-style: disc;
	font-size: 0.84rem;
	line-height: 1.45;
}
.ap-login-notice__bullets li + li { margin-top: 0.3rem; }
.ap-login-notice__title + .ap-login-notice__steps,
.ap-login-notice__title + .ap-login-notice__bullets { margin-top: 0.65rem; }
.ap-login-notice__steps + .ap-login-notice__steps,
.ap-login-notice__steps + .ap-login-notice__bullets,
.ap-login-notice__bullets + .ap-login-notice__steps,
.ap-login-notice__bullets + .ap-login-notice__bullets,
.ap-login-notice__foot + .ap-login-notice__steps,
.ap-login-notice__foot + .ap-login-notice__bullets { margin-top: 0.6rem; }
.ap-login-notice__foot + .ap-login-notice__foot {
	margin-top: 0.4rem;
	padding-top: 0;
	border-top: 0;
}

/* ---------- Clinic portal ----------
   Content layer (docs/LIQUID-GLASS-DESIGN-SYSTEM.md): an opaque card
   on a hairline at the top of the page content, not glass. Printed
   hidden by layouts.php; its script moves it into place, then shows it. */
.ap-portal-banner[hidden] { display: none !important; }
.ap-portal-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px 10px 14px 16px;
	background: var(--ui-card);
	border: 1px solid var(--ui-sep-strong);
	border-radius: var(--ui-r-card);
	box-shadow: var(--ui-elev-1);
	color: var(--ui-label-1);
	text-align: left;
}
.ap-portal-banner__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ui-r-pill);
	background: var(--ui-brand-tint-strong);
	color: var(--ui-brand-ink);
	font-size: 16px;
}
.ap-portal-banner__content {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 5px;
}
.ap-portal-banner__title {
	margin: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--ui-label-1);
}
.ap-portal-banner__body {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ui-label-2);
	overflow-wrap: anywhere;
}
.ap-portal-banner__body p,
.ap-portal-banner__body ol,
.ap-portal-banner__body ul { margin: 6px 0 0; }
.ap-portal-banner__body > :first-child { margin-top: 0; }
.ap-portal-banner__title + .ap-portal-banner__body { margin-top: 4px; }
.ap-portal-banner__body ol,
.ap-portal-banner__body ul { padding-left: 20px; }
.ap-portal-banner__body ol { list-style: decimal; }
.ap-portal-banner__body ul { list-style: disc; }
.ap-portal-banner__body li + li { margin-top: 2px; }
.ap-portal-banner__body strong { font-weight: 600; color: var(--ui-label-1); }
.ap-portal-banner__body a,
.ap-portal-banner__body a:visited {
	color: var(--ui-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.ap-portal-banner__body a:hover { text-decoration-thickness: 2px; }
.ap-portal-banner__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -2px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--ui-r-pill);
	background: transparent;
	color: var(--ui-label-3);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}
.ap-portal-banner__close:hover { background: var(--ui-fill-hover); color: var(--ui-label-1); }
.ap-portal-banner__body a:focus-visible,
.ap-portal-banner__close:focus-visible {
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
.ap-portal-banner__body a:focus-visible { border-radius: 2px; }

/* Phones: a little tighter, and a 44px close target (HIG minimum). */
@media (max-width: 575.98px) {
	.ap-portal-banner { gap: 10px; padding: 12px 6px 12px 12px; margin-bottom: 12px; }
	.ap-portal-banner__icon { width: 28px; height: 28px; font-size: 14px; }
	.ap-portal-banner__content { padding-top: 3px; }
	.ap-portal-banner__close { width: 44px; height: 44px; margin: -8px -2px -8px 0; }
}