/* ip.cx — 手写 CSS，配色与尺度全部取自 Open Props 变量，不写十六进制。
   设计意图：这是一台仪表，不是一张海报。整页保持中性灰的克制底色，
   唯一的色彩来自徽章——扫一眼就知道这条 IP 干净不干净。 */

:root {
  --bg:        var(--gray-0);
  --surface:   #fff;
  --border:    var(--gray-3);
  --text:      var(--gray-9);
  --text-dim:  var(--gray-6);   /* 标签列 */
  --accent:    var(--green-7);

  --badge-green-bg:  var(--green-1);
  --badge-green-fg:  var(--green-9);
  --badge-gray-bg:   var(--gray-2);
  --badge-gray-fg:   var(--gray-8);
  --badge-amber-bg:  var(--orange-1);
  --badge-amber-fg:  var(--orange-9);
  --badge-red-bg:    var(--red-1);
  --badge-red-fg:    var(--red-9);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--gray-11);
    --surface:  var(--gray-10);
    --border:   var(--gray-8);
    --text:     var(--gray-1);
    --text-dim: var(--gray-5);
    --accent:   var(--green-4);

    /* 深色下反转徽章的明暗关系，保持同样的三个色相 */
    --badge-green-bg:  var(--green-11);
    --badge-green-fg:  var(--green-3);
    --badge-gray-bg:   var(--gray-9);
    --badge-gray-fg:   var(--gray-3);
    --badge-amber-bg:  var(--orange-11);
    --badge-amber-fg:  var(--orange-3);
    --badge-red-bg:    var(--red-11);
    --badge-red-fg:    var(--red-3);
  }
}

html {
  background: var(--bg);
  color-scheme: light dark;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.wrap {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: var(--size-6) var(--size-7);
}

/* 数据值一律等宽——IP 段与 ASN 因此天然对齐，也是「这是技术工具」最直接的表达 */
.mono {
  font-family: var(--font-mono);
  font-size: .95em;
}

.dim {
  color: var(--text-dim);
}

/* ---------------------------------------------------------------- 站点标识 */

/* Logo 居中，压在查询框正上方——整页只有这一处品牌表达 */
.site {
  display: flex;
  justify-content: center;
  margin-block-end: var(--size-5);
}

.site__logo {
  display: inline-block;
  line-height: 0;
}

.site__logo img {
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- 查询区 */

.query {
  margin-block-end: var(--size-6);
}

.query__line {
  display: flex;
  gap: var(--size-2);
}

.query__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--size-2) var(--size-3);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  transition: border-color .15s var(--ease-2);
}

.query__input::placeholder {
  color: var(--text-dim);
}

.query__input:hover {
  border-color: var(--text-dim);
}

.query__submit {
  flex: 0 0 auto;
  padding-inline: var(--size-4);
  font-size: 14px;
  font-weight: var(--font-weight-5);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: border-color .15s var(--ease-2), background-color .15s var(--ease-2);
}

.query__submit:hover {
  border-color: var(--text-dim);
}

.query__turnstile {
  margin-block-start: var(--size-2);
  min-height: 1px;
}

.notice {
  margin-block: var(--size-2) 0;
  font-size: 13px;
  color: var(--badge-red-fg);
}

.notice--stale {
  color: var(--badge-amber-fg);
  margin-block-end: var(--size-4);
}

/* ---------------------------------------------------------------- 当前 IP */

.current {
  display: flex;
  align-items: baseline;
  gap: var(--size-3);
  margin-block-end: var(--size-6);
}

.current__ip {
  font-family: var(--font-mono);
  /* IPv6 完整形态很长，允许在窄屏收缩到可读下限，不做横向滚动 */
  font-size: clamp(1.4rem, 6.5vw, var(--font-size-5));
  font-weight: var(--font-weight-6);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.copy {
  flex: 0 0 auto;
  padding: 2px var(--size-2);
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: color .15s var(--ease-2), border-color .15s var(--ease-2);
}

.copy:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ---------------------------------------------------------------- 信息分组 */

.group {
  margin-block-end: var(--size-5);
}

.group__title {
  margin: 0 0 var(--size-1);
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--gray-6);
  letter-spacing: .08em;
}

/* 分组容器用极轻的边框与小圆角；
   绝不给每一行加卡片——那会把 20 行信息变成 20 个盒子。 */
.rows {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding-inline: var(--size-3);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-3);
  padding-block: var(--size-2);
  border-bottom: 1px solid var(--border);
}

.row:last-child {
  border-bottom: 0;
}

.row__label {
  flex: 0 0 auto;
  color: var(--text-dim);
}

.row__value {
  flex: 1 1 auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.flag {
  font-size: 1.05em;
}

/* ---------------------------------------------------------------- 徽章与标签 */

.badge {
  display: inline-block;
  padding: 1px var(--size-2);
  font-size: 12px;
  font-weight: var(--font-weight-5);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--radius-round);
}

.badge--green { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.badge--gray  { background: var(--badge-gray-bg);  color: var(--badge-gray-fg); }
.badge--amber { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.badge--red   { background: var(--badge-red-bg);   color: var(--badge-red-fg); }

.tags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.tag {
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
  background: var(--badge-gray-bg);
  border-radius: var(--radius-2);
  white-space: nowrap;
}

/* 折叠用原生 details/summary：不依赖 JS，CSP 禁用内联脚本也能展开 */
.tag-more {
  display: inline-block;
}

.tag-more > summary {
  cursor: pointer;
  list-style: none;
  color: var(--text);
}

.tag-more > summary::-webkit-details-marker {
  display: none;
}

.tag-more > .tags {
  margin-block-start: 4px;
}

/* ---------------------------------------------------------------- 页脚 */

.foot {
  margin-block-start: var(--size-7);
  padding-block-start: var(--size-4);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--size-2) var(--size-3);
  margin-block-end: var(--size-3);
}

.foot__label {
  color: var(--text-dim);
}

.foot__link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s var(--ease-2), border-color .15s var(--ease-2);
}

.foot__link:hover {
  color: var(--text);
  border-bottom-color: var(--border);
}

.foot__line {
  margin: 0 0 4px;
  line-height: 1.7;
}

.foot__copy {
  font-family: var(--font-mono);
  margin-block-start: var(--size-2);
}

/* ---------------------------------------------------------------- 可访问性 */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-2);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 420px) {
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .row__label {
    font-size: 12px;
  }

  .row__value {
    text-align: left;
  }

  .tags {
    justify-content: flex-start;
  }
}