/* Frontend — match reference screenshot closely */

.ppm-box {
	--ppm-outer-bg: #eef1f4;
	--ppm-cell-bg: #e2e6eb;
	--ppm-text: #2c3e50;
	--ppm-header: #1a3a6e;
	--ppm-title: #1a3a6e;
	--ppm-chevron: #e67e22;
	--ppm-radius: 18px;
	--ppm-cell-radius: 12px;
	--ppm-gap: 8px;

	direction: rtl;
	background: var(--ppm-outer-bg);
	border: none;
	border-radius: var(--ppm-radius);
	box-shadow: 0 2px 12px rgba(30, 50, 80, 0.08);
	padding: 20px 22px 22px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: Tahoma, "Segoe UI", sans-serif;
	color: var(--ppm-text);
}

.ppm-box *,
.ppm-box *::before,
.ppm-box *::after {
	box-sizing: border-box;
}

.ppm-box__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row; /* title right, chevron left in RTL */
	width: 100%;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 0 2px 16px;
	margin: 0;
	cursor: pointer;
	text-align: right;
	font: inherit;
	color: inherit;
}

.ppm-box__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ppm-title);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.ppm-box__chevron {
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2.5px solid var(--ppm-chevron);
	border-bottom: 2.5px solid var(--ppm-chevron);
	transform: rotate(-135deg); /* points up when open */
	flex-shrink: 0;
	transition: transform 0.2s ease;
	margin: 0 2px 2px 6px;
	opacity: 0.95;
}

.ppm-box.is-collapsed .ppm-box__chevron {
	transform: rotate(45deg); /* points down when closed */
}

.ppm-box.is-collapsed .ppm-box__body {
	display: none;
}

.ppm-box.is-collapsed .ppm-box__toggle {
	padding-bottom: 0;
}

.ppm-box__body {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.ppm-grid {
	display: grid;
	/* equal columns like the photo; first = row headers (right side in RTL) */
	grid-template-columns: repeat(var(--ppm-cols, 9), minmax(0, 1fr));
	gap: var(--ppm-gap);
	align-items: stretch;
	min-width: calc(var(--ppm-cols, 9) * 105px);
	width: 100%;
}

/* Vertical: factors as rows, labels as equal-width top columns — fill available width */
.ppm-grid--vertical {
	min-width: 0;
	width: 100%;
	grid-template-columns: repeat(var(--ppm-cols, 3), minmax(0, 1fr));
}

.ppm-cell {
	background: var(--ppm-cell-bg);
	border-radius: var(--ppm-cell-radius);
	padding: 14px 10px;
	font-size: 0.78rem;
	line-height: 1.7;
	text-align: center;
	color: var(--ppm-text);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	word-break: break-word;
	hyphens: auto;
}

/* Row labels (right column) — bold blue like photo */
.ppm-cell--header {
	font-weight: 700;
	color: var(--ppm-header);
	font-size: 0.82rem;
	line-height: 1.55;
	padding: 14px 8px;
}

/* First data row (factor names) — slightly stronger */
.ppm-cell--factor {
	font-weight: 600;
	color: var(--ppm-header);
	font-size: 0.8rem;
}

/* Last row often has longer text — allow taller cells naturally */
.ppm-cell--detail {
	align-items: center;
	min-height: 110px;
	font-size: 0.74rem;
	line-height: 1.75;
}

@media (max-width: 768px) {
	.ppm-box {
		padding: 14px 12px 16px;
		margin: 20px 0;
		border-radius: 14px;
	}

	.ppm-box__title {
		font-size: 1rem;
	}

	.ppm-grid {
		min-width: 0;
	}

	.ppm-grid--vertical {
		min-width: 0;
		grid-template-columns: repeat(var(--ppm-cols, 3), minmax(0, 1fr));
	}

	.ppm-grid--vertical .ppm-cell {
		min-height: 56px;
		font-size: 0.72rem;
		padding: 10px 6px;
	}

	.ppm-grid.has-mobile-cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ppm-mobile-card {
		display: grid;
		gap: 8px;
		padding: 0 0 10px;
		border-bottom: 1px dashed #cfd5dd;
	}

	.ppm-mobile-card:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.ppm-mobile-card .ppm-cell {
		min-height: 0;
		justify-content: flex-start;
		text-align: right;
		padding: 12px 14px;
	}

	.ppm-mobile-pair {
		display: grid;
		gap: 4px;
	}

	.ppm-mobile-pair__label {
		font-size: 0.75rem;
		font-weight: 700;
		color: var(--ppm-header);
		padding: 0 4px;
	}

	.ppm-desktop-only {
		display: none !important;
	}

	.ppm-mobile-only {
		display: flex !important;
	}
}

@media (min-width: 769px) {
	.ppm-mobile-only {
		display: none !important;
	}

	.ppm-desktop-only {
		display: grid !important;
	}
}

/* ─── Accordion (white border only — page bg comes from theme) ─── */

.ppm-accordion {
	--ppm-acc-border: rgba(255, 255, 255, 0.95);
	--ppm-acc-text: #ffffff;
	--ppm-acc-chevron: #f0a020;
	--ppm-acc-radius: 18px;
	--ppm-acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ppm-acc-duration: 0.65s;

	direction: rtl;
	background: transparent;
	border: 1px solid var(--ppm-acc-border);
	border-radius: var(--ppm-acc-radius);
	padding: 50px 70px 50px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: Tahoma, "Segoe UI", sans-serif;
	color: var(--ppm-acc-text);
}

.ppm-accordion *,
.ppm-accordion *::before,
.ppm-accordion *::after {
	box-sizing: border-box;
}

.ppm-acc-item + .ppm-acc-item {
	margin-top: 22px;
	padding-top: 8px;
}

/* Desktop: title + chevron on one row (original look) */
.ppm-acc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.ppm-acc-title {
	flex: 1;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 2;
	color: var(--ppm-acc-text);
	text-align: right;
	margin: 0;
}

.ppm-acc-panel {
	overflow: hidden;
}

.ppm-acc-anim {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		height var(--ppm-acc-duration) var(--ppm-acc-ease),
		opacity calc(var(--ppm-acc-duration) * 0.85) ease,
		transform var(--ppm-acc-duration) var(--ppm-acc-ease);
	will-change: height, opacity, transform;
}

/* Text items: always visible (3-line preview by default via JS) */
.ppm-acc-item--text .ppm-acc-anim {
	opacity: 1;
	transform: none;
	/* fallback until JS measures (~3 lines on desktop line-height 2.95) */
	height: calc(2.95em * 3 + 14px);
}

.ppm-acc-item.is-open .ppm-acc-anim {
	opacity: 1;
	transform: translateY(0);
}

.ppm-acc-content {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 2.95;
	color: var(--ppm-acc-text);
	text-align: justify;
	padding-top: 14px;
}

.ppm-acc-content p {
	margin: 0 0 0.85em;
}

.ppm-acc-content p:last-child {
	margin-bottom: 0;
}

.ppm-acc-content a {
	color: #ffd27a;
	text-decoration: underline;
}

.ppm-acc-content ul,
.ppm-acc-content ol {
	margin: 0 0 0.85em;
	padding-right: 1.4em;
	padding-left: 0;
}

.ppm-acc-content li {
	margin-bottom: 0.35em;
}

.ppm-acc-content h1,
.ppm-acc-content h2,
.ppm-acc-content h3,
.ppm-acc-content h4 {
	color: var(--ppm-acc-text);
	margin: 0 0 0.5em;
	line-height: 1.5;
}

.ppm-acc-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.ppm-acc-content blockquote {
	margin: 0 0 0.85em;
	padding: 0.5em 1em;
	border-right: 3px solid rgba(255, 255, 255, 0.35);
	opacity: 0.95;
}

.ppm-acc-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	color: inherit;
	flex-shrink: 0;
}

