/* Neighborhood Network — following (Phase 24b) + recent profile views + lifecycle (Phase 46.5) */

#page-neighborhood-network.uc-nn-page {
	--nn-ink: var(--uc-text);
	--nn-muted: var(--uc-text-muted);
	--nn-line: var(--uc-border);
	--nn-red: var(--uc-primary-ink);
	--nn-gold: var(--uc-gold-dim);
	--nn-paper: var(--uc-surface-raised);
	background:
		radial-gradient(circle at 12% 0%, var(--uc-primary-wash), transparent 42%),
		radial-gradient(circle at 88% 8%, var(--uc-accent-wash), transparent 36%),
		var(--uc-surface-muted);
	min-height: 70vh;
}

#page-neighborhood-network .uc-nn-shell {
	max-width: 1100px;
}

#page-neighborhood-network .uc-nn-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding: 22px 22px 20px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 16px;
	background: linear-gradient(160deg, var(--uc-surface) 0%, var(--uc-surface-raised) 100%);
	box-shadow: 4px 4px 0 var(--uc-shadow-ink-soft);
}

#page-neighborhood-network .uc-nn-kicker {
	margin: 0;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nn-red);
}

#page-neighborhood-network .uc-nn-title {
	margin: 4px 0 6px;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--nn-ink);
}

#page-neighborhood-network .uc-nn-subtitle {
	margin: 0;
	max-width: 38rem;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--nn-muted);
}

#page-neighborhood-network .uc-nn-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#page-neighborhood-network .uc-nn-auth {
	margin-bottom: 18px;
	padding: 28px 20px;
	text-align: center;
	border: 2px dashed var(--nn-line);
	border-radius: 16px;
	background: var(--uc-surface);
}

#page-neighborhood-network .uc-nn-status {
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1.5px solid var(--nn-line);
	font-size: 12px;
	font-weight: 700;
	background: var(--uc-surface);
}

#page-neighborhood-network .uc-nn-status.is-error {
	border-color: var(--uc-danger-border);
	background: var(--uc-danger-surface);
	color: var(--uc-danger-text);
}

#page-neighborhood-network .uc-nn-status.is-success {
	border-color: var(--uc-success-border);
	background: var(--uc-success-surface);
	color: var(--uc-success-text);
}

#page-neighborhood-network .uc-nn-status.is-hint {
	border-color: var(--uc-warning-border);
	background: var(--uc-warning-surface);
	color: var(--uc-warning-text);
}

#page-neighborhood-network .uc-nn-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

@media (min-width: 768px) {
	#page-neighborhood-network .uc-nn-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

#page-neighborhood-network .uc-nn-stat {
	padding: 14px;
	border: 1.5px solid var(--nn-line);
	border-left: 4px solid var(--nn-gold);
	border-radius: 12px;
	background: var(--uc-surface);
}

#page-neighborhood-network .uc-nn-stat:nth-child(2) { border-left-color: var(--uc-primary); }

#page-neighborhood-network .uc-nn-stat-kicker {
	display: block;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nn-muted);
	margin-bottom: 6px;
}

#page-neighborhood-network .uc-nn-stat-value {
	display: block;
	font-size: 14px;
	font-weight: 900;
	color: var(--nn-ink);
	line-height: 1.3;
	word-break: break-word;
}

#page-neighborhood-network .uc-nn-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
}

#page-neighborhood-network .uc-nn-search {
	flex: 1 1 220px;
}

#page-neighborhood-network .uc-nn-search .uc-surface-input {
	width: 100%;
}

#page-neighborhood-network .uc-nn-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	#page-neighborhood-network .uc-nn-grid {
		grid-template-columns: 1.1fr 1fr;
	}

	#page-neighborhood-network .uc-nn-panel--created,
	#page-neighborhood-network .uc-nn-panel--residency {
		grid-column: 1 / -1;
	}
}

#page-neighborhood-network .uc-nn-panel {
	border: 2px solid var(--uc-border-strong);
	border-radius: 14px;
	background: var(--uc-surface);
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-soft);
	overflow: hidden;
	min-height: 220px;
}

#page-neighborhood-network .uc-nn-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1.5px solid var(--nn-line);
	background: var(--nn-paper);
}

#page-neighborhood-network .uc-nn-panel-title {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 900;
	color: var(--nn-ink);
}

#page-neighborhood-network .uc-nn-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1.5px solid var(--uc-border-strong);
	font-size: 11px;
	font-weight: 900;
	background: var(--uc-surface-soft);
}

#page-neighborhood-network .uc-nn-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	max-height: 420px;
	overflow: auto;
}

