/**
 * Frontend styles for appomni/comparison-table.
 *
 * Tuned to the Figma comp: clean white surface, soft pastel state circles,
 * generous row height, subtle outer shadow.
 */

.appomni-ct {
	/* Surface */
	--ct-bg: #ffffff;
	--ct-border: #e8ebf0;
	--ct-text: #0f172a;
	--ct-text-secondary: #475467;
	--ct-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 8px 24px rgba(15, 23, 42, 0.06);

	/* States — soft pastel circle bg + saturated icon stroke */
	--ct-full-bg: #d6f3e2;
	--ct-full-fg: #1ea75a;

	--ct-limited-bg: #fde6cf;
	--ct-limited-fg: #e08735;

	--ct-none-bg: #fbd9d9;
	--ct-none-fg: #d94545;

	/* Highlight column (opt-in, off by default to match Figma) */
	--ct-highlight-bg: rgba(41, 83, 250, 0.04);
	--ct-highlight-border: #2953fa;

	/* Layout */
	--ct-radius: 20px;
	--ct-row-height: 80px;
	--ct-cell-padding-y: 1.5rem;
	--ct-cell-padding-x: 1.5rem;

	color: #0f172a;

	color: var(--ct-text);
	margin-top: 2rem;
	margin-bottom: 2rem;
	/* Constrain to parent width so the inner scroll container handles overflow,
	   not the page. Without this, the table's min-width can push the page wider. */
	max-width: 100%;
}

.appomni-ct__heading {
	font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	margin: 0 0 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ct-text);
}

/* ---- Legend ---- */

.appomni-ct__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	align-items: center;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 2rem auto;
	padding: 0.5rem 1.25rem;
	list-style: none;
	background: var(--ct-bg);
	border-radius: 999px;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 4px 12px rgba(15, 23, 42, 0.04);
	border: 1px solid var(--ct-border);
}

.appomni-ct__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1.4;
}

.appomni-ct__legend-item .appomni-ct__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.appomni-ct__legend-label {
	font-weight: 600;
}

.appomni-ct__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: var(--ct-radius);
	background: var(--ct-bg);
	box-shadow: var(--ct-shadow);
	border: 1px solid var(--ct-border);
	-webkit-overflow-scrolling: touch;
	/* Establish a positioning context so sticky descendants don't escape this container */
	position: relative;
	/* Force the container to contain its own layout, paint, and size */
	contain: paint;
	/* Hard guarantee the wrapper never grows beyond its parent */
	max-width: 100%;
}

.appomni-ct__table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.9375rem;
}

/* Header row */

.appomni-ct__th {
	padding: 1.25rem var(--ct-cell-padding-x);
	text-align: center;
	vertical-align: middle;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--ct-text);
	background: var(--ct-bg);
	border-bottom: 1px solid var(--ct-border);
	letter-spacing: normal;
	text-transform: none;
}

.appomni-ct__th--cap {
	text-align: left;
	min-width: 14rem;
	width: 22%;
	/* Sticky so it stays visible during horizontal scroll on narrow viewports */
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ct-bg);
}

/* Company columns share remaining width equally via table-layout: fixed on the table */

/* Body cells */

.appomni-ct__td {
	padding: var(--ct-cell-padding-y) var(--ct-cell-padding-x);
	text-align: center;
	vertical-align: middle;
	height: var(--ct-row-height);
	background: var(--ct-bg);
	border-bottom: 1px solid var(--ct-border);
}

.appomni-ct__td--cap {
	text-align: left;
	font-weight: 500;
	color: var(--ct-text);
	font-size: 0.9375rem;
	line-height: 1.4;
	/* Sticky so the capability label stays visible during horizontal scroll */
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--ct-bg);
}

.appomni-ct__row:last-child .appomni-ct__td {
	border-bottom: 0;
}

/* Logos and company names in headers */

