/* ============================================================
   RecruitApp.ai — PRODUCT VISUAL SYSTEM (Salesforce pattern)
   Tight rebuilt-UI panel on a gradient backdrop, with a smaller
   overlapping fragment. Contained, layered, depth. Scoped .ra-viz.
   ============================================================ */
	.ra-viz {
		--navy: #03213d;
		--blue: #155fc8;
		--st-app: #1db795;
		--st-pre: #3d8fc4;
		--f: "Plus Jakarta Sans", system-ui, sans-serif;
		--m: "JetBrains Mono", ui-monospace, monospace;
		position: relative;
		width: 100%;
		container-type: inline-size;
	}

	.ra-viz,
	.ra-viz * {
		box-sizing: border-box;
	}

	/* gradient backdrop scene — the colored ground Salesforce uses */
	.ra-scene {
		position: relative;
		padding: 8px 8px 40px;
	}

	/* MAIN panel — tight crop of the pipeline, rebuilt clean */
	.ra-panel {
		position: relative;
		z-index: 2;
		background: #fff;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 1px 0 rgba(20, 35, 63, .04),
			0 40px 70px -28px rgba(8, 22, 55, .45),
			0 16px 34px -20px rgba(8, 22, 55, .35);
	}

	.ra-phead {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 14px 16px;
		border-bottom: 1px solid #eef1f5;
	}

	.ra-phead .dot {
		width: 11px;
		height: 11px;
		border-radius: 50%;
	}

	.ra-phead .r {
		background: #ff5f57
	}

	.ra-phead .y {
		background: #febc2e
	}

	.ra-phead .g {
		background: #28c840
	}

	.ra-phead .ttl {
		margin-left: 6px;
		font: 700 13px/1 var(--f);
		color: var(--navy);
	}

	.ra-phead .badge {
		margin-left: auto;
		font: 700 11px/1 var(--f);
		color: #1f6fd6;
		background: #eaf2fd;
		padding: 6px 11px;
		border-radius: 7px;
	}

	.ra-rows {
		padding: 6px 0;
	}

	.ra-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 13px 18px;
		border-bottom: 1px solid #f3f5f8;
	}

	.ra-row:last-child {
		border-bottom: 0;
	}

	.ra-row .chk {
		width: 16px;
		height: 16px;
		border: 1.5px solid #c2ccd8;
		border-radius: 4px;
	}

	.ra-row .who {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.ra-row .who.grow {
		flex: 1;
	}

	.ra-row .nm {
		font: 600 14px/1.2 var(--f);
		color: var(--navy);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ra-row .pos {
		font: 500 12px/1.2 var(--f);
		color: #6b7a8d;
	}

	.ra-ic {
		display: flex;
		gap: 8px;
		align-items: center;
		flex: none;
		width: 60px;
		justify-content: flex-end;
	}

	.ra-ic .g {
		width: 18px;
		height: 18px;
	}

	.ra-ic .note {
		color: #1aa3c4;
	}

	.ra-ic .ph {
		color: #2f7fd4;
	}

	.ra-ic .ph.red {
		color: #e0533d;
	}

	.ra-row .stage {
		font: 700 12px/1 var(--f);
		color: #fff;
		padding: 7px 13px;
		border-radius: 7px;
		white-space: nowrap;
		flex: none;
		width: 130px;
		text-align: center;
	}

	.ra-row .stage.app {
		background: var(--st-app);
	}

	.ra-row .stage.pre {
		background: var(--st-pre);
	}

	/* FRAGMENT — a smaller real card overlapping bottom-left, layered */
	.ra-frag {
		position: absolute;
		z-index: 3;
		left: 6%;
		bottom: -14px;
		width: 46%;
		min-width: 230px;
		background: #fff;
		border-radius: 13px;
		padding: 15px 16px;
		box-shadow: 0 0 0 1px rgba(20, 35, 63, .05),
			0 30px 60px -18px rgba(8, 22, 55, .5);
	}

	.ra-frag .ft {
		display: flex;
		align-items: center;
		gap: 11px;
	}

	.ra-frag .av {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		flex: none;
		background: var(--navy);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font: 700 14px/1 var(--f);
	}

	.ra-frag .fn {
		font: 700 14px/1.25 var(--f);
		color: var(--navy);
	}

	.ra-frag .fr {
		font: 500 12px/1.2 var(--f);
		color: #6b7a8d;
		margin-top: 1px;
	}

	.ra-frag .bar {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 13px;
		padding-top: 12px;
		border-top: 1px solid #eef2f6;
	}

	.ra-frag .k {
		font: 700 9px/1 var(--m);
		letter-spacing: .13em;
		color: #8595a8;
	}

	.ra-frag .v {
		font: 700 12px/1 var(--f);
		color: #fff;
		background: var(--st-app);
		padding: 6px 11px;
		border-radius: 6px;
		margin-left: auto;
	}

	@container (max-width:480px) {
		.ra-scene {
			padding: 7% 5% 9%;
		}

		.ra-frag {
			position: static;
			width: 100%;
			margin-top: 14px;
			left: 0;
		}
	}

			/* Communicate panel — rebuilt Conversations UI (list + SMS thread).
   Reuses .ra-viz tokens. Scoped under .ra-viz. */
					.ra-viz {
						--c-blue: #1f6fd6;
						--c-msg: #2f6fb0;
					}

					.ra-conv {
						position: relative;
						z-index: 2;
						background: #fff;
						border-radius: 14px;
						overflow: hidden;
						box-shadow: 0 1px 0 rgba(20, 35, 63, .04), 0 40px 70px -28px rgba(8, 22, 55, .4), 0 16px 34px -20px rgba(8, 22, 55, .3);
					}

					/* full-width browser chrome bar — matches Pipeline / Events framing */
					.cv-chrome {
						display: flex;
						align-items: center;
						gap: 9px;
						padding: 13px 16px;
						border-bottom: 1px solid #eef1f5;
					}

					.cv-chrome .dot {
						width: 11px;
						height: 11px;
						border-radius: 50%;
					}

					.cv-chrome .r {
						background: #ff5f57;
					}

					.cv-chrome .y {
						background: #febc2e;
					}

					.cv-chrome .g {
						background: #28c840;
					}

					.cv-chrome .ttl {
						margin-left: 6px;
						font: 700 13px/1 var(--f);
						color: var(--navy);
					}

					/* two-pane body sits below the chrome bar */
					.cv-panes {
						display: grid;
						grid-template-columns: 260px 1fr;
					}

					/* left list */
					.cv-list {
						border-right: 1px solid #eef1f5;
						background: #fbfcfe;
					}

					.cv-list-h {
						display: flex;
						align-items: center;
						gap: 8px;
						padding: 14px 16px;
						border-bottom: 1px solid #eef1f5;
						font: 700 13px/1 var(--f);
						color: var(--navy);
					}

					.cv-item {
						padding: 12px 16px;
						border-bottom: 1px solid #f3f5f8;
						cursor: default;
					}

					.cv-item.active {
						background: #eef5fe;
						box-shadow: inset 3px 0 0 var(--c-blue);
					}

					.cv-row1 {
						display: flex;
						align-items: center;
						gap: 8px;
					}

					.cv-nm {
						font: 700 13px/1.2 var(--f);
						color: var(--navy);
					}

					.cv-unread {
						margin-left: auto;
						min-width: 18px;
						height: 18px;
						padding: 0 5px;
						border-radius: 9px;
						background: #e0533d;
						color: #fff;
						font: 700 10px/18px var(--f);
						text-align: center;
					}

					.cv-time {
						font: 500 11px/1.4 var(--f);
						color: #8595a8;
						margin-top: 3px;
					}

					.cv-tag {
						display: inline-block;
						margin-top: 7px;
						font: 600 10px/1 var(--f);
						color: #5a6b82;
						border: 1px solid #dde4ec;
						border-radius: 5px;
						padding: 4px 7px;
					}

					/* right thread */
					.cv-thread {
						display: flex;
						flex-direction: column;
					}

					.cv-th-h {
						padding: 14px 18px;
						border-bottom: 1px solid #eef1f5;
					}

					.cv-th-name {
						display: flex;
						align-items: center;
						gap: 8px;
						font: 700 16px/1 var(--f);
						color: var(--navy);
					}

					.cv-th-tags {
						display: flex;
						gap: 7px;
						margin-top: 9px;
					}

					.cv-pill {
						font: 600 11px/1 var(--f);
						padding: 5px 9px;
						border-radius: 6px;
					}

					.cv-pill.gray {
						background: #fff;
						border: 1px solid #dde4ec;
						color: #5a6b82;
					}

					.cv-pill.blue {
						background: #eaf2fd;
						color: var(--c-blue);
					}

					.cv-pill.green {
						background: #e3f6ef;
						color: #0f8a66;
					}

					.cv-body {
						padding: 18px;
						display: flex;
						flex-direction: column;
						gap: 7px;
					}

					.cv-msg {
						max-width: 78%;
						padding: 11px 14px;
						border-radius: 13px;
						font: 500 12.5px/1.45 var(--f);
					}

					.cv-msg.out {
						align-self: flex-end;
						background: var(--c-msg);
						color: #fff;
						border-bottom-right-radius: 4px;
					}

					.cv-msg.in {
						align-self: flex-start;
						background: #f0f3f7;
						color: #27313f;
						border-bottom-left-radius: 4px;
					}

					.cv-meta {
						font: 500 10.5px/1 var(--f);
						color: #9aa7b6;
						align-self: flex-end;
					}

					.cv-meta.in {
						align-self: flex-start;
					}

					.cv-email {
						align-self: flex-end;
						display: flex;
						align-items: center;
						gap: 7px;
						font: 500 11px/1 var(--f);
						color: #6b7a8d;
					}

					.cv-email b {
						color: #27313f;
						font-weight: 700;
					}

					.cv-st {
						font: 700 10px/1 var(--f);
						padding: 4px 8px;
						border-radius: 5px;
					}

					.cv-st.sent {
						background: #eef0fb;
						color: #5145c6;
					}

					.cv-st.deliv {
						background: #e3f6ef;
						color: #0f8a66;
					}

					.cv-st.open {
						background: #eaf6fd;
						color: #1f8fd0;
					}

					@container (max-width:620px) {
						.cv-panes {
							grid-template-columns: 1fr;
						}

						.cv-list {
							display: none;
						}
					}

					/* Events panel — rebuilt single-event detail view (header + stat cards
   + scheduled-attendees table), with a single-attendee check-in fragment.
   Reuses .ra-viz tokens. Scoped under .ra-viz. */
					.ra-viz {
						--ev-blue: #2f6fb0;
						--ev-green: #1db795;
						--ev-amber: #b9821f;
						--ev-teal: #1aa3c4;
					}

					.ra-evt {
						position: relative;
						z-index: 2;
						background: #fff;
						border-radius: 14px;
						overflow: hidden;
						box-shadow: 0 1px 0 rgba(20, 35, 63, .04), 0 40px 70px -28px rgba(8, 22, 55, .4), 0 16px 34px -20px rgba(8, 22, 55, .3);
					}

					/* browser chrome row */
					.evt-chrome {
						display: flex;
						align-items: center;
						gap: 9px;
						padding: 13px 18px 0;
					}

					.evt-chrome .dot {
						width: 11px;
						height: 11px;
						border-radius: 50%;
					}

					.evt-chrome .r {
						background: #ff5f57
					}

					.evt-chrome .y {
						background: #febc2e
					}

					.evt-chrome .g {
						background: #28c840
					}

					/* event header */
					.evt-head {
						padding: 11px 18px 14px;
						border-bottom: 1px solid #eef1f5;
					}

					.evt-title {
						font: 800 16px/1.25 var(--f);
						color: var(--navy);
					}

					.evt-when {
						display: flex;
						align-items: center;
						gap: 7px;
						margin-top: 7px;
						font: 700 12px/1 var(--f);
						color: #46566a;
					}

					.evt-when svg {
						width: 14px;
						height: 14px;
						color: var(--ev-blue);
						flex: none;
					}

					.evt-tags {
						display: flex;
						flex-wrap: wrap;
						gap: 7px;
						margin-top: 11px;
					}

					.evt-tag {
						display: inline-flex;
						align-items: center;
						gap: 5px;
						font: 700 10.5px/1 var(--f);
						padding: 6px 9px;
						border-radius: 6px;
						border: 1px solid transparent;
						white-space: nowrap;
					}

					.evt-tag svg {
						width: 11px;
						height: 11px;
						flex: none;
					}

					.evt-tag.loc {
						background: #fdf6e6;
						color: var(--ev-amber);
						border-color: #f2e2b8;
					}

					.evt-tag.type {
						background: #eaf2fd;
						color: var(--ev-blue);
						border-color: #cfe1f6;
					}

					.evt-tag.vis {
						background: #e7f7ef;
						color: #0f8a66;
						border-color: #c4ecd8;
					}

					.evt-tag.cap {
						background: #eef1f5;
						color: #46566a;
						border-color: #dde4ec;
					}

					.evt-tag.pos {
						background: #fff;
						color: #5a6b82;
						border-color: #dde4ec;
					}

					/* stat cards row */
					.evt-stats {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 10px;
						padding: 10px 18px;
					}

					.evt-card {
						position: relative;
						border-radius: 9px;
						padding: 8px 12px;
						border: 1px solid;
						display: flex;
						align-items: baseline;
						justify-content: space-between;
						gap: 8px;
					}

					.evt-card .cl {
						font: 700 11px/1 var(--f);
					}

					.evt-card .cn {
						font: 800 20px/1 var(--f);
						color: var(--navy);
					}

					.evt-card.sched {
						background: #fdf1ec;
						border-color: #f6d8cb;
					}

					.evt-card.sched .cl {
						color: #c2603e;
					}

					.evt-card.att {
						background: #ebf7f0;
						border-color: #c9ecd7;
					}

					.evt-card.att .cl {
						color: #0f8a66;
					}

					.evt-card.miss {
						background: #fcebec;
						border-color: #f4ccd0;
					}

					.evt-card.miss .cl {
						color: #c23b46;
					}

					/* estimate banner */
					.evt-est {
						margin: 0 18px 10px;
						display: flex;
						align-items: center;
						gap: 8px;
						padding: 8px 12px;
						background: #fdf7e3;
						border: 1px solid #f0e2ad;
						border-radius: 8px;
						font: 600 11px/1.35 var(--f);
						color: #6b5a1f;
					}

					.evt-est svg {
						width: 13px;
						height: 13px;
						flex: none;
						color: #b9821f;
					}

					.evt-est b {
						color: #4a3f17;
						font-weight: 800;
					}

					/* attendees table */
					.evt-tbl-h {
						padding: 10px 18px;
						background: #f6f8fb;
						border-top: 1px solid #eef1f5;
						border-bottom: 1px solid #eef1f5;
						font: 800 12.5px/1 var(--f);
						color: var(--navy);
						text-align: center;
					}

					.evt-tbl {
						width: 100%;
						border-collapse: collapse;
						table-layout: fixed;
					}

					.evt-tbl th {
						font: 700 10.5px/1 var(--f);
						color: #5a6b82;
						text-align: left;
						padding: 9px 18px;
						background: #fbfcfe;
						border-bottom: 1px solid #eef1f5;
						white-space: nowrap;
					}

					.evt-tbl td {
						padding: 9px 18px;
						border-bottom: 1px solid #f3f5f8;
						font: 600 12.5px/1.2 var(--f);
						color: var(--navy);
						white-space: nowrap;
					}

					.evt-tbl tr:last-child td {
						border-bottom: 0;
					}

					/* fixed column widths so nothing shifts row-to-row */
					.evt-tbl col.c-name {
						width: 34%;
					}

					.evt-tbl col.c-pos {
						width: 18%;
					}

					.evt-tbl col.c-status {
						width: 15%;
					}

					.evt-tbl col.c-stage {
						width: 14%;
					}

					.evt-tbl col.c-phone {
						width: 19%;
					}

					/* name cell: checkbox + name, then a fixed-width icon group pinned to the
   right of the cell — identical position on every row (Pipeline rule §6) */
					.evt-name {
						display: flex;
						align-items: center;
						gap: 9px;
					}

					.evt-name .chk {
						width: 15px;
						height: 15px;
						flex: none;
						border: 1.5px solid #c2ccd8;
						border-radius: 4px;
					}

					.evt-name .nm {
						overflow: hidden;
						text-overflow: ellipsis;
						min-width: 0;
					}

					.evt-name .ic {
						margin-left: auto;
						flex: none;
						display: flex;
						gap: 7px;
						width: 40px;
						justify-content: flex-end;
					}

					.evt-name .ic svg {
						width: 15px;
						height: 15px;
					}

					.evt-name .ic .mail {
						color: var(--ev-teal);
					}

					.evt-name .ic .ph {
						color: #2f7fd4;
					}

					.evt-name .ic .ph.red {
						color: #e0533d;
					}

					.evt-pill {
						font: 700 10.5px/1 var(--f);
						padding: 6px 9px;
						border-radius: 6px;
						display: inline-block;
						white-space: nowrap;
					}

					.evt-pill.scheduled {
						background: #fdf1ec;
						color: #c2603e;
					}

					.evt-pill.nostage {
						background: #e9edf2;
						color: #5a6b82;
					}

					.evt-pill.confirmed {
						background: #e7f7ef;
						color: #0f8a66;
					}

					.evt-pill.noanswer {
						background: #fcebec;
						color: #c23b46;
					}

					.evt-pill.voicemail {
						background: #fdf3da;
						color: #9a7314;
					}

					.evt-pill.notcalled {
						background: #fcebec;
						color: #c23b46;
					}

					.evt-pill.callback {
						background: #f1e9fb;
						color: #7b4fc0;
					}

					@container (max-width:560px) {
						.evt-stats {
							grid-template-columns: 1fr;
						}

						.ra-frag {
							position: static !important;
							width: 100% !important;
							margin-top: 14px;
							left: 0 !important;
							right: auto !important;
						}

						.evt-hide-sm {
							display: none;
						}
					}

					/* ============================================================
   RecruitApp.ai — PRODUCT VISUAL SYSTEM base tokens (.ra-viz)
   Required by all product panels (pipeline/communicate/events/reports).
   ============================================================ */
.ra-viz {
	--navy: #03213d;
	--blue: #155fc8;
	--st-app: #1db795;
	--st-pre: #3d8fc4;
	--f: "Plus Jakarta Sans", system-ui, sans-serif;
	--m: "JetBrains Mono", ui-monospace, monospace;
	position: relative;
	width: 100%;
	container-type: inline-size;
}

.ra-viz,
.ra-viz * {
	box-sizing: border-box;
}

.ra-scene {
	position: relative;
	padding: 8px 8px 40px;
}

/* FRAGMENT — small overlapping card (shared) */
.ra-frag {
	position: absolute;
	z-index: 3;
	left: 6%;
	bottom: -14px;
	width: 46%;
	min-width: 230px;
	background: #fff;
	border-radius: 13px;
	padding: 15px 16px;
	box-shadow: 0 0 0 1px rgba(20, 35, 63, .05),
		0 30px 60px -18px rgba(8, 22, 55, .5);
}

.ra-frag .ft {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ra-frag .av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	background: var(--navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 14px/1 var(--f);
}

.ra-frag .fn {
	font: 700 14px/1.25 var(--f);
	color: var(--navy);
}

.ra-frag .fr {
	font: 500 12px/1.2 var(--f);
	color: #6b7a8d;
	margin-top: 1px;
}

.ra-frag .bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid #eef2f6;
}

.ra-frag .k {
	font: 700 9px/1 var(--m);
	letter-spacing: .13em;
	color: #8595a8;
}

.ra-frag .v {
	font: 700 12px/1 var(--f);
	color: #fff;
	background: var(--st-app);
	padding: 6px 11px;
	border-radius: 6px;
	margin-left: auto;
}

/* ============================================================
   REPORTS PANEL — Analytics UI (line chart + bar chart + donut)
   ============================================================ */
.ra-viz {
	--rp-line: #155fc8;
	--rp-bar: #1db795;
	--rp-bar2: #3d8fc4;
	--rp-grid: #eef1f5;
}

.ra-rep {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(20, 35, 63, .04), 0 40px 70px -28px rgba(8, 22, 55, .4), 0 16px 34px -20px rgba(8, 22, 55, .3);
}

.rp-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--rp-grid);
}

