/* LocationCheck — single stylesheet, theme tokens shared with emailheaders.be */

:root {
  --bg: #f6f7fa; --surface: #fff; --surface-alt: #f0f2f6; --text: #1e2430; --muted: #5d6679;
  --border: #dcdfea; --accent: #0d6efd; --accent-text: #fff;
  --be: #19a86b; --be-bg: #e6f6ee; --eu: #a96a12; --eu-bg: #fdf3e1; --eu-pin: #e09a2b;
  --far: #d6455d; --far-bg: #fde8ec; --hid: #6b7488; --hid-bg: #eceef3; --bar: #e4e7ef; --sea: #d6e4f2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1623; --surface: #121a28; --surface-alt: #0e1420; --text: #e7ecf6; --muted: #aab5c7;
    --border: #243048; --accent: #4da3ff; --accent-text: #08121f;
    --be: #45c492; --be-bg: #12301f; --eu: #ffc658; --eu-bg: #33280f; --eu-pin: #e0a43a;
    --far: #ff6b81; --far-bg: #3a1620; --hid: #9aa5ba; --hid-bg: #1d2638; --bar: #1d2638; --sea: #0f3054;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1623; --surface: #121a28; --surface-alt: #0e1420; --text: #e7ecf6; --muted: #aab5c7;
  --border: #243048; --accent: #4da3ff; --accent-text: #08121f;
  --be: #45c492; --be-bg: #12301f; --eu: #ffc658; --eu-bg: #33280f; --eu-pin: #e0a43a;
  --far: #ff6b81; --far-bg: #3a1620; --hid: #9aa5ba; --hid-bg: #1d2638; --bar: #1d2638; --sea: #0f3054;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }

.wrap { max-width: 1100px; margin: 2rem auto; background: var(--surface); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03); padding: 1.5rem 2rem; }
@media (max-width: 640px) { .wrap { margin: 0; border-radius: 0; padding: 1rem 16px; } }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.5rem; flex-wrap: wrap; }
.logo { display: block; line-height: 0; }
.logo img { height: 50px; width: auto; max-width: 100%; }
.logo .logo-dark { display: none; }
:root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo .logo-dark { display: block; }
}
@media (max-width: 640px) { .logo img { height: 38px; } }
nav.main { display: flex; gap: 1.2rem; font-size: .95rem; }
nav.main a { color: var(--muted); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
nav.main a:hover { color: var(--text); }
nav.main a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.pills { display: flex; gap: .35rem; }
.pill { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 6px;
  padding: .25rem .55rem; font-size: .85rem; cursor: pointer; text-decoration: none; line-height: 1.4;
  display: inline-flex; align-items: center; }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* type */
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -.02em; margin: 2rem 0 .4rem; line-height: 1.15; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
h3 { font-size: 1rem; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 720px; margin: 0 0 1.4rem; }

/* search */
form.search { display: flex; gap: .5rem; max-width: 720px; }
form.search input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .7rem .9rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); color: var(--text); }
form.search input:focus, .form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.primary { display: inline-block; font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-text);
  border: 0; border-radius: 8px; padding: .7rem 1.2rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hint { color: var(--muted); font-size: .88rem; margin-top: .5rem; }
.alert { border-left: 4px solid var(--far); background: var(--far-bg); padding: .7rem 1rem; border-radius: 6px; }
.ok { border-left: 4px solid var(--be); background: var(--be-bg); padding: .7rem 1rem; border-radius: 6px; }