#page-neighborhood-network .uc-nn-empty {
	padding: 22px 12px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--nn-muted);
	border: 1px dashed var(--nn-line);
	border-radius: 10px;
	background: var(--uc-surface-soft);
}

#page-neighborhood-network .uc-nn-card {
	padding: 11px 12px;
	border: 1.5px solid var(--nn-line);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--uc-surface), var(--uc-surface-raised));
	transition: border-color 0.12s, transform 0.12s;
}

#page-neighborhood-network .uc-nn-card:hover {
	border-color: var(--uc-border);
	transform: translateY(-1px);
}

#page-neighborhood-network .uc-nn-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

#page-neighborhood-network .uc-nn-card-title {
	margin: 0;
	font-size: 13px;
	font-weight: 900;
	color: var(--nn-ink);
}

#page-neighborhood-network .uc-nn-card-meta {
	margin: 3px 0 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--nn-muted);
}

#page-neighborhood-network .uc-nn-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 7px 0 0;
}

#page-neighborhood-network .uc-nn-card-tags span {
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--nn-line);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text-secondary);
	background: var(--uc-surface-raised);
}

#page-neighborhood-network .uc-nn-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	flex: 0 0 auto;
}

#page-neighborhood-network .uc-nn-card-btn {
	padding: 5px 9px;
	border: 1.5px solid var(--uc-border-strong);
	border-radius: 8px;
	background: var(--uc-surface);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--nn-ink);
}

#page-neighborhood-network .uc-nn-card-btn:hover {
	background: var(--uc-surface-muted);
}

#page-neighborhood-network .uc-nn-card-btn.is-danger {
	background: var(--uc-danger-surface);
	border-color: var(--uc-danger-border);
	color: var(--uc-danger-text);
}

#page-neighborhood-network .uc-nn-card-btn.is-muted {
	opacity: 0.72;
	cursor: help;
	background: var(--uc-surface-muted);
	border-color: var(--nn-line);
	color: var(--nn-muted);
}

#page-neighborhood-network .uc-nn-card-btn.is-muted:hover {
	background: var(--uc-surface-muted);
}

/* Shutdown overlay reuses circles create shell; keep panel copy readable on network page. */
.uc-nn-shutdown-card .uc-circles-create-copy,
.uc-nn-shutdown-card #nn-shutdown-copy {
	padding: 0 20px 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--uc-text-muted, var(--nn-muted));
}

.uc-nn-shutdown-card .uc-circles-create-actions {
	padding: 12px 20px 20px;
	gap: 10px;
}

.uc-nn-overlay-status {
	margin: 0 20px 8px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.uc-nn-overlay-status.hidden {
	display: none !important;
}

.uc-nn-overlay-status.is-error {
	background: var(--uc-danger-surface);
	border: 1px solid var(--uc-danger-border);
	color: var(--uc-danger-text);
}

.uc-nn-overlay-status.is-hint {
	background: var(--uc-warning-surface);
	border: 1px solid var(--uc-warning-border);
	color: var(--uc-warning-text);
}

.uc-nn-overlay-status.is-success {
	background: var(--uc-success-surface, var(--uc-surface-muted));
	border: 1px solid var(--uc-success-border, var(--nn-line));
	color: var(--uc-success-text, var(--nn-ink));
}

#page-neighborhood-network .uc-nn-residency-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#page-neighborhood-network .uc-nn-residency-card {
	padding: 12px;
	border: 1.5px solid var(--nn-line);
	border-radius: 12px;
	background: var(--uc-warning-surface);
}

#page-neighborhood-network .uc-nn-residency-card strong {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--nn-ink);
}

#page-neighborhood-network .uc-nn-move-card {
	padding: 12px;
	border: 1.5px solid var(--uc-warning-border);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--uc-warning-surface) 0%, var(--uc-surface-muted) 100%);
}

#page-neighborhood-network .uc-nn-move-card strong {
	display: block;
	margin: 4px 0 10px;
	font-size: 13px;
	font-weight: 900;
	color: var(--uc-warning-text);
}

#page-neighborhood-network .uc-nn-move-card .uc-nn-card-btn {
	margin-top: 4px;
}

#page-neighborhood-network .uc-nn-hint {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--nn-muted);
}

#page-neighborhood-network .uc-nn-hint--panel {
	padding: 10px 14px 0;
}

#page-neighborhood-network .uc-nn-inline-link {
	border: 0;
	background: transparent;
	padding: 0;
	color: var(--nn-red);
	font: inherit;
	font-weight: 800;
	text-decoration: underline;
	cursor: pointer;
}

#page-neighborhood-network .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}