/*
 * AI Regulation Monitor page, public overview (template-reg-monitor.php).
 * Loaded only on that template; every rule is scoped to #aiei-monitor.
 * Sections reuse the theme's own blocks where they exist (.title, .faq +
 * .accordion, .join, .btn) and follow the AI Policy page (css/aiei-policy-page.css):
 * same hero grid and type scale, same navy band with soft glows.
 * Colours are the theme's and the monitor plugin's: #0A2535 ink, #3366FF blue,
 * #EAF0F5 grey, #009688 teal, #CD5C2B orange, #6584A1 slate.
 */

/* The page's Additional CSS paints body.page-id-2051 (and its header) grey
 * for the members' dashboard; the overview is designed on white, so it takes
 * white back only while it is on the page. */
body:has(#aiei-monitor),
body:has(#aiei-monitor) .header {
	background: #fff;
}

#aiei-monitor {
	--rm-ink: #0a2535;
	--rm-blue: #3366ff;
	--rm-on-dark: #c3cfdc;
	--rm-muted-dark: #9fb3c6;
	--rm-line-dark: rgba(255, 255, 255, .09);
	--rm-amber-tint: #fbeed5;
	--rm-amber-ink: #8a5b08;
	--rm-orange-tint: #fae9e1;
	--rm-orange-ink: #8a3312;
	--rm-teal-tint: #e0f0ee;
	--rm-teal-ink: #006d63;
	--rm-ease: cubic-bezier(.16, 1, .3, 1);
}

#aiei-monitor ::selection {
	background: #d5deff;
	color: var(--rm-ink);
}

#aiei-monitor .rm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Hero: same grid and type as the AI Policy hero */

#aiei-monitor .rm-hero {
	padding: 48px 0 72px;
}

#aiei-monitor .rm-hero__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

#aiei-monitor .rm-hero .h1 {
	font-size: 48px;
	line-height: 1.18;
	margin-bottom: 0;
}

#aiei-monitor .rm-hero .h1 .blue {
	display: block;
}

#aiei-monitor .rm-hero__lede {
	margin: 24px 0 0;
	max-width: 500px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--rm-ink);
	text-wrap: pretty;
}

#aiei-monitor .rm-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

#aiei-monitor .rm-hero__btns .btn {
	min-width: 172px;
	margin-top: 0;
	padding: 11.5px 24px;
	border-radius: 8px;
}

/* Dark preview of the members' feed */

#aiei-monitor .rm-window {
	margin: 0;
}

#aiei-monitor .rm-panel {
	overflow: hidden;
	border: 1px solid #1c3d52;
	border-radius: 16px;
	background:
		radial-gradient(420px 260px at 100% 0, rgba(101, 132, 161, .26), transparent 70%),
		var(--rm-ink);
	box-shadow: 0 30px 60px -30px rgba(10, 37, 53, .55), 0 2px 6px rgba(10, 37, 53, .08);
	color: var(--rm-on-dark);
}

#aiei-monitor .rm-panel p {
	margin: 0;
}

#aiei-monitor .rm-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--rm-line-dark);
}

#aiei-monitor .rm-panel .rm-panel__title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

#aiei-monitor .rm-panel__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--rm-muted-dark);
	white-space: nowrap;
}

#aiei-monitor .rm-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2bb5a6;
	box-shadow: 0 0 0 4px rgba(43, 181, 166, .18);
}

#aiei-monitor .rm-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	border-bottom: 1px solid var(--rm-line-dark);
}

#aiei-monitor .rm-metrics div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 2px;
	padding: 14px 22px;
	border-right: 1px solid var(--rm-line-dark);
}

#aiei-monitor .rm-metrics div:last-child {
	border-right: 0;
}

#aiei-monitor .rm-metrics dt {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--rm-muted-dark);
}

#aiei-monitor .rm-metrics dd {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

#aiei-monitor .rm-feed {
	margin: 0;
	padding: 4px 22px 0;
	list-style: none;
}

#aiei-monitor .rm-entry {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--rm-line-dark);
	list-style: none;
}

#aiei-monitor .rm-entry::before {
	content: none;
}

#aiei-monitor .rm-entry:last-child {
	border-bottom: 0;
}

#aiei-monitor .rm-entry__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

#aiei-monitor .rm-tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

#aiei-monitor .rm-tag--new { background: var(--rm-blue); color: #fff; }
#aiei-monitor .rm-tag--upd { background: var(--rm-amber-tint); color: var(--rm-amber-ink); }
#aiei-monitor .rm-tag--jur { background: #fff; color: var(--rm-ink); letter-spacing: .05em; }
#aiei-monitor .rm-tag--type { background: rgba(255, 255, 255, .1); color: var(--rm-on-dark); }

