/* timestamp — tool-specific styles
   只放这个工具独有的东西。公共外观（toolbox / field / alert / runs 表格 / chip）
   已经在全局样式表里，新工具不需要碰它。

   ★ 不写任何裸色值：一律走主题变量（--surface / --line / --fg …），
     否则换一版主题时这里会留下"改不动的硬色块"。 */

.ts-block {
  margin-top: 22px;
}

.ts-block__title {
  margin: 0 0 4px;
  font-size: 16px;
}

.ts-block__lede {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--fg-muted);
}

/* 结果卡片：秒 / 毫秒 / ISO。
   auto-fit + minmax 让它在宽屏排成一行、窄屏自动折成一列，
   不需要为断点单独写规则。 */
.ts-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.ts-kv__item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.ts-kv__k {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.ts-kv__v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  word-break: break-all;
}

/* 时区表：比公共 .runs__table 宽，窄屏交给横向滚动而不是硬挤。
   ★ 不隐藏任何一列 —— "偏移"恰恰是这个工具最有信息量的那一列。 */
.ts-scroll {
  overflow-x: auto;
}

.ts-zones {
  min-width: 430px;
}

.ts-zones__zone {
  font-family: var(--mono);
  font-size: 13px;
}

.ts-zones__local {
  font-family: var(--mono);
  font-size: 13.5px;
  white-space: nowrap;
}

.ts-zones__off {
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}