/* result */
.result-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  margin-top: 2.5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.result-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.4rem; }
.verdict { margin: 1rem 0; border-left: 4px solid var(--hid); background: var(--hid-bg); border-radius: 6px; padding: .8rem 1rem; }
.verdict.v-local { border-color: var(--be); background: var(--be-bg); }
.verdict.v-partly, .verdict.v-eu { border-color: var(--eu-pin); background: var(--eu-bg); }
.verdict.v-far { border-color: var(--far); background: var(--far-bg); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.tile { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; background: var(--surface-alt); }
.tile .k { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; color: var(--muted); }
.place + .place { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.place .where { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.place dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .7rem 0 0; font-size: .88rem; }
.place dt { color: var(--muted); } .place dd { margin: 0; overflow-wrap: anywhere; }
.place .note, .proxy { font-size: .86rem; color: var(--muted); margin: .6rem 0 0; }
.flag { font-size: 1.3rem; }
.tag { font-size: .72rem; border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; color: var(--muted); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; }
.badge.z-be { background: var(--be-bg); color: var(--be); }
.badge.z-eu { background: var(--eu-bg); color: var(--eu); }
.badge.z-far { background: var(--far-bg); color: var(--far); }
.badge.z-hidden, .badge.z-unknown { background: var(--hid-bg); color: var(--hid); }
.agency { margin: 1rem 0 0; font-size: .95rem; }
details.more { margin-top: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: .7rem 1rem; }
details.more summary { cursor: pointer; font-weight: 600; }
.places-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.places-grid .place + .place { margin: 0; padding: 0; border: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: .3rem .8rem; font: inherit; font-size: .84rem; text-decoration: none; cursor: pointer; }
.chip.on { border-color: var(--accent); color: var(--accent); }

/* maps */
.rmap, .map { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--sea); overflow: hidden; margin-top: 1rem; }
.rmap { aspect-ratio: 16 / 7; } .map { aspect-ratio: 900 / 620; }
@media (max-width: 640px) { .rmap { aspect-ratio: 4 / 3; } }
.rmap svg, .map svg { display: block; width: 100%; height: 100%; }
.land { fill: var(--surface); stroke: var(--border); stroke-width: .7; }
.land.be { fill: var(--be-bg); stroke: var(--be); }
.route { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.home circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.home text, .lbl { font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.home text { fill: var(--accent); font-weight: 700; }
.lbl { fill: var(--muted); }
.pin { cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: 50% 100%; }
.pin:hover, .pin.on, .pin:focus { transform: scale(1.15); outline: none; }
.pin.probable path, .pin.probable rect { fill-opacity: .45; stroke: var(--eu-pin); stroke-dasharray: 3 2; stroke-width: 1.5; }
.pin.probable .n { fill: var(--text); }
.pin .n { fill: #fff; font-weight: 700; font-size: 11px; text-anchor: middle; pointer-events: none; }
.f-be { fill: var(--be); } .f-eu { fill: var(--eu-pin); } .f-far { fill: var(--far); } .f-hidden, .f-unknown { fill: var(--hid); }
.layers { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.layers label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.layers .ico { color: var(--muted); }
.pin-ico { display: inline-block; width: 12px; height: 12px; background: var(--muted); }
.pin-ico.web { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.pin-ico.mail { border-radius: 3px; }
/* the off-map buttons (CDNs, Microsoft 365 …) sit underneath the map so they never cover pins */
.map { overflow: visible; aspect-ratio: auto; display: flex; flex-direction: column; }
.map > .offmap { order: 2; }
.map svg { aspect-ratio: 900 / 620; height: auto; border-radius: 12px 12px 0 0; }
.offmap { display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 12px 12px; }
.offmap:empty { display: none; }
@media (max-width: 640px) {
  .pop { left: 8px !important; right: 8px; max-width: none; }
  /* table rows become cards */
  /* header becomes a row of sort buttons above the cards */
  #mtable thead { display: block; }
  #mtable thead tr { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .6rem .8rem; }
  #mtable thead th { padding: 0; border: 0; background: none; }
  #mtable tr { display: block; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
  #mtable td { display: flex; gap: .6rem; padding: .15rem 0; border: 0; white-space: normal; min-width: 0; }
  #mtable td[data-l]::before { content: attr(data-l); flex: 0 0 6.5rem; color: var(--muted); font-size: .78rem; padding-top: .1rem; }
  #mtable td > div { min-width: 0; flex: 1; }
  #mtable td .ag { display: block; white-space: nowrap; }
td .sub { max-width: none; }
  #mtable td:first-child { display: block; margin-bottom: .3rem; }
}
.pop { position: absolute; min-width: 230px; max-width: 320px; max-height: 280px; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .7rem .9rem;
  font-size: .86rem; display: none; z-index: 2; }
.pop h3 { margin: 0 0 .4rem; font-size: .95rem; display: flex; justify-content: space-between; gap: .5rem; }
.pop ul { list-style: none; margin: 0; padding: 0; }
.pop li { padding: .25rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: .6rem; }
.pop li a { color: var(--text); font-weight: 600; text-decoration: none; }
.pop li span { color: var(--muted); font-size: .78rem; }
.pop .x { cursor: pointer; color: var(--muted); border: 0; background: none; font-size: 1.1rem; line-height: 1; }
.hidden { display: none !important; }

/* monitor */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.kpi { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.kpi .n { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .n small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.bar { height: 8px; background: var(--bar); border-radius: 4px; overflow: hidden; margin-top: .6rem; display: flex; }
.bar b { display: block; height: 100%; }
.bar .z-be { background: var(--be); } .bar .z-eu { background: var(--eu-pin); } .bar .z-far { background: var(--far); } .bar .z-hidden { background: var(--hid); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin: .8rem 0 0; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; background: var(--hid); }
.legend .z-be::before { background: var(--be); } .legend .z-eu::before { background: var(--eu-pin); } .legend .z-far::before { background: var(--far); }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: top; }
#mtable td:nth-child(2), #mtable td:nth-child(3) { white-space: normal; min-width: 180px; }
th { background: var(--surface-alt); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
th .sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; text-transform: inherit; letter-spacing: inherit; }
th .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th .arrow::after { content: "↕"; opacity: .35; }
th[aria-sort="ascending"] .arrow::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .arrow::after { content: "↓"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }
td a { color: var(--text); font-weight: 600; text-decoration: none; }
td a:hover { color: var(--accent); }
td .ag { display: block; white-space: nowrap; }
td .sub { display: block; font-size: .78rem; color: var(--muted); white-space: normal; max-width: 220px; }

/* home extras */
.teaser { margin-top: 2.5rem; border-radius: 12px; padding: 1.4rem 1.6rem; background: var(--surface-alt); border: 1px solid var(--border); }
.teaser h2 { margin-top: 0; border: 0; padding: 0; }
.teaser .big { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cards div { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.cards h3 { margin: 0 0 .3rem; }
.cards p { margin: 0; color: var(--muted); font-size: .92rem; }
.cta { margin-top: 1.5rem; border-radius: 12px; padding: 1.4rem 1.6rem; background: var(--be-bg);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cta h3 { margin: 0 0 .2rem; } .cta p { margin: 0; color: var(--muted); }

/* text pages, form */
.prose { max-width: 760px; } .prose p, .prose li { font-size: 1rem; }
.narrow { max-width: 640px; }
.form { display: grid; gap: .5rem; }
.form label { font-weight: 600; font-size: .92rem; margin-top: .5rem; }
.form label.inline { font-weight: 400; display: block; margin: .2rem 0; }
.form input:not([type=radio]), .form textarea { font: inherit; padding: .6rem .8rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-alt); color: var(--text); width: 100%; }
.form fieldset { border: 0; padding: 0; margin: .5rem 0 0; }
.form legend { font-weight: 600; font-size: .92rem; padding: 0; }
.form .primary { justify-self: start; margin-top: .5rem; }
.hp { position: absolute; left: -10000px; }

/* footer */
.foot { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.2rem; font-size: .88rem; color: var(--muted); }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.foot h2 { margin: 0 0 .4rem; padding: 0; border: 0; font-size: .9rem; color: var(--text); }
.foot a { display: block; color: var(--muted); text-decoration: none; padding: .1rem 0; }
.foot a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .top .pills, nav.main, .actions, .foot .cols, form.search { display: none; } .wrap { box-shadow: none; } }