/* WP Masquerade theme v2.4: content tables design system (inc/tables.php adds the classes, assets/js/tables.js the
   scroll hint). Scope: .entry-content figure.wpt only, so the free vs Pro comparison (.cmp), the plugins comparison
   (.cp-table-wrap, .cp-profiles), member area tables (.table) and the admin keep their own styles. */

.entry-content figure.wpt {
	--wpt-r: 16px;
	--wpt-head: linear-gradient(180deg, #f4f8ff 0%, #e9f1ff 100%);
	--wpt-zebra: #f9fbff;
	--wpt-hover: #f0f6ff;
	--wpt-pro: #f8f5ff;
	--wpt-free: #f4fbf7;
	position: relative; margin: 2rem 0 2.2rem; padding: 0; overflow: hidden;
	background: #fff; border: 1px solid #dce6f5; border-radius: var(--wpt-r);
	box-shadow: 0 1px 2px rgba(16, 36, 73, .04), 0 10px 28px rgba(19, 54, 110, .06);
}
/* Brand accent on top of the card. */
.entry-content figure.wpt::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
	background: linear-gradient(90deg, var(--blue) 0%, var(--blue2) 55%, #7aa6ff 100%);
}
.entry-content figure.wpt.has-pro-col::before { background: linear-gradient(90deg, var(--blue) 0%, #3f4ff2 50%, #6b3cf0 100%); }

.wpt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.wpt-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--wpt-r) var(--wpt-r) 0 0; }

.entry-content .wpt table {
	width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: transparent;
	font-size: .93rem; line-height: 1.55; font-variant-numeric: tabular-nums;
}
.entry-content .wpt th, .entry-content .wpt td {
	padding: 14px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid #edf1f7; color: #23365a;
}
.entry-content .wpt td + td, .entry-content .wpt th + td, .entry-content .wpt th + th { border-left: 0; }

/* Header row. */
.entry-content .wpt thead th {
	padding: 15px 18px 13px; background: var(--wpt-head); color: #1d3a6e; vertical-align: bottom;
	font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35;
	border-bottom: 1px solid #d5e2f6; white-space: normal;
}
.entry-content .wpt thead th .wpm-tag { margin-left: 6px; top: -1px; }

/* Body: zebra rows, hover, first column. */
.entry-content .wpt.is-style-stripes tbody tr, .entry-content .wpt tbody tr { background: none; border: 0; }
.entry-content .wpt tbody tr:nth-child(even) > * { background: var(--wpt-zebra); }
.entry-content .wpt tbody tr:hover > * { background: var(--wpt-hover); }
.entry-content .wpt tbody tr:last-child > * { border-bottom: 0; }
.entry-content .wpt tbody th[scope="row"] { font-weight: 720; color: var(--ink); background-clip: padding-box; min-width: 8.5rem; }
.entry-content .wpt tbody th[scope="row"] strong { font-weight: inherit; }
.entry-content .wpt td strong { color: var(--ink); }
.entry-content .wpt td a, .entry-content .wpt th a { font-weight: 650; }

/* Alignment set by column (inc/tables.php). */
.entry-content .wpt .is-center { text-align: center; }
.entry-content .wpt .is-right { text-align: right; white-space: nowrap; }
.entry-content .wpt .is-num { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

/* Code cells. */
.entry-content .wpt td code, .entry-content .wpt th code { font-size: .82rem; background: #f1f5fc; border-color: #dfe7f4; color: #1e3d72; white-space: normal; overflow-wrap: anywhere; }
.entry-content .wpt td.is-code code { display: inline-block; padding: 2px 7px; }

/* Pro and free columns. */
.entry-content .wpt thead th.is-pro-col { background: linear-gradient(180deg, #f6f2ff 0%, #ece6ff 100%); color: #3d23b0; box-shadow: inset 0 -2px 0 #b9a6ff; }
.entry-content .wpt thead th.is-free-col { background: linear-gradient(180deg, #f2fbf6 0%, #e4f6ec 100%); color: var(--green-text); box-shadow: inset 0 -2px 0 #9fdcbd; }
.entry-content .wpt tbody td.is-pro-col { background: var(--wpt-pro); }
.entry-content .wpt tbody tr:nth-child(even) > td.is-pro-col { background: #f3efff; }
.entry-content .wpt tbody td.is-free-col { background: var(--wpt-free); }
.entry-content .wpt tbody tr:nth-child(even) > td.is-free-col { background: #eef8f2; }
.entry-content .wpt tbody tr:hover > td.is-pro-col { background: #ece6ff; }
.entry-content .wpt tbody tr:hover > td.is-free-col { background: #e6f5ec; }
.wpt-crown { display: inline-flex; vertical-align: -2px; margin-right: 6px; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center; background: var(--pro-grad, #6b3cf0); box-shadow: 0 2px 6px rgba(91, 62, 240, .3); }
.wpt-crown .icon-crown { width: 12px; height: 12px; color: var(--pro-gold, #ffd36a); }

/* States: check / cross / half disc, the word stays visible. */
.wpt-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin: 0 8px 0 0; vertical-align: -6px; flex: none; }
.wpt-ico svg { width: 13px; height: 13px; stroke-width: 3; }
.wpt-ico.is-yes { background: #e2f6ec; color: var(--green); box-shadow: inset 0 0 0 1px #bfe6d2; }
.wpt-ico.is-no { background: #f1f3f8; color: #7a879c; box-shadow: inset 0 0 0 1px #dfe4ee; }
.wpt-ico.is-partial { background: #fff4e3; color: #d07b12; box-shadow: inset 0 0 0 1px #f6d9ae; }
.wpt-ico.is-partial svg { width: 14px; height: 14px; stroke-width: 0; }
.wpt-ico.is-partial svg circle { stroke-width: 2.4; }
.entry-content .wpt td.wpt-st.is-only { font-weight: 720; white-space: nowrap; }
.entry-content .wpt td.wpt-st.is-only.is-yes { color: var(--green-text); }
.entry-content .wpt td.wpt-st.is-only.is-no { color: #5e6e88; }
.entry-content .wpt td.wpt-st.is-only.is-partial { color: #8a4b00; }

/* Pills: free pill (same look as the Free badge) and mini badges in sentences. */
.wpt-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 100px; padding: 3px 11px 3px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35; white-space: nowrap; }
.wpt-pill.is-free { background: #eaf8f1; color: var(--green-text); box-shadow: inset 0 0 0 1px #bfe6d2; }
.wpt-pill-ico { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--green); color: #fff; }
.wpt-pill-ico svg { width: 11px; height: 11px; stroke-width: 3.2; }
.wpt-mini { display: inline-block; border-radius: 100px; padding: 0 7px; margin: 0 1px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.wpt-mini.is-pro { background: var(--pro-grad, #4b45f0); color: #fff; box-shadow: 0 2px 6px rgba(91, 62, 240, .25); }
.wpt-mini.is-free { background: #e5f8ef; color: var(--green-text); box-shadow: inset 0 0 0 1px #bfe6d2; }

/* Levels 0 to 5 as chips (modes and levels tables). */
.wpt-level { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font-weight: 800; font-size: .9rem; line-height: 1; background: #eef4ff; color: #1559d6; box-shadow: inset 0 0 0 1px #d4e2fb; }
.wpt-level[data-level="2"] { background: #dce8ff; color: #0f4fc4; box-shadow: inset 0 0 0 1px #c2d6fb; }
.wpt-level[data-level="3"] { background: var(--blue); color: #fff; box-shadow: 0 3px 10px rgba(23, 101, 244, .28); }
.wpt-level[data-level="4"], .wpt-level[data-level="5"] { background: linear-gradient(135deg, #102449, #1d3f86); color: #fff; box-shadow: 0 3px 10px rgba(16, 36, 73, .28); }
.wpt-soft { display: inline-block; padding: 3px 10px; border-radius: 100px; background: #f1f3f8; color: #5e6e88; font-size: .8rem; font-weight: 650; box-shadow: inset 0 0 0 1px #e2e7f0; white-space: nowrap; }
.wpt-level[data-level="0"] { background: #f1f3f8; color: #5e6e88; box-shadow: inset 0 0 0 1px #dfe4ee; }

/* Caption. */
.entry-content .wpt figcaption, .entry-content .wpt .wp-element-caption {
	position: relative; margin: 0; padding: 12px 18px 13px 44px; border-top: 1px solid #e6edf7; background: #f8faff;
	color: #4d5f7d; font-size: .84rem; line-height: 1.5; text-align: left;
}
.entry-content .wpt figcaption::before {
	content: "i"; position: absolute; left: 17px; top: 13px; width: 18px; height: 18px; border-radius: 50%;
	display: grid; place-items: center; background: #e3edff; color: #1559d6; font: 800 .68rem/1 Georgia, serif; font-style: italic;
}

/* Small "Included in WP Masquerade Pro" row after a table with a Pro column. */
.wpt-cta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 13px 18px;
	background: linear-gradient(100deg, #f3f6ff 0%, #f1edff 100%); border-top: 1px solid #e2dcfb;
}
.entry-content .wpt-cta-text { flex: 1 1 220px; margin: 0; font-size: .9rem; line-height: 1.45; color: #3a4d6e; }
.wpt-cta-text strong { color: var(--ink); }
.wpt-cta-text span { color: var(--muted); }
.wpt-cta-text span strong { color: #3b2fc9; }
.entry-content .wpt-cta-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: .88rem; color: #3b2fc9; text-decoration: none; white-space: nowrap; }
.wpt-cta-link:hover { color: #2a1fa3; text-decoration: underline; }
.wpt-cta-link svg { width: 16px; height: 16px; transition: transform .16s ease; }
.wpt-cta-link:hover svg { transform: translateX(3px); }

/* Horizontal scroll hint (assets/js/tables.js sets .can-scroll / .at-end). */
.entry-content figure.wpt.can-scroll::after {
	content: ""; position: absolute; top: 3px; right: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 2;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(16, 36, 73, .1));
	transition: opacity .2s ease;
}
.entry-content figure.wpt.can-scroll.at-end::after { opacity: 0; }

/* Wide data tables (6 columns or more, e.g. vulnerability timelines) in the article column: tighter cells so the
   table fits without horizontal scrolling from 641px (tablets) to desktop; phones get the stacked cards below.
   Long words (German compounds, CVE ranges) may break inside the cell rather than widen the table. */
@media (min-width: 641px) {
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) th,
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) td { padding: 11px 8px; font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) thead th { padding: 12px 8px 10px; font-size: .62rem; letter-spacing: .04em; }
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) th:first-child,
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) td:first-child { padding-left: 14px; }
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) tbody th[scope="row"] { min-width: 0; }
	.entry-content figure.wpt:is(.wpt-cols-6, .wpt-cols-7, .wpt-cols-8, .wpt-cols-9) .is-right { white-space: normal; }
}

/* ------------------------------------------------------------------ Phones and small tablets */
@media (max-width: 640px) {
	.entry-content figure.wpt { --wpt-r: 14px; margin: 1.5rem 0 1.8rem; }
	.entry-content .wpt th, .entry-content .wpt td { padding: 11px 12px; font-size: .88rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
	.entry-content .wpt thead th { padding: 12px; font-size: .66rem; letter-spacing: .06em; }
	.entry-content .wpt tbody th[scope="row"] { min-width: 0; }
	.entry-content .wpt figcaption { padding: 11px 14px 12px 40px; }
	.entry-content .wpt figcaption::before { left: 13px; top: 12px; }
	.wpt-cta { padding: 12px 14px; }
	.wpt-cta-text span { display: block; }

	/* Wide tables: one card per row, labels from the header (data-label). */
	.entry-content .wpt.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.entry-content .wpt.is-stack table, .entry-content .wpt.is-stack tbody, .entry-content .wpt.is-stack tr,
	.entry-content .wpt.is-stack th, .entry-content .wpt.is-stack td { display: block; width: auto; }
	.entry-content .wpt.is-stack tbody tr { padding: 14px 16px 10px; border-bottom: 1px solid #e6edf7; background: #fff; }
	.entry-content .wpt.is-stack tbody tr:nth-child(even) { background: var(--wpt-zebra); }
	.entry-content .wpt.is-stack tbody tr:last-child { border-bottom: 0; }
	.entry-content .wpt.is-stack tbody tr > *, .entry-content .wpt.is-stack tbody tr:hover > *, .entry-content .wpt.is-stack tbody tr:nth-child(even) > * { background: none; }
	.entry-content .wpt.is-stack tbody th[scope="row"] { padding: 0 0 8px; border: 0; font-size: 1rem; line-height: 1.35; }
	.entry-content .wpt.is-stack td { padding: 8px 0; border: 0; border-top: 1px solid #edf1f7; text-align: left; white-space: normal; }
	.entry-content .wpt.is-stack td::before {
		content: attr(data-label); content: attr(data-label) / "";
		display: block; margin: 0 0 3px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35;
	}
	.entry-content .wpt.is-stack td:not([data-label])::before { content: none; }
	.entry-content .wpt.is-stack td.is-pro-col { background: var(--wpt-pro); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
	.entry-content .wpt.is-stack td.is-pro-col::before { color: #4a2fc0; }
	.entry-content .wpt.is-stack td.is-free-col::before { color: var(--green-text); }
	.entry-content .wpt.is-stack td.is-free-col { background: var(--wpt-free); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
	/* Short values: label left, value right. */
	.entry-content .wpt.is-stack.is-compact td { display: flex; align-items: center; gap: 0; padding: 7px 0; }
	.entry-content .wpt.is-stack.is-compact td::before { margin: 0 12px 0 0; flex: 1 1 auto; min-width: 0; }
	.entry-content .wpt.is-stack.is-compact td > * { flex: none; }
	.entry-content .wpt.is-stack .wpt-level { min-width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.wpt-cta-link svg, .wpt-cta-link:hover svg { transition: none; transform: none; }
}
@media print {
	.entry-content figure.wpt { box-shadow: none; }
	.entry-content figure.wpt::before, .entry-content figure.wpt::after { display: none; }
}