/*
 * Comparison pages: the capability matrix, the verdict pills, the accuracy note.
 *
 * The matrix is one dataset, not two. The mockup rendered all 68 rows twice - a
 * table for desktop and a <details> list for mobile - which in WordPress means
 * 136 rows in post_content per page, two places for a verdict to be corrected and
 * one of them always missed. Here the same <table> reflows: at narrow widths each
 * row becomes a stacked block with the two products side by side, using the
 * column names carried on each cell as `data-col`.
 *
 * The pills are deliberately not a traffic-light scale. Green-for-us and
 * grey-for-them across 64 rows is a scorecard, and a scorecard is what a buyer
 * discounts. "Not published" is grey because it is a statement about the vendor's
 * documentation, not a judgement; "Partial" is blue because different is not
 * worse; "Beta" is its own amber-teal because shipping and not-yet-shipping must
 * never look the same.
 */

/* --- The wrapper -------------------------------------------------------- */

.wg-matrix-wrap {
	margin-block-start: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--card-line);
	border-radius: 14px;
	/* Horizontal scroll is the desktop fallback for a narrow window, not the
	   mobile strategy - below 780px the table reflows instead. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.wg-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	line-height: 1.4;
}

.wg-matrix th,
.wg-matrix td {
	text-align: left;
	padding: .8rem 1.05rem;
	vertical-align: middle;
}

/* Sticky header, so the product names stay visible down a 68-row table. */
.wg-matrix thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: .875rem;
	letter-spacing: .01em;
	white-space: nowrap;
}
.wg-matrix thead th:first-child { border-top-left-radius: 13px; }
.wg-matrix thead th:last-child  { border-top-right-radius: 13px; }

/* Column widths are set on the header row, not on the body cells.
 *
 * `td:first-child` is the WRONG hook here: the capability cell is a
 * `th[scope="row"]`, so the first `td` in a row is the WorkGuru verdict. Setting
 * 46% on it gave the widest column to a pill. Sizing the thead instead is both
 * correct and one rule per column. */
.wg-matrix thead th:first-child { width: 46%; }
.wg-matrix thead th + th        { width: 27%; }

.wg-matrix th[scope="row"] {
	font-weight: 500;
	color: var(--wp--preset--color--text-strong);
}

.wg-matrix tbody tr + tr td,
.wg-matrix tbody tr + tr th { border-top: 1px solid var(--wp--preset--color--card-line); }

.wg-matrix tbody tr:hover td,
.wg-matrix tbody tr:hover th[scope="row"] { background: var(--wp--preset--color--surface); }

/* Category band. Not the accent teal from the mockup: at nine bands down a long
   table, full-strength brand colour competes with the pills for attention. */
.wg-matrix .wg-matrix-cat th {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding-block: .7rem;
	position: sticky;
	top: 2.9rem;   /* under the header row */
	z-index: 1;
}

/* --- Verdict pills ------------------------------------------------------- */

.wg-v {
	display: inline-block;
	padding: .28em .6em;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid transparent;
}
.wg-v--yes {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--card-line);
}
/* Different, not worse. */
.wg-v--partial {
	background: #eef2fa;
	color: #3c5573;
	border-color: #d5deee;
}
/* Shipping and not-yet-shipping must never look the same. */
.wg-v--beta {
	background: #fff6e0;
	color: #6d5200;
	border-color: #f0dfae;
}
.wg-v--addon {
	background: #f6f0ff;
	color: #58407e;
	border-color: #e2d6f5;
}
.wg-v--integration {
	background: #eef7ff;
	color: #1d557f;
	border-color: #cfe4f5;
}
/* A statement about the vendor's documentation, not a verdict on the product. */
.wg-v--none {
	background: #f2f4f6;
	color: #66727f;
	border-color: #e3e8ec;
}

/* The pill carries the short label at every width now; the long form lives in
   the legend and in the cell's title attribute. These two classes are kept so
   any content generated before the change still renders. */
.wg-v__long, .wg-v__short { display: inline; }

/* Pill and its marker on one line: the PROPOSED tag was wrapping underneath and
   giving those rows a different height to every other row. */
