/* ==========================================================================
   Reusable components: buttons, links, labels, chips, cards, search, tool bits
   ========================================================================== */

/* ---------- Wordmark ---------- */
.wordmark {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--color-text);
	white-space: nowrap;
}
.wordmark__ai { color: var(--color-accent); }
.wordmark__tld { color: var(--color-text-faint); }
.wordmark--on-dark { color: var(--color-on-dark); }
.wordmark--on-dark .wordmark__ai { color: var(--color-accent-soft); }
.wordmark--on-dark .wordmark__tld { color: var(--color-on-dark-faint); }

/* ---------- Dot (brand marker) ---------- */
.dot {
	display: inline-block;
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dot-color, var(--color-accent));
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), gap .25s;
}
.btn--lg { padding: 14px 24px; border-radius: 12px; }
.btn--primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-deep); border-color: rgba(38, 33, 92, .18); }
.btn--secondary:hover { border-color: var(--color-accent); }
.btn--dark { background: var(--color-dark); color: #fff; border: 0; }
.btn--dark:hover { background: var(--color-deep); }
a.btn:hover { transform: translateY(-3px); }

.icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(38, 33, 92, .14);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-deep);
	transition: border-color var(--transition), transform var(--transition);
}
.icon-btn:hover { border-color: var(--color-accent); }

/* ---------- Links ---------- */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	transition: gap .25s;
}
a.arrow-link:hover { gap: 14px; }

.ulink { position: relative; }
.ulink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 1.5px;
	background: currentColor;
	transition: width .3s ease;
}
a.ulink:hover::after { width: 100%; }

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
	margin-bottom: 14px;
	font-family: var(--font-mono);
	font-size: .8125rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-accent);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--space-xl);
}
.section-title {
	font-size: var(--fs-h2);
	letter-spacing: var(--tracking-tight);
	line-height: 1.1;
}
.section-head__more { color: var(--color-accent); font-size: .9375rem; }
.section-head--dark .eyebrow,
.section-head--dark .section-head__more { color: var(--color-accent-soft); }

/* ---------- Tags (mono, small radius) ---------- */
.tag {
	display: inline-block;
	flex-shrink: 0;
	padding: 5px 9px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	background: var(--color-bg);
	color: var(--color-deep);
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
}
.tag--lavender {
	border-color: transparent;
	background: var(--color-lavender);
	color: var(--color-indigo);
	font-size: .78rem;
	letter-spacing: 0;
	text-transform: none;
}
.tag--dark {
	border-color: var(--color-accent-tint-border);
	background: var(--color-accent-tint);
	color: var(--color-accent-soft);
}

.pill-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	border: 1px solid var(--color-primary-tint-border);
	border-radius: var(--radius-pill);
	background: var(--color-lavender);
	color: var(--color-indigo);
	font-size: .78rem;
	letter-spacing: .02em;
}

.demo-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 3px 8px;
	border: 1px dashed #d97706;
	border-radius: var(--radius-xs);
	background: #fff7ed;
	color: #b45309;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
}

/* ---------- Chips & pills ---------- */
.chip-list,
.pill-list {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pill-list { gap: 12px; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--chip-border, var(--color-border));
	border-radius: var(--radius-pill);
	background: var(--chip-bg, var(--color-bg));
	color: var(--chip-fg, var(--color-deep));
	font-size: .84rem;
	font-weight: 500;
	line-height: 1.3;
	transition: border-color .25s, transform .25s;
}
a.chip:hover { border-color: var(--color-accent); transform: translateY(-2px); }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border: 1.5px solid rgba(38, 33, 92, .14);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.2;
	transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.pill .dot { width: 6px; height: 6px; }
a.pill:hover { border-color: var(--color-accent); color: var(--color-indigo); transform: translateY(-4px); }

/* ---------- Icon tile ---------- */
.icon-tile {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--icon-bg, var(--color-lavender));
	color: var(--icon-fg, var(--color-indigo));
}
.icon-tile--sm { width: 34px; height: 34px; border-radius: 9px; }

/* ---------- Cards ---------- */
.card {
	display: flex;
	height: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
a.card--hover:hover {
	transform: translateY(-6px);
	border-color: var(--color-border-accent);
	box-shadow: var(--shadow-card-hover);
}
.card--dark {
	border-color: var(--color-border-dark);
	background: var(--color-dark-surface);
	color: var(--color-on-dark);
}
a.card--dark:hover {
	transform: translateY(-6px);
	border-color: rgba(122, 91, 255, .6);
	box-shadow: var(--shadow-accent-dark);
}

.panel {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 5vw, 60px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	background: var(--color-surface);
}

/* ---------- Grids ---------- */
.grid {
	display: grid;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 920px) {
	.grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
	.grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Search bar ---------- */
.search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	padding: 8px 8px 8px 18px;
	border: 1.5px solid rgba(38, 33, 92, .14);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition);
}
.search-bar:focus-within { border-color: var(--color-accent); }
.search-bar__icon { display: grid; flex-shrink: 0; color: var(--color-accent); }
.search-bar__input {
	flex: 1;
	min-width: 0;
	padding: 6px 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: .9375rem;
}
.search-bar__input::placeholder { color: var(--color-text-faint); }
.search-bar__input::-webkit-search-cancel-button { display: none; }
.search-bar__submit { flex-shrink: 0; padding: 12px 20px; }

@media (max-width: 480px) {
	.search-bar { padding-left: 14px; }
	.search-bar__icon { display: none; }
	.search-bar__submit { padding: 12px 16px; }
}

/* ---------- Tool bits ---------- */
.tool-logo {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--tool-color, var(--color-dark));
	color: #fff;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--color-text);
}
.rating .icon { color: var(--color-accent); }

.tool-card-mini {
	align-items: center;
	gap: 18px;
	padding: 24px;
}
.tool-card-mini__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tool-card-mini__name { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.tool-card-mini__cat { margin-top: 3px; font-size: .75rem; color: var(--color-text-subtle); }
.tool-card-mini__meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.vs-badge {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-dark);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
}

/* ---------- Author / post meta ---------- */

/* Author avatar (initials), byline, category badge */
.avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--avatar-bg, var(--color-accent));
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.avatar--sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar--md { width: 40px; height: 40px; font-size: .875rem; }
.post-byline__text { display: flex; flex-direction: column; gap: 3px; }
.post-byline__name { font-size: .875rem; font-weight: 600; }
.post-byline__meta { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-subtle); }
.cat-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border: 1px solid rgba(127, 119, 221, .3);
	border-radius: 8px;
	background: var(--color-lavender);
	color: var(--color-indigo);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}


/* ---------- Hero (homepage + blog listing) ---------- */
.hero { position: relative; }
.hero__mesh {
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	pointer-events: none;
	opacity: .9;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
	mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.hero__inner { position: relative; padding-top: 72px; padding-bottom: 84px; }
.hero__content { max-width: 760px; }
.hero .pill-badge { margin-bottom: 28px; }
.hero__title {
	margin-bottom: 22px;
	font-size: var(--fs-h1);
	line-height: 1.02;
	letter-spacing: -.035em;
}
.hero__lead {
	max-width: 580px;
	margin-bottom: 34px;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-text-muted);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	color: var(--color-text-subtle);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 620px) {
	.hero__mesh { width: 80%; opacity: .45; }
	.hero__inner { padding-top: 48px; padding-bottom: 60px; }
	.hero__title br { display: none; }
}


/* ---------- Missing internal links (staging QA for admins only) ---------- */
.porownai-show-missing .is-unlinked { outline: 1px dashed rgba(217, 119, 6, .55); outline-offset: 2px; }