/* ---------------------------------------------------------------------------
 * The short domain's pages: a profile, a chat, an invite, and the two dead ends.
 *
 * Same skin as the site (WEBSITE/src/styles/brand.css) - palette, the armor
 * headers with their dashes, the 20px radius - but standing on its own: this is
 * served by the api, not by the site, and it loads nothing from anywhere. No
 * webfont either, which is a privacy answer as much as a speed one: a page whose
 * whole promise is "we can't read your messages" has no business asking google
 * for a typeface before it can say hello.
 * ------------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--accent		: #3390EC;
	--accent-deep	: #2F80E8;
	--accent-hover	: #5FAAF2;
	--ink			: #12161C;
	--ink-soft		: #626C78;
	--ink-faint		: #98A1AD;
	--surface		: #FFFFFF;
	--surface-alt	: #F1F4F8;
	--night			: #0A0C0F;
	--divider		: #0A0C0F14;
	--radius		: 20px;

	--sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 28px;
	padding: 28px 20px 22px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-soft);
	background: var(--surface-alt);
	-webkit-font-smoothing: antialiased;
	/* Two washes of the app's own blue and a tape of hairlines across them. The
	   lines are the armor block the whole brand leans on, turned into a texture
	   and taken down to where you only notice it if you look. */
	background-image:
		radial-gradient(820px 420px at 12% -12%, #3390EC1F, transparent 68%),
		radial-gradient(680px 380px at 108% 8%, #7C5CFF14, transparent 70%),
		repeating-linear-gradient(48deg, #0A0C0F08 0 1px, transparent 1px 13px);
	background-attachment: fixed;
}

a { color: var(--accent-deep); text-decoration: none; }
h1 { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }

/* the official tick rides the last line of the name, a hair under cap height */
h1 .official {
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.26em;
	vertical-align: -0.06em;
}

/* --- the lockup up top ---------------------------------------------------- */

.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	opacity: 0.85;
}

.brand img { width: 26px; height: 26px; border-radius: 8px; }

.brand span {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ink-soft);
}

/* --- the card ------------------------------------------------------------- */

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* the armor header, same one the site uses over every section */
.eyebrow {
	margin: 0;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent-deep);
	white-space: nowrap;
}

.eyebrow::before,
.eyebrow::after { content: '-----'; opacity: 0.45; letter-spacing: 0; }
.eyebrow::before { margin-right: 0.7em; }
.eyebrow::after { margin-left: 0.7em; }

.card {
	position: relative;
	width: min(100%, 384px);
	margin-top: 46px;
	padding: 62px 30px 30px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px -32px #0A0C0F40;
	animation: rise 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to	 { opacity: 1; transform: none; }
}

/* the face sits on the card's edge rather than inside it - half the reason the
   thing reads as a profile and not as a dialog box */
.face {
	position: absolute;
	top: -44px;
	left: 50%;
	width: 92px;
	height: 92px;
	transform: translateX(-50%);
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-alt);
	border: 4px solid var(--surface);
	box-shadow: 0 10px 30px -12px #2F80E866;
	animation: pop 0.44s cubic-bezier(0.2, 1.3, 0.4, 1) 0.08s both;
}

@keyframes pop {
	from { opacity: 0; transform: translateX(-50%) scale(0.86); }
	to	 { opacity: 1; transform: translateX(-50%) scale(1); }
}

.face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* no picture: the app's own letter avatar, same palette, same gradient, so a
   person keeps their colour between the two */
.face-mono {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	text-shadow: 0 1px 2px #0003;
}

/* the seven gradients the app draws letter avatars with, in the same order -
   see TINTS in page.js and AvatarPalette in the app */
.tint-0 { background: linear-gradient(180deg, #FF885E, #FF516A); }
.tint-1 { background: linear-gradient(180deg, #FFCD6A, #FFA85C); }
.tint-2 { background: linear-gradient(180deg, #82B1FF, #665FFF); }
.tint-3 { background: linear-gradient(180deg, #A0DE7E, #54CB68); }
.tint-4 { background: linear-gradient(180deg, #53EDD6, #28C9B7); }
.tint-5 { background: linear-gradient(180deg, #72D5FD, #2A9EF1); }
.tint-6 { background: linear-gradient(180deg, #E0A2F3, #D669ED); }

.handle {
	display: inline-block;
	margin: 7px 0 0;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--accent-deep);
	word-break: break-all;
}

.meta {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--ink-faint);
}

/* a perforation rather than a line: the card tears here, actions below */
.rule {
	height: 1px;
	margin: 26px -30px 24px;
	background: repeating-linear-gradient(90deg, #0A0C0F1F 0 5px, transparent 5px 11px);
}

.open {
	display: block;
	padding: 15px 22px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, var(--accent-hover) -35%, var(--accent) 45%, var(--accent-deep));
	box-shadow: 0 10px 24px -12px #2F80E8CC, inset 0 1px 0 #FFFFFF59;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.open:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 28px -12px #2F80E8CC, inset 0 1px 0 #FFFFFF59; }
.open:active { transform: translateY(1px); box-shadow: 0 6px 16px -12px #2F80E8CC, inset 0 1px 0 #FFFFFF40; }

.get {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	color: var(--ink-faint);
}

.get b { color: var(--accent-deep); font-weight: 600; }
.get:hover b { text-decoration: underline; }

/* --- the dead ends -------------------------------------------------------- */

.plain {
	width: min(100%, 384px);
	padding: 34px 30px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px -32px #0A0C0F40;
	animation: rise 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.plain p { margin: 10px 0 0; font-size: 15px; }

/* --- foot ----------------------------------------------------------------- */

footer {
	text-align: center;
	font-size: 12.5px;
	color: var(--ink-faint);
}

footer a { color: var(--ink-soft); }
footer a:hover { color: var(--accent-deep); }

@media (max-width: 380px) {
	.eyebrow::before, .eyebrow::after { content: none; }
	.card { padding: 58px 22px 26px; }
	.rule { margin-left: -22px; margin-right: -22px; }
}

@media (prefers-reduced-motion: reduce) {
	.card, .face, .plain { animation: none; }
	.open { transition: none; }
}