.ppm-acc-expand--head {
	margin-top: 10px;
}

/* Footer chevron only on mobile */
.ppm-acc-expand--foot {
	display: none;
}

.ppm-acc-chevron {
	display: block;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--ppm-acc-chevron);
	border-bottom: 2.5px solid var(--ppm-acc-chevron);
	transform: rotate(45deg); /* down when closed */
	transform-origin: center;
	transition: transform var(--ppm-acc-duration) var(--ppm-acc-ease);
	will-change: transform;
}

.ppm-acc-item.is-open .ppm-acc-chevron,
.ppm-acc-item.is-expanded .ppm-acc-chevron {
	transform: rotate(-135deg); /* up when fully open */
}

/* Text preview: chevron stays down until fully expanded */
.ppm-acc-item--text:not(.is-expanded) .ppm-acc-chevron {
	transform: rotate(45deg);
}

.ppm-acc-item--text.is-expanded .ppm-acc-chevron {
	transform: rotate(-135deg);
}

/* Matrix nested inside white accordion */
.ppm-acc-matrix {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 14px;
	padding-bottom: 4px;
}

.ppm-acc-matrix .ppm-grid {
	--ppm-gap: 8px;
	--ppm-cell-radius: 12px;
}

.ppm-acc-matrix .ppm-cell {
	background: #e4e8ee;
	color: #2c3e50;
}

.ppm-acc-matrix .ppm-cell--header,
.ppm-acc-matrix .ppm-cell--factor {
	color: #1a3a6e;
}

@media (max-width: 768px) {
	.ppm-accordion {
		padding: 18px 16px 14px;
		border-radius: 14px;
		margin: 20px 0;
		--ppm-acc-duration: 0.7s;
	}

	.ppm-acc-title {
		font-size: 0.85rem;
		line-height: 1.7;
	}

	.ppm-acc-content {
		font-size: 0.95rem;
		line-height: 1.95;
		text-align: justify;
		padding-top: 8px;
	}

	/* Hide header chevron; show bottom chevron like screenshot */
	.ppm-acc-expand--head {
		display: none;
	}

	.ppm-acc-expand--foot {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		margin-top: 10px;
		padding: 6px 0 0;
	}

	.ppm-acc-head {
		display: block;
	}

	/*
	 * Mobile text: always show ~3 lines.
	 * JS sets exact height for smooth expand beyond that.
	 */
	.ppm-acc-item--text .ppm-acc-anim {
		opacity: 1;
		transform: none;
		/* fallback until JS measures */
		height: calc(1.95em * 3 + 8px);
	}

	.ppm-acc-item--matrix .ppm-acc-anim {
		height: 0;
		opacity: 0;
		transform: translateY(-8px);
	}

	.ppm-acc-item--matrix.is-open .ppm-acc-anim {
		opacity: 1;
		transform: translateY(0);
	}
}