/* ==========================================================================
   Coded TikTok-style profile inside the hero phone (front page only)
   ========================================================================== */
.phone__screen--tt { background: var(--bg); }
.tt {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	color: var(--ink); text-decoration: none;
	overflow: hidden;
	font-family: var(--font-body);
}
.tt:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 35px; }

/* status / title bar */
.tt__bar { display: flex; justify-content: center; align-items: center; padding: 22px 16px 6px; }
.tt__bar-handle { font-weight: 700; font-size: .82rem; letter-spacing: .01em; }

/* profile head */
.tt__head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px 12px; text-align: center; }
.tt__avatar {
	width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
	background: var(--surface-2);
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
	flex: none;
}
.tt__avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 22%; display: block; }
.tt__user { font-weight: 700; font-size: .92rem; margin-top: 4px; }

.tt__stats { display: flex; justify-content: center; gap: 0; width: 100%; margin-top: 2px; }
.tt__stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
.tt__stat + .tt__stat::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.tt__stat strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.01em; }
.tt__stat:nth-child(2) strong { color: var(--accent); }
.tt__stat small { font-size: .68rem; color: var(--muted); }

.tt__actions { display: flex; gap: 6px; margin-top: 4px; }
.tt__follow, .tt__msg { display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: 6px; font-weight: 700; font-size: .8rem; }
.tt__follow { width: 112px; background: var(--accent); color: var(--accent-ink); }
.tt__msg { width: 84px; background: var(--surface-2); color: var(--ink); }
.tt:hover .tt__follow { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }

.tt__bio { font-size: .74rem; color: var(--ink); opacity: .85; line-height: 1.35; max-width: 92%; }

/* tabs */
.tt__tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--line); margin-top: 2px; }
.tt__tab { width: 34%; height: 34px; position: relative; }
.tt__tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); background:
	linear-gradient(var(--ink) 0 0) 0 0 / 6px 6px no-repeat,
	linear-gradient(var(--ink) 0 0) 100% 0 / 6px 6px no-repeat,
	linear-gradient(var(--ink) 0 0) 0 100% / 6px 6px no-repeat,
	linear-gradient(var(--ink) 0 0) 100% 100% / 6px 6px no-repeat; }
.tt__tab.is-active::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; background: var(--ink); }

/* video grid */
.tt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-top: 2px; }
.tt__tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background:
	linear-gradient(160deg, var(--surface-2), var(--surface)); }
.tt__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.tt:hover .tt__thumb { transform: scale(1.04); }
.tt__tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); pointer-events: none; }
.tt__views { position: absolute; left: 5px; bottom: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 2px; font-size: .66rem; font-weight: 700; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.tt__views svg { width: 11px; height: 11px; }
.tt__pin { position: absolute; left: 4px; top: 4px; z-index: 1; background: var(--accent); color: var(--accent-ink); font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

@media (max-width: 520px) {
	.tt__avatar { width: 70px; height: 70px; }
	.tt__head { gap: 6px; padding-top: 6px; }
	.tt__bio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tt__thumb { transition: none; }
	.tt:hover .tt__thumb { transform: none; }
}

/* Keep the live-views card off the profile header on smaller screens */
@media (max-width: 900px) {
	.hero__visual .float-card { top: auto; bottom: 16%; left: -18%; }
}
@media (max-width: 600px) {
	.hero__visual .float-card { display: none; }
}