/* wheredns2.0 — btop-style terminal UI */
:root, [data-theme="tty"] {
  --bg: #0E1012; --fg: #C8CCCF; --dim: #6B7378; --accent: #8FB8D8; --border: #2C3236;
  --ok: #93C08A; --warn: #D9B36C; --fail: #D9787A; --info: #8FB8D8;
  --b-dns: #3A4C5A; --b-email: #4F4A36; --b-bl: #553A3B; --b-whois: #463F55; --b-ip: #3A4C5A;
  --b-web: #3C4F3A; --b-ports: #4F4236; --b-ping: #3A5052; --b-prop: #4A3D4C; --b-hdr: #3A4C5A;
  --t-dns: #8FB8D8; --t-email: #D9B36C; --t-bl: #D9787A; --t-whois: #B39DDB; --t-ip: #8FB8D8;
  --t-web: #93C08A; --t-ports: #D9A27A; --t-ping: #7FC4C4; --t-prop: #C99AC2; --t-hdr: #8FB8D8;
}
[data-theme="btop"] {
  --bg: #000; --fg: #E0E0E0; --dim: #707070; --accent: #5FD7FF; --border: #404040;
  --ok: #87D75F; --warn: #FFD75F; --fail: #FF5F5F; --info: #5FAFFF;
  --b-dns: #5FD7AF; --b-email: #D7AF5F; --b-bl: #D75F5F; --b-whois: #AF87D7; --b-ip: #5FAFD7;
  --b-web: #87D75F; --b-ports: #D7875F; --b-ping: #5FD7D7; --b-prop: #D787AF; --b-hdr: #5FAFD7;
  --t-dns: var(--b-dns); --t-email: var(--b-email); --t-bl: var(--b-bl); --t-whois: var(--b-whois); --t-ip: var(--b-ip);
  --t-web: var(--b-web); --t-ports: var(--b-ports); --t-ping: var(--b-ping); --t-prop: var(--b-prop); --t-hdr: var(--b-hdr);
}
[data-theme="phosphor"] {
  --bg: #040A05; --fg: #7CF29A; --dim: #3B8A52; --accent: #B6FFC8; --border: #1D4A2A;
  --ok: #7CF29A; --warn: #E8F27C; --fail: #FF8A7A; --info: #B6FFC8;
}
[data-theme="amber"] {
  --bg: #0C0802; --fg: #FFB847; --dim: #9A7028; --accent: #FFD58A; --border: #4A3510;
  --ok: #FFD58A; --warn: #FFB847; --fail: #FF7A47; --info: #FFD58A;
}
[data-theme="phosphor"], [data-theme="amber"] {
  --b-dns: var(--border); --b-email: var(--border); --b-bl: var(--border); --b-whois: var(--border); --b-ip: var(--border);
  --b-web: var(--border); --b-ports: var(--border); --b-ping: var(--border); --b-prop: var(--border); --b-hdr: var(--border);
  --t-dns: var(--accent); --t-email: var(--accent); --t-bl: var(--accent); --t-whois: var(--accent); --t-ip: var(--accent);
  --t-web: var(--accent); --t-ports: var(--accent); --t-ping: var(--accent); --t-prop: var(--accent); --t-hdr: var(--accent);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 13px/1.55 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }

