/* ==========================================================================
   Techish tweet card — Phase 1
   Static, on-brand X / Twitter embed rendered by inc/techish-tweet-embed.php.
   Tokens from techish-tokens.css (--ti-*). Dark mode via Jannah's .dark-skin.
   Scope: every selector is namespaced .techish-tweet so nothing here can
   affect other embeds or article content.
   ========================================================================== */

.techish-tweet {
	max-width: 550px;
	margin: 1.75rem auto;
	background: var(--ti-paper);
	border: 1px solid var(--ti-ink-300);
	border-radius: 14px;
	overflow: hidden;
	font-family: var(--ti-font-sans);
	color: var(--ti-fg);
	-webkit-text-size-adjust: 100%;
}

.techish-tweet__bar {
	height: 4px;
	background: var(--ti-blue-400);
	background: var(--ti-gradient, linear-gradient(90deg, var(--ti-violet-500), var(--ti-blue-400)));
}

.techish-tweet__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 16px 10px;
}

.techish-tweet__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--ti-cream-200);
}

.techish-tweet__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.techish-tweet__name {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 15px;
	color: var(--ti-fg);
}

.techish-tweet__verified {
	width: 17px;
	height: 17px;
	color: var(--ti-blue-400);
	flex: 0 0 auto;
}

.techish-tweet__handle {
	font-family: var(--ti-font-mono);
	font-size: 13px;
	color: var(--ti-blue-400);
	text-decoration: none;
}

.techish-tweet__handle:hover {
	text-decoration: underline;
}

.techish-tweet__brand {
	margin-left: auto;
	color: var(--ti-fg);
	display: flex;
	align-self: flex-start;
}

.techish-tweet__brand svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.techish-tweet__body {
	padding: 2px 16px 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ti-fg);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.techish-tweet__lnk {
	color: var(--ti-link);
	text-decoration: none;
}

.techish-tweet__lnk:hover {
	text-decoration: underline;
}

.techish-tweet__media {
	display: grid;
	gap: 2px;
	margin: 12px 16px 0;
	border: 1px solid var(--ti-ink-300);
	border-radius: 12px;
	overflow: hidden;
}

.techish-tweet__media img {
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.techish-tweet__media--1 { grid-template-columns: 1fr; }
.techish-tweet__media--2,
.techish-tweet__media--3,
.techish-tweet__media--4 { grid-template-columns: 1fr 1fr; }
.techish-tweet__media--3 img:first-child { grid-row: span 2; }

.techish-tweet__video {
	position: relative;
	display: block;
}

.techish-tweet__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.techish-tweet__play svg {
	width: 56px;
	height: 56px;
}

.techish-tweet__meta {
	padding: 10px 16px 0;
	font-size: 13px;
	color: var(--ti-fg-faint);
}

.techish-tweet__stats {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 10px;
	padding: 10px 16px 14px;
	border-top: 1px solid var(--ti-ink-200);
	font-size: 13px;
	color: var(--ti-fg-muted);
}

.techish-tweet__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.techish-tweet__stat svg {
	width: 16px;
	height: 16px;
}

.techish-tweet__view {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-weight: 500;
	color: var(--ti-link);
	text-decoration: none;
}

.techish-tweet__view:hover {
	text-decoration: underline;
}

.techish-tweet__view svg {
	width: 14px;
	height: 14px;
}

/* --- Dark mode (Jannah toggles body.dark-skin) ------------------------- */

.dark-skin .techish-tweet {
	background: #15181c;
	border-color: #2c3036;
	color: #e7e9ea;
}

.dark-skin .techish-tweet__name { color: #e7e9ea; }
.dark-skin .techish-tweet__handle { color: #7aa6e6; }
.dark-skin .techish-tweet__brand { color: #e7e9ea; }
.dark-skin .techish-tweet__avatar { background: #2c3036; }
.dark-skin .techish-tweet__body { color: #e7e9ea; }
.dark-skin .techish-tweet__lnk,
.dark-skin .techish-tweet__view { color: #7aa6e6; }
.dark-skin .techish-tweet__meta { color: #71767b; }
.dark-skin .techish-tweet__stats {
	border-color: #2c3036;
	color: #8b98a5;
}
.dark-skin .techish-tweet__media { border-color: #2c3036; }

/* Respect reduced-motion / print: card is static, just ensure it prints clean */
@media print {
	.techish-tweet { break-inside: avoid; }
	.techish-tweet__brand,
	.techish-tweet__view svg { display: none; }
}