#aiei-monitor .rm-entry__date {
	margin-left: auto;
	font-size: 12px;
	color: var(--rm-muted-dark);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#aiei-monitor .rm-panel .rm-entry__title {
	margin-top: 9px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-wrap: pretty;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* The summary is members-only: two soft bars stand in for it. */
#aiei-monitor .rm-entry__sum {
	display: grid;
	gap: 6px;
	margin-top: 9px;
}

#aiei-monitor .rm-entry__sum i {
	display: block;
	height: 7px;
	border-radius: 99px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
}

#aiei-monitor .rm-entry__sum i + i {
	width: 62%;
}

#aiei-monitor .rm-panel .rm-panel__lock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	background: rgba(255, 255, 255, .04);
	border-top: 1px solid var(--rm-line-dark);
	font-size: 13px;
	font-weight: 600;
	color: var(--rm-on-dark);
}

#aiei-monitor .rm-lock {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: #8fb0ff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The one authored moment: the newest entries arrive in order, as on the dashboard. */
@media (prefers-reduced-motion: no-preference) {
	#aiei-monitor .rm-panel {
		animation: rm-lift .8s var(--rm-ease) both;
	}
	#aiei-monitor .rm-entry {
		animation: rm-rise .7s var(--rm-ease) both;
		animation-delay: calc(.25s + var(--i, 0) * .12s);
	}
}

@keyframes rm-lift {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes rm-rise {
	from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
	to { opacity: 1; transform: none; filter: none; }
}

/* What members see: navy band with the same glows as the AI Policy steps */

#aiei-monitor .rm-inside {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 80px 0 88px;
	background:
		radial-gradient(560px 400px at 10% 6%, rgba(101, 132, 161, .26), transparent 70%),
		radial-gradient(520px 380px at 94% 98%, rgba(101, 132, 161, .22), transparent 70%),
		var(--rm-ink);
}

#aiei-monitor .rm-inside .title {
	margin-bottom: 40px;
}

#aiei-monitor .rm-inside .title .h2 {
	color: #fff;
}

#aiei-monitor .rm-inside .title p {
	max-width: 620px;
	margin: 0 auto;
	color: var(--rm-on-dark);
}

#aiei-monitor .rm-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}

#aiei-monitor .rm-cell {
	position: relative;
	overflow: hidden;
	padding: 28px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--rm-line-dark);
	color: var(--rm-on-dark);
}

#aiei-monitor .rm-cell .h3 {
	margin: 0 0 6px;
	color: #fff;
}

#aiei-monitor .rm-cell p {
	margin: 0;
	max-width: 52ch;
	font-size: 14.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

#aiei-monitor .rm-cell--feed { grid-column: span 7; }
#aiei-monitor .rm-cell--read { grid-column: span 5; }
#aiei-monitor .rm-cell--cal { grid-column: span 7; }
#aiei-monitor .rm-cell--jur { grid-column: span 5; }

#aiei-monitor .rm-cell ul,
#aiei-monitor .rm-cell ol {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

#aiei-monitor .rm-cell li {
	margin: 0;
	list-style: none;
}

#aiei-monitor .rm-cell li::before {
	content: none;
}

/* Flags */
#aiei-monitor .rm-flags {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}

#aiei-monitor .rm-flags li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

#aiei-monitor .rm-flag {
	flex: none;
	min-width: 76px;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

#aiei-monitor .rm-flag--new { background: var(--rm-blue); color: #fff; }
#aiei-monitor .rm-flag--upd { background: var(--rm-amber-tint); color: var(--rm-amber-ink); }
#aiei-monitor .rm-flag--dl { background: var(--rm-orange-tint); color: var(--rm-orange-ink); }
#aiei-monitor .rm-flag--rev { background: var(--rm-teal-tint); color: var(--rm-teal-ink); }

/* Blue cell: the four questions every entry answers */
#aiei-monitor .rm-cell--read {
	background: var(--rm-blue);
	border-color: var(--rm-blue);
	color: #fff;
}

#aiei-monitor .rm-cell--read::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 180px;
	height: 180px;
	border-radius: 180px 0 0 0;
	background: rgba(255, 255, 255, .1);
	pointer-events: none;
}

#aiei-monitor .rm-anatomy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#aiei-monitor .rm-anatomy li {
	padding: 7px 12px;
	border-radius: 8px;
	background: rgba(10, 37, 53, .22);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}