.rp-head .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.rp-head .r {
	background: #ff5f57
}

.rp-head .y {
	background: #febc2e
}

.rp-head .g {
	background: #28c840
}

.rp-head .ttl {
	margin-left: 6px;
	font: 700 13px/1 var(--f);
	color: var(--navy);
}

.rp-head .range {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 7px;
	font: 700 11px/1 var(--f);
	color: #1f6fd6;
	background: #eaf2fd;
	padding: 7px 11px;
	border-radius: 7px;
}

.rp-head .range svg {
	width: 13px;
	height: 13px;
}

.rp-charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.rp-chart {
	padding: 18px 20px 22px;
}

.rp-chart+.rp-chart {
	border-left: 1px solid var(--rp-grid);
}

.rp-ch-h {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 10px;
}

.rp-ch-t {
	font: 700 13px/1 var(--f);
	color: var(--navy);
}

.rp-ch-sub {
	font: 600 11px/1 var(--f);
	color: #8595a8;
}

.rp-svg {
	display: block;
	width: 100%;
	height: auto;
}

.rp-legend {
	display: flex;
	gap: 16px;
	margin-top: 11px;
}

.rp-legend span {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 600 11px/1 var(--f);
	color: #5a6b82;
}

.rp-legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

.rp-donut {
	display: flex;
	align-items: center;
	gap: 13px;
}

