/*
 * FindMyIP visual layer ("Signal"): glass header with instant search, radar-grid hero, lifted
 * cards with gradient edges, dark footer band, reading progress and an active table of contents.
 * Sits on top of site.css (layout and the tool widgets). Logical properties keep RTL right.
 */
:root {
	--grad: linear-gradient(120deg, #1D4ED8 0%, #4F46E5 45%, #EE4E2B 100%);
	--grad-soft: linear-gradient(120deg, rgb(29 78 216 / .14), rgb(238 78 43 / .10));
	--shadow-sm: 0 1px 2px rgb(13 26 43 / .06), 0 2px 8px rgb(13 26 43 / .05);
	--shadow-md: 0 10px 30px -12px rgb(13 26 43 / .28), 0 2px 6px rgb(13 26 43 / .06);
	--glass: rgb(255 255 255 / .78);
	--grid-line: rgb(29 78 216 / .07);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --glass: rgb(16 26 42 / .78); --grid-line: rgb(124 157 255 / .07); --shadow-md: 0 14px 34px -14px rgb(0 0 0 / .7); }
}
:root[data-theme="dark"] { --glass: rgb(16 26 42 / .78); --grid-line: rgb(124 157 255 / .07); --shadow-md: 0 14px 34px -14px rgb(0 0 0 / .7); }

h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.screen-reader-text { inset-inline-start: 0; top: 0; }

::selection { background: rgb(29 78 216 / .2); }

/* ---------- header ---------- */
.top { background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: transparent; }
.top::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.top .wrap { gap: 12px; }
.search-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 12px 8px; flex: none;
	border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted);
	font: 500 14px var(--f-body); cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s;
}
.search-btn:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-kbd, .sx kbd {
	font: 600 11px/1 var(--f-mono); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line);
	background: var(--sunk); color: var(--muted); letter-spacing: 0;
}
@media (max-width: 1240px) { .search-btn-text, .search-kbd { display: none; } .search-btn { width: 38px; padding: 0; justify-content: center; } }
@media (max-width: 1080px) { .top .search-btn { order: 2; } }
@media (max-width: 600px) {
	.top .wrap { gap: 8px; }
	.top .logo { font-size: 17px; gap: 7px; }
	.top .logo-mark { width: 26px; height: 26px; }
	.top .lang-menu summary span { display: none; }
	.top .menu-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
	.menu-btn-text { display: none; }
}
@media (max-width: 380px) { .top .wrap { gap: 6px; } .top .logo span { font-size: 14.5px; } .top .theme-btn { display: none; } }

.read-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 40; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .read-progress i { transform-origin: 100% 50%; }
body:not(.kind-article) .read-progress { display: none; }

@media (max-width: 1080px) { .top .menu-btn { display: inline-flex; align-items: center; gap: 6px; } }
@media (min-width: 1081px) { .top .menu-btn svg { display: none; } }