/* Calendar: the next three milestones */
#aiei-monitor .rm-miles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

#aiei-monitor .rm-mile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
}

#aiei-monitor .rm-mile__days {
	align-self: flex-start;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#aiei-monitor .rm-mile__days b {
	font-size: 18px;
	line-height: 1.2;
}

#aiei-monitor .rm-mile__days--soon { background: var(--rm-orange-tint); color: var(--rm-orange-ink); }
#aiei-monitor .rm-mile__days--mid { background: var(--rm-amber-tint); color: var(--rm-amber-ink); }
#aiei-monitor .rm-mile__days--later { background: #eaf0f5; color: #33506a; }

#aiei-monitor .rm-mile__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

#aiei-monitor .rm-mile__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#aiei-monitor .rm-mile__label {
	font-size: 13px;
	line-height: 1.45;
	color: var(--rm-on-dark);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#aiei-monitor .rm-mile__src {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--rm-muted-dark);
}

/* Jurisdiction cell */
#aiei-monitor .rm-cell .rm-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

#aiei-monitor .rm-pick__chip {
	padding: 6px 14px;
	border-radius: 99px;
	border: 1px solid #2c5874;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rm-on-dark);
	cursor: default;
	pointer-events: none;
}

#aiei-monitor .rm-pick__chip.is-on {
	background: #fff;
	border-color: #fff;
	color: var(--rm-ink);
}

/* Locked profile preview: the pressed jurisdiction's name, text for members */
#aiei-monitor .rm-profile {
	margin-top: 16px;
	padding: 14px 16px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
}

#aiei-monitor .rm-cell .rm-profile__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

#aiei-monitor .rm-profile .rm-entry__sum {
	margin-top: 12px;
}

#aiei-monitor .rm-profile .rm-entry__sum i:last-child {
	width: 40%;
}

/* FAQ and join: theme components as they are, plus room for the second button. */

#aiei-monitor .faq .accordion {
	max-width: 970px;
	margin: 0 auto;
	padding: 0;
}

#aiei-monitor .join-navs .btn {
	min-width: 140px;
	padding-left: 24px;
	padding-right: 24px;
}

/* Theme breakpoints */

@media (max-width: 1200px) {
	#aiei-monitor .rm-hero .h1 { font-size: 42px; }
	#aiei-monitor .rm-hero__row { gap: 40px; }
}

@media (max-width: 1023px) {
	#aiei-monitor .rm-hero { padding: 32px 0 64px; }
	#aiei-monitor .rm-hero__row { grid-template-columns: 1fr; gap: 40px; }
	#aiei-monitor .rm-hero .h1 { font-size: 44px; }
	#aiei-monitor .rm-window { max-width: 600px; }
	#aiei-monitor .rm-inside { padding: 64px 0 72px; }
	#aiei-monitor .rm-cell--feed,
	#aiei-monitor .rm-cell--cal { grid-column: span 12; }
	#aiei-monitor .rm-cell--read,
	#aiei-monitor .rm-cell--jur { grid-column: span 6; }
	#aiei-monitor .rm-cell--feed { order: 1; }
	#aiei-monitor .rm-cell--read { order: 2; }
	#aiei-monitor .rm-cell--jur { order: 3; }
	#aiei-monitor .rm-cell--cal { order: 4; }
}

@media (max-width: 743px) {
	#aiei-monitor .rm-hero .h1 { font-size: 32px; }
	#aiei-monitor .rm-hero__lede { font-size: 16px; }
	#aiei-monitor .rm-panel__head,
	#aiei-monitor .rm-feed { padding-left: 16px; padding-right: 16px; }
	#aiei-monitor .rm-metrics div { padding: 12px 14px; }
	#aiei-monitor .rm-metrics dd { font-size: 19px; }
	#aiei-monitor .rm-entry__date { margin-left: 0; width: 100%; }
	#aiei-monitor .rm-cell { padding: 24px 20px; }
	#aiei-monitor .rm-cell--read,
	#aiei-monitor .rm-cell--jur { grid-column: span 12; }
	#aiei-monitor .rm-flags { grid-template-columns: 1fr; }
	#aiei-monitor .rm-miles { grid-template-columns: 1fr; }
	#aiei-monitor .rm-mile { flex-direction: row; align-items: flex-start; }
	#aiei-monitor .rm-mile__days { flex: none; min-width: 68px; justify-content: center; }
}

@media (max-width: 499px) {
	#aiei-monitor .rm-hero__btns .btn { flex: 1 1 100%; max-width: none; }
	#aiei-monitor .rm-metrics dt { font-size: 11px; }
}