.appomni-ct__logo {
	max-height: 28px;
	max-width: 140px;
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.appomni-ct__company-name {
	font-weight: 600;
	color: var(--ct-text);
	font-size: 0.9375rem;
}

/* ---- State icons (the circles) ---- */

.appomni-ct__icon {
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.is-state-full .appomni-ct__icon {
	color: var(--ct-full-fg);
}

.is-state-full .appomni-ct__icon-bg {
	fill: var(--ct-full-bg);
}

.is-state-limited .appomni-ct__icon {
	color: var(--ct-limited-fg);
}

.is-state-limited .appomni-ct__icon-bg {
	fill: var(--ct-limited-bg);
}

.is-state-none .appomni-ct__icon {
	color: var(--ct-none-fg);
}

.is-state-none .appomni-ct__icon-bg {
	fill: var(--ct-none-bg);
}

/* Highlight column (opt-in via toggle in editor) */

.appomni-ct__th--company.is-highlighted,
.appomni-ct__td--cell.is-highlighted {
	background: var(--ct-highlight-bg);
}

.appomni-ct__th--company.is-highlighted {
	box-shadow: inset 0 3px 0 0 var(--ct-highlight-border);
}

/* Cell trigger (only when tooltip exists) */

.appomni-ct__cell-trigger {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	margin: 0;
	cursor: help;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: transform 0.15s ease;
}

.appomni-ct__cell-trigger:hover,
.appomni-ct__cell-trigger:focus-visible {
	transform: scale(1.08);
}

.appomni-ct__cell-trigger:focus-visible {
	outline: 2px solid #2953fa;
	outline-offset: 2px;
}

.appomni-ct__cell-static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
}

/* ---- Tooltip ---- */

.appomni-ct__tooltip {
	position: absolute;
	z-index: 50;
	max-width: 280px;
	min-width: 200px;
	padding: 0.75rem 0.875rem;
	background: #F6F6F8;
	color: #000;
	border: 1px solid #D8DFE3;
	border-radius: 8px;
	font-family: Graphik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	box-shadow:
		0 8px 24px rgba(15, 23, 42, 0.08),
		0 2px 4px rgba(15, 23, 42, 0.04);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 0.15s ease, transform 0.15s ease;
}

.appomni-ct__tooltip[data-visible="true"] {
	opacity: 1;
	transform: translateY(0);
}

.appomni-ct__tooltip a {
	color: #2953fa;
	-webkit-text-decoration: underline;
	text-decoration: underline;
}

.appomni-ct__tooltip[hidden] {
	display: none;
}

/* Tooltip arrow — points up (tooltip is below the trigger) */

.appomni-ct__tooltip::before,
.appomni-ct__tooltip::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	left: 50%;
	left: var(--ct-arrow-left, 50%);
	margin-left: -5px;
	transform: rotate(45deg);
}

/* Border layer (sits behind the fill so the diamond gets a top + left edge) */

.appomni-ct__tooltip::before {
	background: #D8DFE3;
	top: -6px;
}

/* Fill layer (covers the bottom-right edges of the border diamond) */

.appomni-ct__tooltip::after {
	background: #F6F6F8;
	top: -4px;
}

/* Screen reader text */

.appomni-ct .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Mobile refinements */

@media (max-width: 768px) {
	.appomni-ct {
		--ct-cell-padding-x: 1rem;
		--ct-cell-padding-y: 1.125rem;
		--ct-row-height: 64px;
	}

	/* Stack legend items vertically with reduced corner radius */
	.appomni-ct__legend {
		flex-direction: column;
		align-items: flex-start;
		border-radius: 8px;
		padding: 0.875rem 1.25rem;
	}

	.appomni-ct__th--cap,
	.appomni-ct__td--cap {
		min-width: 11rem;
	}

	/* Right-side drop shadow on the sticky capability column, only on mobile.
	   Uses a positioned pseudo-element rather than box-shadow to avoid clip-path
	   tricks and keep the cell's background fully opaque. */
	.appomni-ct__th--cap::after,
	.appomni-ct__td--cap::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 12px;
		pointer-events: none;
		background: linear-gradient(
			to right,
			rgba(15, 23, 42, 0.06),
			rgba(15, 23, 42, 0)
		);
		transform: translateX(100%);
	}

	.appomni-ct__icon {
		width: 28px;
		height: 28px;
	}

	.appomni-ct__logo {
		max-height: 22px;
		max-width: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.appomni-ct__tooltip,
	.appomni-ct__cell-trigger {
		transition: none;
	}
}