/**
 * tr-vs-card + tr-entity-tile
 *
 * The comparison card. Two ideas carry it:
 *
 * 1. The pair row is a three-column grid, `1fr auto 1fr`. Equal weight is
 *    structural, not a matter of restraint: whatever the two names are, neither
 *    side can grow at the other's expense, so the card never implies a winner
 *    the page has not declared.
 *
 * 2. Logo and monogram are ONE box. Roughly half the tools on this archive have
 *    no logo, so the monogram is a designed mark at the same size, radius and
 *    border as an image, not an empty frame. A pair with one of each still reads
 *    as a pair.
 *
 * Tokens only. Every value here resolves from theme-unified.css so the card
 * follows the theme into dark mode without a single dark-scoped override.
 */

/* ==========================================================================
   Entity tile
   ========================================================================== */

/*
 * A near-white ground for image logos, in BOTH themes.
 *
 * Not a theme token, deliberately. Brand logos are supplied as transparent PNGs
 * drawn for a light background, so a dark-mode tile that follows the theme makes
 * every dark logo vanish: measured on NightCafe, Descript and Sora, which
 * rendered as empty boxes on `--color-bg-primary` at #0B0C10. The logo's own
 * contrast is set by whoever drew it and is not ours to theme.
 *
 * Tinted a touch toward the brand hue rather than pure white, per the house rule
 * against #fff. Only the IMAGE variant takes it; the monogram is our own type on
 * our own ground and stays fully themed.
 */
:root {
	--tiorai-logo-ground: #f7f8f4;
}

.tr-entity-tile {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	flex: 0 0 auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--tiorai-logo-ground);
	overflow: hidden;
}

.tr-entity-tile img {
	inline-size: 100%;
	block-size: 100%;
	/* Contain, never cover. These are square brand logos; cropping one to fill
	   the tile removes the part that identifies it. */
	object-fit: contain;
	padding: 5px;
	display: block;
}

/* The monogram. Tinted ground rather than a grey placeholder, because at 52%
   coverage this is a normal state and should not look like a failure. */
.tr-entity-tile--mark {
	background: var(--color-bg-tertiary);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Variant tints, from tiorai_get_entity_initials(). Four hues so adjacent cards
   with monograms do not read as one grey block, all at low chroma so they stay
   background rather than becoming a second accent. */
.tr-entity-tile--a { background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary-dark); }
.tr-entity-tile--b { background: rgba(var(--color-purple-rgb), 0.10); color: var(--color-purple); }
.tr-entity-tile--c { background: rgba(var(--color-accent-rgb), 0.18); color: var(--color-text-primary); }
.tr-entity-tile--d { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

/* ==========================================================================
   Card
   ========================================================================== */

.tr-vs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	block-size: 100%;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--surface-base);
	/* Transform and border only. Neither triggers layout. */
	transition:
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-vs-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-md);
}

/* The whole card is one tab stop, so the ring belongs on the card, not on the
   text inside it. */
.tr-vs-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.28);
}

.tr-vs-card:focus-within .tr-vs-card__link:focus-visible {
	outline: none;
}

/* ==========================================================================
   Pair row
   ========================================================================== */

.tr-vs-card__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: var(--space-3);
}

.tr-vs-card__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	min-inline-size: 0;
	text-align: center;
}

.tr-vs-card__name {
	font-size: var(--font-size-xs);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-text-primary);
	/* Two lines then ellipsis. A 40-character tool name must not push the two
	   sides out of alignment (PRODUCT.md principle 6). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* The spine. A hairline runs the height of the pair row and breaks around the
   mark, which is what makes the card read as a comparison at a glance rather
   than as a two-logo header.

   Two segments with a gap, rather than one line with the text sitting on an
   opaque chip: the chip approach has to repaint the card's own background to
   hide the rule, so it breaks the moment a card sits on any other surface. */
.tr-vs-card__mark {
	position: relative;
	align-self: stretch;
	display: grid;
	place-items: center;
	inline-size: 30px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-primary);
}

.tr-vs-card__mark::before,
.tr-vs-card__mark::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inline-size: 1px;
	background: var(--color-border);
}

.tr-vs-card__mark::before {
	inset-block-start: 0;
	block-size: calc(50% - 11px);
}

.tr-vs-card__mark::after {
	inset-block-end: 0;
	block-size: calc(50% - 11px);
}

/* ==========================================================================
   Plan variant: one tool, two plans
   ========================================================================== */

.tr-vs-card__pair--plan {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--space-3);
}

.tr-vs-card__plan-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-inline-size: 0;
}

.tr-vs-card__pair--plan .tr-vs-card__name {
	text-align: start;
	-webkit-line-clamp: 1;
	font-size: var(--font-size-sm);
}

.tr-vs-card__plans {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
	min-inline-size: 0;
}

.tr-vs-card__plan {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Inline mark: no spine, just the word between two plan names. */
.tr-vs-card__mark--inline {
	position: static;
	inline-size: auto;
	align-self: auto;
	display: inline;
	color: var(--color-text-tertiary);
}

.tr-vs-card__mark--inline::before,
.tr-vs-card__mark--inline::after {
	display: none;
}

/* ==========================================================================
   Title, meta
   ========================================================================== */

.tr-vs-card__title {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text-primary);
	/* Pushes the meta line to the bottom so cards in a row align on it. */
	flex: 1 1 auto;
}

.tr-vs-card__link {
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* One anchor, stretched over the card. Everything else inside is either text or
   a link that opts back above it. */
.tr-vs-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tr-vs-card:hover .tr-vs-card__link {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-border-hover);
}

.tr-vs-card__meta {
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
}

/* Lifted above the stretched anchor so the topic stays independently clickable
   and independently focusable. */
.tr-vs-card__topic {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

a.tr-vs-card__topic:hover,
a.tr-vs-card__topic:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Narrow viewports
   ========================================================================== */

@media (max-width: 480px) {
	.tr-vs-card {
		padding: var(--space-4);
		gap: var(--space-3);
	}

	/* The pair stays side by side down to the smallest width. Stacking it would
	   destroy the one thing the card exists to communicate. The tiles shrink
	   instead. */
	.tr-entity-tile {
		inline-size: 38px;
		block-size: 38px;
	}

	.tr-vs-card__mark {
		inline-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tr-vs-card {
		transition: none;
	}

	.tr-vs-card:hover {
		transform: none;
	}
}