.dim { color: var(--dim); } .fg { color: var(--fg); } .accent { color: var(--accent); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .fail { color: var(--fail); } .info { color: var(--info); }
.nowrap { white-space: nowrap; } .pre { white-space: pre; }
.right { margin-left: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }

.app { min-height: 100vh; display: flex; flex-direction: column; }

.top { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 10px 14px 12px; }
.statusline { display: flex; flex-wrap: wrap; gap: 4px 12px; white-space: pre; }

.box { position: relative; border: 1px solid var(--border); border-radius: 6px; padding: 14px 12px 10px; min-width: 0; }
.ttl { position: absolute; top: -9px; left: 10px; padding: 0 5px; line-height: 16px; background: var(--bg); white-space: pre; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.ttl.r { left: auto; right: 10px; color: var(--dim); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover, .linkbtn:focus-visible { text-decoration: underline; }
:focus-visible { outline: 1px dashed var(--accent); outline-offset: 2px; }

.query { margin-top: 14px; border-color: var(--accent); padding: 10px 12px 8px; }
.query > .ttl:first-child { color: var(--accent); }
.prompt { display: flex; align-items: center; min-height: 32px; }
.prompt input { flex: 1; min-width: 0; height: 32px; background: transparent; border: 0; outline: none; color: var(--fg); font: inherit; font-size: 15px; caret-color: var(--accent); padding: 0; }
.prompt input::placeholder { color: var(--dim); opacity: .7; }
.run { height: 30px; padding: 0 10px; background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.run:hover { border-color: var(--accent); }
.modeline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; white-space: pre; }
.humanline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12px; }
:root { --b-subdomains: var(--border); --t-subdomains: var(--accent); }
#pills { display: flex; flex-wrap: wrap; gap: 2px 12px; }
#pills a { text-decoration: none; }
#pills a:hover { text-decoration: underline; }
#pills .off { color: var(--dim); opacity: .6; }
.notice { margin-top: 8px; white-space: pre-wrap; color: var(--warn); }

.grid { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px 10px; padding: 10px 14px 18px; align-content: start; }
.grid:empty { display: none; }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s12 { grid-column: span 12; }
@media (max-width: 1100px) { .s4, .s5, .s6, .s7 { grid-column: span 6; } }
@media (max-width: 760px) { .s4, .s5, .s6, .s7 { grid-column: span 12; } .top { padding: 8px 10px 10px; } .grid { padding: 10px; } .prompt .host { display: none; } .prompt input { font-size: 16px; } .keys span:nth-child(n+3):nth-child(-n+6) { display: none; } }

.panel { border-color: var(--pb); scroll-margin-top: 150px; }
.panel .ttl .c { color: var(--pt); }
.panel .sub { color: var(--dim); }
.kv { display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: 1px 10px; margin: 0; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.rows > div { display: grid; gap: 0 10px; padding: 1px 0; }
.rows > div:hover { background: rgba(255,255,255,.035); }
.tag { white-space: pre; }
.hdrrow { color: var(--dim); }
.foot { color: var(--dim); margin-top: 6px; }
.cells { letter-spacing: 2px; font-size: 15px; }
.spark { font-size: 30px; line-height: 1; letter-spacing: 3px; color: var(--pt); }
.big { font-size: 22px; line-height: 1.2; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 760px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }

.spin::after { content: '⠋'; color: var(--accent); animation: sp .8s steps(1) infinite; }
@keyframes sp { 0%{content:'⠋'} 12%{content:'⠙'} 25%{content:'⠹'} 37%{content:'⠸'} 50%{content:'⠼'} 62%{content:'⠴'} 75%{content:'⠦'} 87%{content:'⠧'} }
@media (prefers-reduced-motion: reduce) { .spin::after { animation: none; content: '…'; } }

.welcome { flex: 1; padding: 10px 14px; }
.welcome[hidden] { display: none; }
.welcome pre { margin: 0; font: inherit; white-space: pre-wrap; }
.ex { background: none; border: 0; padding: 0; color: var(--fg); cursor: pointer; }
.ex:hover { color: var(--accent); text-decoration: underline; }

.keys { position: sticky; bottom: 0; background: var(--bg); padding: 6px 14px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px solid var(--border); white-space: pre; }
kbd { display: inline-block; padding: 0 4px; margin-right: 4px; background: var(--accent); color: var(--bg); font: inherit; border-radius: 2px; }

.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: grid; place-items: start center; padding: 120px 14px 14px; overflow: auto; }
.overlay[hidden] { display: none; }
.modal { width: min(780px, 100%); background: var(--bg); border-color: var(--accent); padding: 18px 18px 14px; }
.modal > .ttl:first-child { color: var(--accent); }
.modal p { margin: 0 0 10px; }
.modal .sep { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.flagtable { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 18px; }
.flagtable .f { color: var(--accent); white-space: pre; }
.examples { display: flex; flex-direction: column; align-items: flex-start; }
.examples button { background: none; border: 0; padding: 2px 4px; cursor: pointer; text-align: left; }
.examples button:hover { background: rgba(255,255,255,.05); }
@media (max-width: 760px) { .flagtable { grid-template-columns: auto minmax(0, 1fr); } .flagtable .a { display: none; } .overlay { padding-top: 60px; } }