.wg-vwrap {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: nowrap;
}

/* A uniform row now that the widest pill is "Not found" rather than a sentence. */
.wg-matrix tbody td .wg-v { min-width: 4.5rem; text-align: center; }

.wg-cat-note {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: .75;
}

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

.wg-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.1rem;
	margin-block: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: var(--wp--preset--color--text);
}
.wg-legend li {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin: 0;
}

/* --- Accuracy note ------------------------------------------------------- */
/*
 * Above the table, not below it, and visible rather than fine print. It is the
 * sentence that makes the matrix a good-faith document instead of a claim, so
 * burying it would defeat the purpose - and a reader who finds an error should
 * meet the invitation to report it before they meet the error.
 */

.wg-accuracy {
	margin-block: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--card-line);
	border-left: 4px solid var(--wp--preset--color--accent);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-strong);
}
.wg-accuracy p { margin: 0; }
.wg-accuracy p + p { margin-block-start: .5em; }
.wg-accuracy a { color: var(--wp--preset--color--accent-deep); }

/* Resolved from the wg_reviewed meta field - see inc/comparisons.php. Removed
   entirely when there is no date rather than left as an empty line. */
.wg-reviewed {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

/* --- Verdict summary ----------------------------------------------------- */
/*
 * The two conclusion cards. Side by side and equally weighted on purpose: making
 * "where they win" visibly smaller than "where we win" is the tell that the page
 * is an advert, and readers find it faster than they find any feature row.
 */

.wg-verdict {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}
.wg-verdict > * { margin: 0; }
.wg-verdict .wg-card h3 {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* --- At a glance --------------------------------------------------------- */

.wg-glance {
	width: 100%;
	border-collapse: collapse;
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: .9375rem;
}
.wg-glance th,
.wg-glance td {
	text-align: left;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--card-line);
	vertical-align: top;
}
.wg-glance thead th {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: .8125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
}
.wg-glance td:first-child { font-weight: 600; color: var(--wp--preset--color--text-strong); }

/* --- The /compare/ hub cards -------------------------------------------- */

.wg-vs-card .wg-vs-title::before {
	content: "WorkGuru vs ";
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* --- Reflow -------------------------------------------------------------- */
/*
 * Below 780px the same table becomes a stack. Each row is a block: the capability
 * name on its own line, then the two verdicts labelled with the column name from
 * `data-col`. No second copy of the data, no horizontal scrolling on a phone, and
 * the category bands still separate the groups.
 */

@media (max-width: 779px) {
	.wg-matrix-wrap { overflow-x: visible; border: 0; border-radius: 0; }

	.wg-matrix, .wg-matrix tbody, .wg-matrix tr, .wg-matrix td, .wg-matrix th {
		display: block;
		width: auto;
	}
	.wg-matrix thead { display: none; }

	.wg-matrix tbody tr {
		border: 1px solid var(--wp--preset--color--card-line);
		border-radius: 12px;
		padding: .85rem 1rem;
		margin-block-start: .6rem;
		background: var(--wp--preset--color--base);
	}
	.wg-matrix tbody tr + tr td,
	.wg-matrix tbody tr + tr th { border-top: 0; }

	.wg-matrix th[scope="row"] {
		width: auto;
		padding: 0 0 .5rem;
		font-weight: 600;
	}
	/* Every verdict cell, not `td + td`.
	 *
	 * The capability is a `th`, so `td + td` matched only the second product -
	 * the WorkGuru row rendered as a bare pill with no label while the
	 * competitor's had one. Both are `td` children of tbody; that is the hook. */
	.wg-matrix tbody td {
		width: auto;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: .3rem 0 0;
	}
	/* The column name, carried on the cell so the header row is not needed. */
	.wg-matrix tbody td::before {
		content: attr(data-col);
		font-size: .8125rem;
		color: var(--wp--preset--color--text);
	}

	/* A whole-width band, still sticky-free and still obviously a divider. */
	.wg-matrix .wg-matrix-cat { border: 0; padding: 0; margin-block-start: 1.4rem; }
	.wg-matrix .wg-matrix-cat th {
		position: static;
		border-radius: 8px;
		padding: .55rem .8rem;
	}

	.wg-matrix tbody tr:hover td { background: none; }


	.wg-glance, .wg-glance tbody, .wg-glance tr, .wg-glance td { display: block; width: auto; }
	.wg-glance thead { display: none; }
	.wg-glance tr {
		border: 1px solid var(--wp--preset--color--card-line);
		border-radius: 12px;
		padding: .8rem 1rem;
		margin-block-start: .6rem;
	}
	.wg-glance td { border: 0; padding: .15rem 0; }
	.wg-glance td::before {
		content: attr(data-col) ": ";
		font-size: .8125rem;
		color: var(--wp--preset--color--text);
	}
	.wg-glance td:first-child::before { content: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.wg-matrix tbody tr { transition: background-color .12s ease; }
}

/* --- Citations ----------------------------------------------------------- */
/*
 * A superscript footnote number, not a tooltip.
 *
 * `title` was the obvious first idea and is the wrong one: it does not exist on
 * touch devices, screen readers expose it inconsistently, and it cannot be
 * selected or copied. For substantiation specifically, "we disclosed it, you just
 * had to hover" is a poor position. This anchors to a numbered list under the
 * table, which works everywhere and gives a reviewer one place to read every
 * source on the page.
 */

.wg-cite {
	font-size: .6875rem;
	line-height: 1;
	margin-left: .2em;
}
.wg-cite a {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: none;
	/* 44px is unreachable for a superscript without wrecking the row, so widen
	   what there is rather than pretend. */
	padding: .35em .3em;
	border-radius: 4px;
}
.wg-cite a:hover,
.wg-cite a:focus-visible {
	background: var(--wp--preset--color--surface-alt);
	text-decoration: underline;
}

.wg-sources-wrap {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--card-line);
}
.wg-sources-wrap h3 {
	margin: 0 0 .4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
}
.wg-sources-note {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: .875rem;
	color: var(--wp--preset--color--text);
	max-width: 72ch;
}
.wg-sources {
	margin: 0;
	padding-left: 1.6rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text);
}
.wg-sources li { margin-block: .45rem; }
/* The anchor target sits under a sticky table header on some scroll positions. */
.wg-sources li:target {
	scroll-margin-top: 5rem;
	background: var(--wp--preset--color--surface);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.wg-src-kind {
	display: inline-block;
	min-width: 5.5rem;
	font-size: .75rem;
	font-weight: 700;
	color: var(--wp--preset--color--text-strong);
}
.wg-src-kind--ours { color: var(--wp--preset--color--accent-deep); }
/*
 * A competitor's source is printed, not linked: linking out carries no ranking
 * benefit, sends signals to thirteen competitors from the pages meant to rank on
 * their names, and opens an exit door mid-comparison. Printed in full it is just
 * as verifiable - and selectable, which a tooltip is not. `overflow-wrap` because
 * some of these URLs are long enough to push the column on a phone.
 */
.wg-src-url {
	color: var(--wp--preset--color--text);
	overflow-wrap: anywhere;
}

/* --- Proposed rows (preview only) ---------------------------------------- */
/*
 * The adjacent-scope block, before its competitor verdicts have been sourced.
 * Marked rather than styled subtly on purpose: an unsourced verdict about
 * someone else's product must not be able to pass for a sourced one, in a
 * preview any more than on the page.
 */
.wg-matrix .wg-row-proposed th[scope="row"] { font-style: italic; }
.wg-proposed {
	display: inline-block;
	margin-left: .4em;
	padding: .12em .45em;
	border-radius: 4px;
	background: #fdecec;
	color: #8a2d2d;
	border: 1px dashed #e6b8b8;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	vertical-align: middle;
}

/*
 * "No" is only ever WorkGuru's own answer, so it is allowed to look definite -
 * a firmer border than the soft grey of "Not found", which is a statement about
 * searching someone else's documentation rather than a verdict on a product.
 */
.wg-v--no {
	background: #f2f4f6;
	color: #4a5563;
	border-color: #c8d0d8;
}