/* WhoSeesMyIP: a mid-2000s utility site on purpose (owner, 5 Nov 2026). Fixed-width box, glossy header bar,
   grey tabs, Verdana, blue underlined links, the yellow "Your IP Address Is" box, outset buttons.
   One light look only: sites of that time had no dark mode. */
:root {
  color-scheme: light;
  --page: #dfe6ef;
  --box: #ffffff;
  --rule: #9fb2c8;
  --head-a: #3f74b8;
  --head-b: #1d4a87;
  --ink: #222222;
  --soft: #555555;
  --link: #0033cc;
  --link-v: #551a8b;
  --ipbox: #ffffcc;
  --ip: #cc0000;
  --row: #f2f5f9;
  --seen: #cc0000;
  --hid: #008800;
  --warn: #cc6600;
  --ad: #fff8e1;
  --ad-rule: #e0b040;
  --nord: #2a5fd6;
  --f: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
  --f-head: "Trebuchet MS", Tahoma, Verdana, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0; background: var(--page); color: var(--ink); font-family: var(--f); font-size: 12px; line-height: 1.45;
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) 24px max(12px, env(safe-area-inset-left, 0px));
}
a { color: var(--link); } a:visited { color: var(--link-v); } a:hover { color: #cc0000; }
img { max-width: 100%; }
.page { max-width: 800px; margin: 0 auto; background: var(--box); border: 1px solid var(--rule); box-shadow: 2px 2px 0 rgb(0 0 0 / .08); }

.head { background: linear-gradient(180deg, var(--head-a), var(--head-b)); border-bottom: 3px solid #f0b000; padding: 12px 14px 10px; }
.logo { font-family: "Arial Black", Arial, var(--f-head); font-size: 26px; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: -.5px; text-shadow: 1px 1px 0 #0c2a55, 2px 2px 0 rgb(0 0 0 / .25); line-height: 1; display: inline-block; }
.logo:visited, .logo:hover { color: #fff; }
.logo small { display: block; font-family: var(--f); font-size: 10px; font-weight: normal; letter-spacing: 0; text-shadow: none; color: #d6e4f7; margin-top: 4px; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; background: #c9d3df; padding: 4px 6px 0; border-bottom: 1px solid var(--rule); }
.tabs a { font-size: 11px; font-weight: bold; text-decoration: none; color: #1d3f6e; background: linear-gradient(#f7f7f7, #e4e4e4); border: 1px solid #a9a9a9; border-bottom: 0; padding: 4px 10px 3px; }
.tabs a.on { background: #fff; color: #000; position: relative; top: 1px; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; padding: 14px; }
.main { min-width: 0; }

h1 { font-family: var(--f-head); font-size: 18px; color: #1d4a87; margin: 0 0 8px; }
h2 { font-family: var(--f-head); font-size: 14px; color: #fff; background: linear-gradient(#6d8fbf, #4a6fa3); margin: 12px 0 0; padding: 4px 8px; }
p { margin: 0 0 8px; }

.ipbox { background: var(--ipbox); border: 2px solid #e2cf6a; padding: 10px 12px 12px; text-align: center; margin-bottom: 10px; }
.ipbox .lbl { font-size: 13px; font-weight: bold; }
.ipbox .ip { font-family: Tahoma, Verdana, sans-serif; font-size: clamp(22px, 6.5vw, 40px); font-weight: bold; color: var(--ip); letter-spacing: 1px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ipbox .where { font-size: 12px; margin-top: 2px; }
.ipbox .note { font-size: 10px; color: var(--soft); margin-top: 4px; }
.ipbtns { margin-top: 8px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
#beforeafter { border: 1px solid var(--rule); background: #f6f9fd; padding: 7px 9px; margin-bottom: 10px; font-size: 11.5px; }
#beforeafter .chg { font-weight: bold; color: var(--hid); }
#beforeafter .same { font-weight: bold; color: var(--warn); }
.ipbox .copy { font-size: 10px; padding: 2px 7px; vertical-align: middle; position: relative; top: -4px; }
.map { position: relative; border: 1px solid var(--rule); margin-bottom: 10px; line-height: 0; background: #bcd7ef; }
.map img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 290; }
.map .dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e00000; border: 2px solid #fff; box-shadow: 0 0 0 1px #900, 0 0 0 6px rgb(224 0 0 / .25); }
.map .cap { position: absolute; left: 0; bottom: 0; line-height: 1.3; font-size: 10px; background: rgb(255 255 255 / .85); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 2px 6px; }
@media (prefers-reduced-motion: no-preference) { .map .dot { animation: ping 1.6s ease-out infinite; } }
@keyframes ping { 0% { box-shadow: 0 0 0 1px #900, 0 0 0 0 rgb(224 0 0 / .45); } 100% { box-shadow: 0 0 0 1px #900, 0 0 0 12px rgb(224 0 0 / 0); } }
.flag { display: inline-block; width: 16px; height: 12px; vertical-align: -1px; border: 1px solid #999; }

.alert { border: 1px solid #e3a0a0; background: #fff0f0; color: #8a0000; padding: 7px 9px; margin-bottom: 10px; }
.alert.ok { border-color: #9fd19f; background: #effaef; color: #0a5d0a; }
.alert.info { border-color: #b9c8da; background: #f1f5fa; color: #1d3f6e; }
.alert.warn { border-color: #e8c27a; background: #fff7e6; color: #7a4a00; }
.alert b { font-size: 12.5px; }

.btnrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.btn { font: bold 11px var(--f); color: #000; background: linear-gradient(#ffffff, #d9d9d9); border: 2px outset #e8e8e8; padding: 4px 10px; cursor: pointer; }
.btn:active, .btn[aria-pressed="true"] { border-style: inset; background: #d4d4d4; }
.btn:focus-visible, .go:focus-visible, a:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.hint { font-size: 10.5px; color: var(--soft); }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-top: 0; margin-bottom: 12px; }
table.details { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.details th { text-align: right; width: 30%; padding: 4px 8px; font-weight: bold; color: #333; vertical-align: top; white-space: nowrap; }
table.details td { padding: 4px 8px; vertical-align: top; }
table.details thead { background: #e8edf4; }
table.details tbody tr:nth-child(even) { background: var(--row); }
table.compare th { text-align: left; width: auto; }
table.compare td { min-width: 9em; }
.val { font-family: "Courier New", Courier, monospace; font-size: 12px; overflow-wrap: anywhere; }
.st { font-size: 10px; font-weight: bold; text-transform: uppercase; white-space: nowrap; width: 1%; }
.st.seen { color: var(--seen); } .st.hid { color: var(--hid); } .st.warn { color: var(--warn); } .st.info { color: #777; }
.note { display: block; font-size: 10.5px; color: var(--soft); }
tr.preview .val { color: #1d3f6e; }
tr.preview .note { display: none; }

.errbox { border: 1px solid #b0b0b0; background: #f4f4f4; border-left: 4px solid #888; padding: 7px 9px; margin-bottom: 10px; font-size: 11.5px; }
.svc { line-height: 1.8; }
.inad { border: 1px dashed var(--ad-rule); background: var(--ad); padding: 7px 9px; margin: 0 0 12px; font-size: 11.5px; }
.inad a { font-weight: bold; }

.text h3 { font-family: var(--f-head); font-size: 13px; color: #1d4a87; margin: 12px 0 4px; border-bottom: 1px dotted var(--rule); padding-bottom: 2px; }
.text ol, .text ul { margin: 0 0 8px; padding-left: 20px; }
.text li { margin: 2px 0; }

.side { min-width: 0; display: grid; gap: 12px; align-content: start; }
.sbox { border: 1px solid var(--rule); }
.sbox .t { background: linear-gradient(#eef2f7, #d6dfea); border-bottom: 1px solid var(--rule); font-weight: bold; font-size: 11px; padding: 3px 6px; color: #1d3f6e; }
.sbox .b { padding: 6px; font-size: 11px; }
.sbox ul { margin: 0; padding-left: 16px; }
.sbox li { margin: 2px 0; }
.adbox { border: 2px solid var(--ad-rule); background: var(--ad); padding: 8px; font-size: 11px; text-align: center; }
.adbox .big { font-family: var(--f-head); font-size: 15px; font-weight: bold; color: #b00000; line-height: 1.2; margin-bottom: 4px; }
.adbox .deal { margin-top: 5px; font-weight: bold; color: #b00000; }
.adbox ul { text-align: left; margin: 6px 0; padding-left: 16px; }
.go { display: block; margin-top: 6px; font: bold 12px var(--f); color: #fff; text-decoration: none; background: linear-gradient(#4f86f0, var(--nord)); border: 1px solid #1b46a8; padding: 6px 4px; }
.go:visited, .go:hover { color: #fff; }
.adlbl { display: inline-block; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.adbox .adlbl { display: block; margin-top: 4px; }

.foot { border-top: 1px solid var(--rule); background: #eef2f7; padding: 8px 14px; font-size: 10px; color: var(--soft); text-align: center; }
.foot a { color: var(--soft); }

@media (max-width: 640px) {
  body { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .cols { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  table.details:not(.compare) th { width: 38%; white-space: normal; }
}

tr.mine { background: #fff7c2 !important; }

/* Is this Wi-Fi safe?: the questions only the visitor can answer. app.js shows the picked answer's advice (.on);
   :has() does it where JavaScript is off. On phones the question takes its own line above the answers. */
table.details tbody.qs th { text-align: left; white-space: normal; width: 46%; }
.qs .opt { margin-right: 10px; white-space: nowrap; cursor: pointer; display: inline-block; }
.qs input { margin: 0 2px 0 0; vertical-align: -2px; }
.qs .a { display: none; margin-top: 4px; }
.qs .a.on, .qs td:has(.r1:checked) .a1, .qs td:has(.r2:checked) .a2, .qs td:has(.r3:checked) .a3 { display: block; }
table.sees th { white-space: normal; }
table.sees td { min-width: 0; }
@media (max-width: 640px) {
  table.details tbody.qs tr.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  table.details tbody.qs th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; }
}