/* ==========================================================================
   3A Digital — AI Communication Hub diagram
   The stage is drawn at a fixed size and scaled to fit, so the proportions
   stay exactly as designed at every width.
   ========================================================================== */

.tt-aihub {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--color-bg, #f3f2f2);
	color: var(--color-text, #201e1d);
	font-family: var(--font-body, system-ui, sans-serif);
}

.tt-aihub__stage {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}

.tt-aihub__svg {
	position: absolute;
	inset: 0;
	overflow: visible;
}

/* ------------------------------------------------------ group headings --- */

.tt-aihub__group {
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--color-text);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.tt-aihub__count { color: var(--color-accent-700); }

/* ---------------------------------------------------------------- nodes --- */

.tt-aihub__node {
	position: absolute;
	box-sizing: border-box;
	background: var(--color-bg);
	border: 2px solid var(--color-text);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 0 12px;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.tt-aihub__node.is-tile {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.tt-aihub__ic {
	display: flex;
	color: var(--color-text);
	transition: color 0.3s ease;
}
.tt-aihub__ic svg { display: block; }

.tt-aihub__label {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	white-space: nowrap;
}

.tt-aihub__dot {
	position: absolute;
	right: -2px;
	top: -2px;
	width: 8px;
	height: 8px;
	background: var(--color-accent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* A node lights up as a packet reaches it. */
.tt-aihub__node.is-live { border-color: var(--color-accent); background: var(--color-accent-100); }
.tt-aihub__node.is-live .tt-aihub__ic { color: var(--color-accent-700); }
.tt-aihub__node.is-live .tt-aihub__dot { opacity: 1; }

/* ----------------------------------------------------------------- core --- */

.tt-aihub__core {
	position: absolute;
	box-sizing: border-box;
	background: var(--color-text);
	color: var(--color-neutral-100);
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: var(--shadow-lg);
}

.tt-aihub__core-top { display: flex; justify-content: space-between; align-items: flex-start; }

.tt-aihub__core-mark {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--color-accent-500);
}

.tt-aihub__core-dot { width: 10px; height: 10px; background: var(--color-accent); }

.tt-aihub__core-foot { display: flex; flex-direction: column; gap: 6px; }

.tt-aihub__core-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	font-size: 11px;
	line-height: 1.15;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tt-aihub__core-status {
	display: block;
	border-top: 1px solid var(--color-neutral-700);
	padding-top: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-neutral-300);
}

/* The mobile core is 116px square, and "Communication" at the desktop size
   runs straight out of it — step the two lines down so both fit. */
.tt-aihub__stage.is-mobile .tt-aihub__core { overflow: hidden; }
.tt-aihub__stage.is-mobile .tt-aihub__core-title { font-size: 9.5px; letter-spacing: 0.05em; }
.tt-aihub__stage.is-mobile .tt-aihub__core-status { font-size: 9px; letter-spacing: 0.02em; line-height: 1.25; }

/* -------------------------------------------------------------- API bar --- */

.tt-aihub__api {
	position: absolute;
	box-sizing: border-box;
	background: var(--color-accent-700);
	color: var(--color-neutral-100);
	padding: 0 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tt-aihub__api-ic { display: flex; }
.tt-aihub__api-ic svg { display: block; }

.tt-aihub__api-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.tt-aihub__api-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	font-size: 17px;
	letter-spacing: -0.01em;
	line-height: 1;
}

.tt-aihub__api-ticker {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tt-aihub__api-badge {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight, 800);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1.5px solid var(--color-neutral-100);
	padding: 3px 6px;
	white-space: nowrap;
}

/* ------------------------------------------------- the no-JS fallback ---- */

.tt-aihub__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Without JS the stage is never built, so show the plain list instead. */
.no-js .tt-aihub { height: auto !important; }
.no-js .tt-aihub__sr {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	.tt-aihub__node,
	.tt-aihub__ic,
	.tt-aihub__dot { transition: none; }
}