/* ---------- hero ---------- */
.hero--fx, .tool-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 30%, transparent 75%);
}
.hero-bg::after {
	content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%;
	background: radial-gradient(closest-side, rgb(79 70 229 / .16), transparent 70%), radial-gradient(closest-side at 70% 70%, rgb(238 78 43 / .10), transparent 70%);
	filter: blur(10px);
}
.hero--fx .hero-id { position: relative; }
.hero--fx .hero-id h1 span { color: var(--accent); }
.hero--fx .ip-big:not(.is-loading) { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--fx .map { box-shadow: var(--shadow-md); border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.hero--fx .map::before { content: ""; position: absolute; }
.cli-hint { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- section headings ---------- */
.section-head .eyebrow, .page-head > .eyebrow, .tool-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.section-head .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }

/* ---------- cards ---------- */
.tool, .pcard, .panel, .log, .faq details { box-shadow: var(--shadow-sm); }
.tool, .pcard { position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.tool:hover, .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.tool .ico { background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgb(29 78 216 / .14); transition: transform .2s; }
.tool:hover .ico { transform: scale(1.06) rotate(-4deg); }
.tool h3 { font-size: 17px; }
.pcard.lead { background: var(--grad); border: 0; }
.pcard.lead:hover { background: var(--grad); }
.pcard h3 { line-height: 1.2; }

.lookup { background: radial-gradient(120% 140% at 0% 0%, #1E3A8A 0%, var(--band) 55%), var(--band); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.lookup::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgb(255 255 255 / .04); pointer-events: none; }

.faq details { transition: border-color .15s; }
.faq details[open] { border-color: var(--accent); }

/* ---------- tool pages ---------- */
.tool-hero { background: var(--surface); }
.tool-title { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.tool-title h1 { margin-top: 0; }
.ico--lg { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 10px 24px -10px rgb(79 70 229 / .7); }
@media (max-width: 600px) { .ico--lg { width: 42px; height: 42px; border-radius: 12px; } .ico--lg svg { width: 22px; height: 22px; } }
.fmil-tool { gap: 18px; }
.fmil-form { padding: clamp(18px, 2.4vw, 26px); border-radius: 16px; box-shadow: var(--shadow-md); }
.fmil-form .fmil-label { font-size: 13px; letter-spacing: .01em; color: var(--muted); }
/* Results: one padded panel under the form, so nothing touches the edges. */
.fmil-out:not(:empty) {
	padding: clamp(16px, 2.6vw, 28px); gap: 20px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm);
	animation: fmil-in .22s ease both;
}
@keyframes fmil-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fmil-out > .fmil-msg:only-child { margin: -4px; }
.fmil-out .fmil-report-head { padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.fmil-out :is(.fmil-grid, .fmil-table-wrap, .fmil-map-wrap) { box-shadow: none; }
.fmil-out .fmil-h { margin-top: 10px; padding-top: 4px; font-size: 19px; }
.fmil-out .fmil-h::before { content: ""; width: 4px; align-self: stretch; border-radius: 4px; background: var(--grad); }
.fmil-out details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--bg); }
.fmil-out details > summary { cursor: pointer; font-weight: 600; }
.fmil-out pre { margin: 12px 0 0; max-height: 420px; overflow: auto; padding: 14px; border-radius: 10px; background: var(--sunk); font-size: 13px; }
@media (max-width: 600px) { .fmil-grid > div { padding: 12px 14px; } .fmil-form .fmil-btn { flex: 1 1 100%; } }

/* ---------- articles ---------- */
.article-figure svg { box-shadow: var(--shadow-md); }
.article-figure--img img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.side-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; counter-reset: toc; max-height: 46vh; overflow: auto; }
.side-toc li { counter-increment: toc; }
.side-toc a { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 6px 8px; border-radius: 8px; color: var(--muted); line-height: 1.35; text-decoration: none; border-inline-start: 2px solid transparent; }
.side-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 11px/1.9 var(--f-mono); color: var(--line); }
.side-toc a:hover { background: var(--sunk); color: var(--ink); }
.side-toc a[aria-current] { color: var(--accent); background: var(--accent-soft); border-inline-start-color: var(--accent); }
.side-toc a[aria-current]::before { color: var(--accent); }
@media (min-width: 1081px) { .article-main > .toc { display: none; } }
.toc a[aria-current] { font-weight: 700; }
.prose h2, .prose h3 { position: relative; scroll-margin-top: 90px; }
.h-anchor { margin-inline-start: 8px; font-family: var(--f-mono); font-weight: 500; color: var(--line); text-decoration: none !important; opacity: 0; transition: opacity .15s; }
.prose h2:hover .h-anchor, .prose h3:hover .h-anchor, .h-anchor:focus { opacity: 1; }
.h-anchor:hover { color: var(--accent); }
.prose pre.has-copy { position: relative; padding-inline-end: 72px; }
.code-copy { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; font: 600 12px var(--f-body); padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.code-copy:hover { color: var(--accent); border-color: var(--accent); }
.prose .table-wrap { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.author-box { background: var(--grad-soft); border: 0; }
.router-page .article { max-width: var(--wrap); }

/* ---------- guide list filter ---------- */
.list-filter { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.list-filter input { flex: 0 1 380px; min-width: 0; font: 500 15px var(--f-body); padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.list-filter input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.list-count { font: 500 13px var(--f-mono); color: var(--muted); }
.pcard[hidden] { display: none; }

/* ---------- search results page ---------- */
.search-page-form { max-width: 640px; margin-bottom: 26px; }
.search-page-form input { background: var(--surface); border: 1px solid var(--line); }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.sr-list a { display: grid; gap: 6px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); box-shadow: var(--shadow-sm); }
.sr-list a:hover { text-decoration: none; border-color: var(--accent); }
.sr-list h2 { font-size: 20px; }
.sr-list p { color: var(--muted); font-size: 15px; }
.empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- instant search dialog ---------- */
html.sx-open { overflow: hidden; }
.sx { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: max(9vh, 16px) 16px 16px; }
.sx[hidden] { display: none; }
.sx-backdrop { position: absolute; inset: 0; background: rgb(8 14 26 / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .16s; }
.sx-panel {
	position: relative; width: min(680px, 100%); max-height: min(640px, 82vh); display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5);
	overflow: hidden; transform: translateY(-8px) scale(.98); opacity: 0; transition: transform .16s ease, opacity .16s ease;
}
.sx.is-open .sx-backdrop { opacity: 1; }
.sx.is-open .sx-panel { transform: none; opacity: 1; }
.sx-form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.sx-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 18px var(--f-body); padding: 6px 0; }
.sx-form input::-webkit-search-cancel-button { display: none; }
.sx-esc { border: 0; background: none; padding: 0; cursor: pointer; }
.sx-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); opacity: 0; }
.sx.is-busy .sx-spin { opacity: 1; animation: sx-spin .7s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-body { overflow: auto; padding: 8px; overscroll-behavior: contain; }
.sx-head { font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 6px; }
.sx-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none !important; }
.sx-item[aria-selected] { background: var(--accent-soft); }
.sx-ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--sunk); color: var(--accent); }
.sx-item[aria-selected] .sx-ico { background: var(--grad); color: #fff; }
.sx-ico svg { width: 18px; height: 18px; }
.sx-text { display: grid; gap: 2px; min-width: 0; }
.sx-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-label { font: 500 11px var(--f-mono); color: var(--muted); margin-inline-start: 6px; }
.sx-desc { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-item mark { background: none; color: var(--accent); font-weight: 700; }
.sx-go { font: 600 14px var(--f-mono); color: var(--muted); opacity: 0; }
.sx-item[aria-selected] .sx-go { opacity: 1; }
.sx-group--all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sx-empty { padding: 18px 10px 6px; color: var(--muted); }
.sx-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--sunk); }
.sx-foot kbd { margin-inline-end: 3px; }
@media (max-width: 600px) {
	.sx { padding: 0; }
	.sx-panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
	.sx-foot { display: none; }
}

/* ---------- footer ---------- */
.foot { background: #0A1424; color: #C9D4E5; position: relative; border-top: 0; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--grad); }
.foot h4 { color: #fff; }
.foot a, .foot .menu a { color: #C9D4E5; }
.foot a:hover, .foot .menu a:hover { color: #fff; }
.foot .logo { color: #fff; }
.foot .logo b { color: #8EA8FF; }
.foot p, .foot .legal { color: #93A3BA; }
.foot .legal { border-top-color: #1F2C42; }

/* ---------- back to top ---------- */
.to-top { position: fixed; inset-block-end: max(18px, env(safe-area-inset-bottom)); inset-inline-end: 18px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: var(--shadow-md); cursor: pointer; }
.to-top[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.tool:hover, .pcard:hover { transform: none; }
}