/* Aka IP Lookup — "Vad är min IP?" med multi-provider-konsensus.
   Färgvärld matchar atdt-gp-aka-se: säker teal + varningsorange. */

.aka-ip {
	--aka-teal: #0c8577;
	--aka-orange: #e8590c;
	--aka-ink: #1a2b32;
	--aka-muted: #5f7681;
	--aka-line: #dbe5e8;
	--aka-bg: #f5f9fa;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--aka-ink);
	max-width: 900px;
	margin-inline: auto;
}

.aka-ip__ip {
	font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	word-break: break-all;
	padding: 0.6em 0.8em;
	background: var(--aka-bg);
	border: 1px solid var(--aka-line);
	border-left: 4px solid var(--aka-teal);
	border-radius: 8px;
	margin-bottom: 1rem;
}
.aka-ip__ip .aka-ip__ipver {
	font-size: 0.5em;
	font-weight: 500;
	color: var(--aka-muted);
	margin-left: 0.6em;
	vertical-align: middle;
}

.aka-ip__consensus {
	font-size: 0.95rem;
	color: var(--aka-muted);
	margin-bottom: 0.8rem;
}
.aka-ip__consensus strong { color: var(--aka-ink); }

.aka-ip__map {
	height: 440px;
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--aka-line);
	overflow: hidden;
	background: var(--aka-bg);
	z-index: 0;
}

/* Färgkodade CSS-pins (ingen beroende av Leaflets marker-PNG). */
.aka-ip-pin span {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--c, #444);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.aka-ip-centroid span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: transparent;
	border: 3px solid var(--aka-teal);
	box-shadow: 0 0 0 3px rgba(12, 133, 119, 0.25), inset 0 0 0 2px #fff;
}

/* Jämförelsetabell */
.aka-ip__providers { margin-top: 1.2rem; overflow-x: auto; }
.aka-ip__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.aka-ip__table th,
.aka-ip__table td {
	text-align: left;
	padding: 0.55em 0.7em;
	border-bottom: 1px solid var(--aka-line);
	white-space: nowrap;
}
.aka-ip__table th {
	font-weight: 600;
	color: var(--aka-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.aka-ip__table td.aka-ip__prov { white-space: normal; font-weight: 600; }
.aka-ip__swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	margin-right: 0.5em;
	vertical-align: -1px;
}
.aka-ip__coords { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85em; }
.aka-ip__flag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: #fff1e6;
	color: var(--aka-orange);
	border: 1px solid #ffd8bf;
	margin-right: 0.3em;
}
.aka-ip__dash { color: var(--aka-muted); }

.aka-ip__note {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--aka-muted);
	border-top: 1px dashed var(--aka-line);
	padding-top: 0.8rem;
}
.aka-ip__error {
	padding: 1rem;
	background: #fff1e6;
	border: 1px solid #ffd8bf;
	border-radius: 8px;
	color: var(--aka-orange);
}

@media (prefers-color-scheme: dark) {
	.aka-ip {
		--aka-ink: #e8f0f2;
		--aka-muted: #91a7b0;
		--aka-line: #2b3d44;
		--aka-bg: #16242a;
	}
	.aka-ip__flag { background: #3a2414; border-color: #5a3a1f; }
	.aka-ip__error { background: #3a2414; border-color: #5a3a1f; }
}