/* Reviewtex — AI Tool Reviews hub (v0.34.0).
 * Builds on directory.css (hero, search, tabs, menu, sections) and adds the
 * review card, the Editor's picks spotlight, the stats strip and the
 * "How we review" band. Colours follow the theme's primary colour.
 */

/* ---------- Hero ---------- */
.rte-rvh-hero {
	background:
		radial-gradient( 700px 260px at 15% -30px, color-mix( in srgb, var( --d-accent ) 14%, transparent ), transparent 70% ),
		radial-gradient( 620px 260px at 90% 0, color-mix( in srgb, #f59e0b 10%, transparent ), transparent 70% ),
		linear-gradient( 180deg, var( --d-soft ), #fff 88% );
}
.rte-rvh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .85 );
	border: 1px solid color-mix( in srgb, var( --d-accent ) 18%, var( --d-line ) );
	box-shadow: var( --d-shadow-sm );
	color: var( --d-text );
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
}
.rte-rvh-hero__pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #12b76a;
	box-shadow: 0 0 0 3px rgba( 18, 183, 106, .18 );
}
.rte-rvh-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 26px auto 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.rte-rvh-stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 118px;
	margin: 0 !important;
	padding: 10px 16px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .78 );
	border: 1px solid var( --d-line );
	box-shadow: var( --d-shadow-sm );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	list-style: none !important;
}
.rte-rvh-stats li::before,
.rte-rvh-stats li::marker { content: none !important; display: none !important; }
.rte-rvh-stats strong {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --d-ink );
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.rte-rvh-stats span { color: var( --d-muted ); font-size: 12.5px; font-weight: 500; }
.rte-rvh-stats .rte-rvh-stats__star { color: #f5a400; font-size: 17px; }
.rte-rvh-tab__icon { color: #12b76a; }

/* ---------- Review card ---------- */
.rte-rcard {
	--c-accent: var( --d-accent, var( --rte-color-primary, #2563eb ) );
	--c-ink: #0b1220;
	--c-text: #475467;
	--c-muted: #475467;
	--c-faint: #667085;
	--c-line: #e9ecf2;
	--c-r: 18px;
	--c-pad: 18px;
	position: relative;
	display: flex !important;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	float: none;
	border: 1px solid var( --c-line );
	border-radius: var( --c-r );
	background: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .04 ), 0 2px 6px -2px rgba( 16, 24, 40, .04 );
	overflow: hidden;
	isolation: isolate;
	font-family: var( --dir-font, inherit );
	color: var( --c-text );
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier( .2, .7, .2, 1 );
}
.rte-rcard *,
.rte-rcard *::before,
.rte-rcard *::after { box-sizing: border-box; }
.rte-rcard a,
.rte-rcard a:hover,
.rte-rcard a:focus { text-decoration: none !important; }
.rte-rcard img { max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.rte-rcard svg { flex: none; }
.rte-rcard:hover {
	border-color: color-mix( in srgb, hsl( var( --h, 220 ) 60% 50% ) 30%, var( --c-line ) );
	box-shadow: 0 2px 4px rgba( 16, 24, 40, .04 ), 0 22px 44px -20px hsl( var( --h, 220 ) 50% 30% / .38 );
	transform: translateY( -3px );
}
.rte-rcard__link {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var( --c-text ) !important;
	outline: 0;
	box-shadow: none !important;
}
.rte-rcard__link:focus-visible { box-shadow: inset 0 0 0 3px color-mix( in srgb, var( --c-accent ) 32%, transparent ) !important; border-radius: var( --c-r ); }

/* Cover: tool hue, dots, logo and score ring */
.rte-rcard__cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	min-height: 92px;
	padding: 16px var( --c-pad ) 0;
	background:
		radial-gradient( circle at 12% 0, hsl( var( --h, 220 ) 90% 88% / .85 ), transparent 55% ),
		radial-gradient( circle at 95% 100%, hsl( calc( var( --h, 220 ) + 45 ) 85% 88% / .8 ), transparent 55% ),
		linear-gradient( 135deg, hsl( var( --h, 220 ) 70% 97% ), hsl( calc( var( --h, 220 ) + 30 ) 70% 94% ) );
}
.rte-rcard__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient( rgba( 16, 24, 40, .08 ) 1px, transparent 1px );
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient( 180deg, #000, transparent 90% );
	mask-image: linear-gradient( 180deg, #000, transparent 90% );
	pointer-events: none;
}
.rte-rcard__logo {
	position: relative;
	z-index: 1;
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: -22px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient( 145deg, #fff, hsl( var( --h, 220 ) 70% 94% ) );
	color: hsl( var( --h, 220 ) 55% 36% );
	font-size: 23px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px hsl( var( --h, 220 ) 50% 25% / .45 );
}
.rte-rcard__logo img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.rte-rcard__ring {
	position: relative;
	z-index: 1;
	flex: none;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 0 -20px auto;
	border-radius: 50%;
	background:
		radial-gradient( closest-side, #fff 76%, transparent 78% ),
		conic-gradient( var( --ring, #12b76a ) calc( var( --s, 0 ) * 1% ), #eaecf0 0 );
	box-shadow: 0 0 0 3px #fff, 0 8px 18px -10px rgba( 16, 24, 40, .4 );
}
.rte-rcard__ring-n { color: var( --c-ink ); font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rte-rcard__flag {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .9 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .08 ), inset 0 0 0 1px rgba( 16, 24, 40, .06 );
	color: #9a6700;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
}
.rte-rcard__flag svg { color: #f5a400; }

/* Body */
.rte-rcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 34px var( --c-pad ) 14px;
}
.rte-rcard__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 18px; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.rte-rcard__cat { color: var( --c-muted ); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.rte-rcard__cat + .rte-rcard__verdict::before { content: "·"; margin-right: 8px; color: var( --c-faint ); }
.rte-rcard__verdict { color: hsl( 152 70% 30% ); }
.rte-rcard__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rte-rcard__title {
	min-width: 0;
	overflow: hidden;
	color: var( --c-ink );
	font-size: 18px;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -.015em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rte-rcard__check { display: inline-flex; color: #1d9bf0; }
.rte-rcard__check svg { width: 17px; height: 17px; }
.rte-rcard__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.rte-rcard__users { color: var( --c-muted ); font-size: 12.5px; }
.rte-rcard__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	color: var( --c-text );
	font-size: 14px;
	line-height: 1.55;
}
.rte-rcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.rte-rcard__meta:empty { display: none; }
.rte-rcard__tested {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background: #ecfdf3;
	box-shadow: inset 0 0 0 1px #abefc6;
	color: #067647;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.3;
}
.rte-rcard .rte-price { font-size: 12px; }
.rte-rcard__pros { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 2px; padding: 14px 16px; border-radius: 14px; background: hsl( var( --h, 220 ) 60% 98% ); box-shadow: inset 0 0 0 1px hsl( var( --h, 220 ) 40% 92% ); }
.rte-rcard__pro { display: flex; align-items: flex-start; gap: 8px; color: var( --c-ink ); font-size: 14px; font-weight: 500; line-height: 1.45; }
.rte-rcard__pro svg { margin-top: 2px; color: #12b76a; }

/* Footer bar */
.rte-rcard__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px var( --c-pad );
	border-top: 1px solid var( --c-line );
	background: #fbfcfd;
	font-size: 12.5px;
}
.rte-rcard__date { color: var( --c-faint ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rte-rcard__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: var( --c-ink );
	font-size: 13px;
	font-weight: 700;
}
.rte-rcard__cta svg { transition: transform .2s ease; }
.rte-rcard:hover .rte-rcard__cta { color: var( --c-accent ); }
.rte-rcard:hover .rte-rcard__cta svg { transform: translateX( 3px ); }

/* Score colours */
.rte-rcard { --ring: #12b76a; }
.rte-rcard.is-mid { --ring: #f5a400; }
.rte-rcard.is-low { --ring: #f04438; }
.rte-rcard.is-mid .rte-rcard__verdict { color: #b54708; }
.rte-rcard.is-low .rte-rcard__verdict { color: #b42318; }

/* ---------- Editor's picks ---------- */
.rte-rvh-picks {
	display: grid;
	grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
	grid-auto-rows: 1fr;
	gap: 20px;
}
.rte-rvh-picks--1 { grid-template-columns: minmax( 0, 1fr ); }
.rte-rvh-picks--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.rte-rvh-picks--3 > .rte-rcard--spotlight { grid-row: span 2; }
.rte-rcard--spotlight .rte-rcard__cover { min-height: 168px; padding-top: 24px; }
.rte-rcard--spotlight .rte-rcard__logo { width: 76px; height: 76px; margin-bottom: -28px; border-radius: 20px; font-size: 30px; }
.rte-rcard--spotlight .rte-rcard__ring { width: 72px; height: 72px; margin-bottom: -26px; }
.rte-rcard--spotlight .rte-rcard__ring-n { font-size: 20px; }
.rte-rcard--spotlight .rte-rcard__flag { top: 16px; right: 16px; left: auto; }
.rte-rcard--spotlight .rte-rcard__body { gap: 10px; padding: 42px 24px 18px; }
.rte-rcard--spotlight .rte-rcard__title { font-size: clamp( 22px, 2.4vw, 28px ); white-space: normal; }
.rte-rcard--spotlight .rte-rcard__desc { font-size: 15.5px; -webkit-line-clamp: 5; line-clamp: 5; }
.rte-rcard--spotlight .rte-rcard__bar { padding: 13px 24px; }
.rte-rvh-picks--1 .rte-rcard--spotlight .rte-rcard__cover { min-height: 140px; }

/* ---------- Grids + categories ---------- */
.rte-rvh-grid { grid-template-columns: repeat( auto-fill, minmax( min( 290px, 100% ), 1fr ) ); gap: 20px; }

/* Category tiles */
.rte-rvh-ctiles {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 270px, 100% ), 1fr ) );
	gap: 16px;
}
.rte-rvh-ctiles > .rte-rvh-cgroup { grid-column: 1 / -1; margin: 18px 0 -2px; }
.rte-rvh-ctiles > .rte-rvh-cgroup:first-child { margin-top: 0; }
.rte-rvh-ctile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 18px 18px 16px;
	border: 1px solid var( --d-line );
	border-radius: 18px;
	background:
		radial-gradient( 240px 120px at 100% 0, hsl( var( --h, 220 ) 85% 93% / .9 ), transparent 70% ),
		#fff;
	box-shadow: var( --d-shadow-sm );
	color: var( --d-text ) !important;
	text-decoration: none !important;
	scroll-margin-top: 90px;
	transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier( .2, .7, .2, 1 );
}
.rte-rvh-ctile:hover { border-color: hsl( var( --h, 220 ) 45% 82% ); box-shadow: var( --d-shadow ); transform: translateY( -2px ); }
.rte-rvh-ctile:focus-visible { outline: 0; box-shadow: 0 0 0 3px var( --d-ring ); }
.rte-rvh-ctile__head { display: flex; flex-direction: column; gap: 2px; }
.rte-rvh-ctile__name { color: var( --d-ink ); font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.3; }
.rte-rvh-ctile__count { color: var( --d-muted ); font-size: 13px; }
.rte-rvh-ctile__avg span { color: #f5a400; }
.rte-rvh-ctile__list { display: flex; flex-direction: column; gap: 2px; }
.rte-rvh-ctile__row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 0; }
.rte-rvh-ctile__row + .rte-rvh-ctile__row { border-top: 1px dashed var( --d-line ); }
.rte-rvh-ctile__logo {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	overflow: hidden;
	background: linear-gradient( 145deg, hsl( var( --h, 220 ) 80% 97% ), hsl( var( --h, 220 ) 70% 90% ) );
	color: hsl( var( --h, 220 ) 55% 36% );
	font-size: 13px;
	font-weight: 800;
	box-shadow: inset 0 0 0 1px rgba( 16, 24, 40, .07 );
}
.rte-rvh-ctile__logo img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0; }
.rte-rvh-ctile__tool { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var( --d-ink ); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rte-rvh-ctile__score { flex: none; padding: 2px 8px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rte-rvh-ctile__score.is-mid { background: #fffaeb; color: #b54708; }
.rte-rvh-ctile__score.is-low { background: #fef3f2; color: #b42318; }
.rte-rvh-ctile__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var( --d-accent ); font-size: 13.5px; font-weight: 650; }
.rte-rvh-ctile:hover .rte-rvh-ctile__go span { transform: translateX( 3px ); }
.rte-rvh-ctile__go span { transition: transform .2s; }

/* ---------- How we review ---------- */
.rte-rvh-method {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 56px;
	padding: 26px 28px;
	border-radius: var( --d-r-xl );
	background:
		radial-gradient( 520px 200px at 0 0, color-mix( in srgb, var( --d-accent ) 22%, transparent ), transparent 70% ),
		linear-gradient( 135deg, #0b1220, #172036 );
	color: #c9d2e3;
	box-shadow: var( --d-shadow-lg );
}
.rte-rvh-method__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .08 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .12 );
	color: #6ee7b7;
}
.rte-rvh-method__text { flex: 1 1 auto; min-width: 0; }
.rte-rvh-method__title { margin: 0 0 4px; color: #fff; font-family: inherit; font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.rte-rvh-method__text p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.rte-rvh-method__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 18px;
	border-radius: 12px;
	background: #fff;
	color: #0b1220 !important;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s;
}
.rte-rvh-method__btn:hover { transform: translateY( -1px ); box-shadow: 0 8px 20px -8px rgba( 0, 0, 0, .5 ); }

/* ---------- Responsive ---------- */
@media ( max-width: 900px ) {
	.rte-rvh-picks,
	.rte-rvh-picks--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); grid-auto-rows: auto; }
	.rte-rvh-picks--3 > .rte-rcard--spotlight { grid-column: 1 / -1; grid-row: auto; }
}
@media ( max-width: 860px ) {
	.rte-dcat__row > .rte-rcard { flex: 0 0 72%; max-width: 320px; scroll-snap-align: start; }
}
@media ( max-width: 640px ) {
	.rte-rvh-hero__eyebrow { font-size: 11.5px; margin-bottom: 14px; }
	.rte-rvh-stats { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; margin-top: 20px !important; }
	.rte-rvh-stats li { min-width: 0; padding: 9px 10px; }
	.rte-rvh-stats strong { font-size: 19px; }
	.rte-rvh-picks,
	.rte-rvh-picks--2 { grid-template-columns: minmax( 0, 1fr ); gap: 14px; }
	.rte-rcard--spotlight .rte-rcard__cover { min-height: 128px; }
	.rte-rcard--spotlight .rte-rcard__body { padding: 38px 18px 16px; }
	.rte-rcard--spotlight .rte-rcard__bar { padding: 12px 18px; }
	.rte-dir-browse .rte-dir-grid > .rte-rcard { flex: 0 0 86%; scroll-snap-align: start; }
	.rte-dcat__row > .rte-rcard { flex-basis: 86%; }
	.rte-rvh-method { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 40px; padding: 22px 20px; }
	.rte-rvh-method__btn { width: 100%; justify-content: center; }
}
@media ( prefers-reduced-motion: reduce ) {
	.rte-rcard, .rte-rcard * { transition: none !important; }
}