/*
 * Help Nagaland Child — components.css
 *
 * Additional small components not already defined in style.css: tags,
 * status chips, badge, status dot, data tables, definition-style KPI
 * blocks. Kept small — if a component grows beyond a few rules, it
 * belongs in its own file.
 */

/* ==========================================================================
   TAG / CHIP
   ========================================================================== */

.hnc-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	background-color: var(--hnc-bg-card);
	border: 1px solid var(--hnc-border);
	border-radius: 9999px;
	color: var(--hnc-fg-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.hnc-tag-accent {
	background-color: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.35);
	color: var(--hnc-green);
}

.hnc-tag-warn {
	background-color: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.35);
	color: var(--hnc-amber);
}

.hnc-tag-danger {
	background-color: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.35);
	color: var(--hnc-red);
}


/* ==========================================================================
   STATUS DOT
   ========================================================================== */

.hnc-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--hnc-fg-subtle);
	vertical-align: middle;
	margin-right: 0.35rem;
}

.hnc-dot-green  { background-color: var(--hnc-green); }
.hnc-dot-red    { background-color: var(--hnc-red); }
.hnc-dot-amber  { background-color: var(--hnc-amber); }
.hnc-dot-blue   { background-color: var(--hnc-blue); }


/* ==========================================================================
   BADGE
   ========================================================================== */

.hnc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.5rem;
	background-color: var(--hnc-bg-card);
	border: 1px solid var(--hnc-border);
	color: var(--hnc-fg);
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hnc-badge-verified {
	background-color: rgba(16, 185, 129, 0.18);
	border-color: rgba(16, 185, 129, 0.45);
	color: var(--hnc-green);
}


/* ==========================================================================
   KPI BLOCK (used on transparency / dashboard surfaces)
   ========================================================================== */

.hnc-kpi {
	background-color: var(--hnc-bg-card);
	border: 1px solid var(--hnc-border);
	border-radius: var(--hnc-radius-lg);
	padding: 1.25rem 1.25rem;
}

.hnc-kpi-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hnc-fg-subtle);
	margin: 0 0 0.35rem;
}

.hnc-kpi-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--hnc-fg);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hnc-kpi-note {
	color: var(--hnc-fg-muted);
	font-size: 0.8125rem;
	margin: 0.35rem 0 0;
}


/* ==========================================================================
   LINK LIST (used on index-style legal pages)
   ========================================================================== */

.hnc-link-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.hnc-link-list li {
	border-bottom: 1px solid var(--hnc-border);
}

.hnc-link-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 0.25rem;
	color: var(--hnc-fg);
	text-decoration: none;
	transition: color 120ms ease, padding-left 120ms ease;
}

.hnc-link-list a::after {
	content: "\2192";
	color: var(--hnc-fg-subtle);
	transition: transform 120ms ease, color 120ms ease;
}

.hnc-link-list a:hover,
.hnc-link-list a:focus-visible {
	color: var(--hnc-green);
	padding-left: 0.35rem;
}

.hnc-link-list a:hover::after,
.hnc-link-list a:focus-visible::after {
	color: var(--hnc-green);
	transform: translateX(3px);
}