.rp-donut .ring {
	width: 62px;
	height: 62px;
	flex: none;
}

.rp-donut .ring circle {
	fill: none;
	stroke-width: 14;
	transform-origin: 50% 50%;
}

.rp-donut .ring .ctr {
	font: 800 13px/1 var(--f);
	fill: var(--navy);
}

.rp-donut .keys {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rp-donut .key {
	display: flex;
	align-items: center;
	gap: 7px;
	font: 600 10.5px/1 var(--f);
	color: #5a6b82;
	white-space: nowrap;
}

.rp-donut .key i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

.rp-donut .key b {
	color: var(--navy);
	font-weight: 800;
	margin-left: auto;
	padding-left: 8px;
}

@container (max-width:560px) {
	.rp-charts {
		grid-template-columns: 1fr;
	}

	.rp-chart+.rp-chart {
		border-left: 0;
		border-top: 1px solid var(--rp-grid);
	}

	.ra-frag {
		position: static !important;
		width: 100% !important;
		margin-top: 14px;
		left: 0 !important;
		right: auto !important;
	}
}

@media (max-width:768px){

  /* Stack panel text above the viz */
  .panel-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:24px;
  }
  .panel-content{
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
  }
  .ra-viz{
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
  }

 /* Events table: hide columns to fit on phone */
  .evt-tbl col.c-pos,
  .evt-tbl th:nth-child(2),
  .evt-tbl td:nth-child(2),
  .evt-tbl col.c-stage,
  .evt-hide-sm{
    display:none;
  }
  .evt-tbl th,
  .evt-tbl td{
    padding:9px 10px;
    font-size:11px;
  }
  .ra-evt{
    overflow-x:hidden;
  }

  /* Fragment cards go full-width below */
  .ra-frag{
    position:static !important;
    width:100% !important;
    margin-top:14px;
    left:0 !important;
    right:auto !important;
    min-width:0 !important;
  }

  /* Conversations: hide sidebar, show thread only */
  .cv-panes{
    grid-template-columns:1fr;
  }
  .cv-list{
    display:none;
  }

  /* Reports: stack charts vertically */
  .rp-charts{
    grid-template-columns:1fr;
  }
  .rp-chart + .rp-chart{
    border-left:0;
    border-top:1px solid #eef1f5;
  }

  /* Integrations cards */
  .integrations-featured{
    flex-direction:column !important;
    gap:20px;
  }
  .integration-card{
    width:100% !important;
  }
  .integration-card-head{
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px;
  }
  .integration-logo-pair{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
  }
  .integration-logo-pair .int_logo{
    max-width:100px;
    height:auto;
  }
  .integration-kind{
    font-size:12px;
  }

  /* Rest-of-stack chips */
  .integrations-rest-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px;
  }

}