/* =============================================================
   世界时间模块（/time/）
   只补本模块需要的排版；面板 / 表单 / 按钮沿用 tool.css，
   颜色、圆角、间距全部取 app.css 的 :root 变量。
   ============================================================= */

.tz-lede { color: var(--muted); margin: 0 0 16px; max-width: 820px; }
.tz-section { margin: 0 0 26px; }
.tz-section > h2 { font-size: 1.1rem; margin-bottom: 10px; }
.tz-section > .tz-hint { color: var(--muted); font-size: 12.5px; margin: -4px 0 12px; }
.tz-note { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.tz-empty { color: var(--muted-2); font-size: 13.5px; margin: 0; }
.tz-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: .6em 0; }

/* ---------- 时钟 ---------- */
.tz-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tz-clock__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4vw + 1rem, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tz-clock__sec { color: var(--muted); font-size: .55em; }
.tz-clock__date { color: var(--ink-2); font-size: 14px; }
.tz-clock__zone { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); }

.tz-hero { display: grid; gap: 14px; }
.tz-hero__row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }

/* ---------- 城市卡片 ---------- */
.tz-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.tz-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-2);
  padding: 10px 12px;
  display: grid; gap: 2px;
  min-width: 0;
}
.tz-card a { text-decoration: none; color: var(--ink); font-weight: 600; }
.tz-card a:hover { color: var(--accent); text-decoration: underline; }
.tz-card__time {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.32rem; line-height: 1.2;
}
.tz-card__meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tz-card__shift { color: var(--accent); font-size: 11.5px; }

/* ---------- 搜索 ---------- */
.tz-search__row { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-search__row input[type=search] { flex: 1 1 260px; min-width: 0; }
.tz-suggest {
  list-style: none; margin: 8px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); max-height: 320px; overflow-y: auto;
}
.tz-suggest:empty { display: none; }
.tz-suggest li { border-bottom: 1px solid var(--line); }
.tz-suggest li:last-child { border-bottom: 0; }
.tz-suggest button, .tz-suggest a {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  width: 100%; text-align: start; padding: 8px 12px; font-size: 13.5px;
  color: var(--ink); text-decoration: none; background: transparent; border: 0;
}
.tz-suggest button:hover, .tz-suggest a:hover,
.tz-suggest [aria-selected=true] { background: var(--bg-alt); }
.tz-suggest .tz-suggest__meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tz-status { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; min-height: 1.2em; }

/* ---------- 事实表 ---------- */
.tz-facts { width: 100%; border-collapse: collapse; font-size: 14px; }
.tz-facts th, .tz-facts td { text-align: start; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tz-facts th { color: var(--muted); font-weight: 500; width: 36%; white-space: nowrap; }
.tz-facts td.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
.tz-facts tr:last-child th, .tz-facts tr:last-child td { border-bottom: 0; }

/* ---------- 时区列表（国家页） ---------- */
.tz-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tz-zone {
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); padding: 12px 14px;
  display: grid; gap: 4px;
}
.tz-zone__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.tz-zone__name { font-family: var(--font-mono); font-size: 13.5px; }
.tz-zone__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; line-height: 1.2; }
.tz-zone__meta { color: var(--muted); font-size: 12.5px; }

/* ---------- 跨日 ---------- */
.tz-days { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tz-days li {
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 8px 12px; background: var(--surface); font-size: 13px; min-width: 0;
}
.tz-days li[data-today=1] { border-color: var(--line-strong); background: var(--bg-alt); }
.tz-days .tz-days__label { display: block; color: var(--muted); font-size: 11.5px; }

/* ---------- 日出日落 ---------- */
.tz-sun-today { margin-bottom: 14px; }
.tz-sun-grid { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.tz-sun-grid > div { min-width: 0; }
.tz-sun-grid dt { color: var(--muted); font-size: 12px; margin: 0 0 2px; }
.tz-sun-grid dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.tz-sun-grid dd.tz-sun-big { font-family: var(--font-mono); font-size: 1.6rem; line-height: 1.2; }
.tz-sun-polar { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.tz-sun-subtitle { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.tz-sun-table th[scope=col] { width: auto; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tz-sun-table th[scope=row] { width: auto; font-weight: 400; color: var(--ink); white-space: nowrap; }
.tz-sun-table tr[data-today="1"] th[scope=row] { font-weight: 650; }
.tz-sun-table tr[data-today="1"] { background: var(--bg-alt); }
.tz-sun-table td { white-space: nowrap; }
.tz-sun-delta { color: var(--muted); font-size: 12.5px; white-space: normal; }
.tz-sun-date-short { display: none; }

/* ---------- 时差表 / 整点对照 ---------- */
.tz-hours th[scope=col], .tz-difftable th[scope=col] { width: auto; color: var(--muted); font-weight: 500; }
.tz-hours th[scope=row] { width: 30%; font-weight: 400; }
.tz-hours__note { color: var(--muted); font-size: 12px; }
.tz-difftable th[scope=row] { width: 42%; font-weight: 400; color: var(--ink); }
.tz-difftable th[scope=row] .tz-card__meta { margin-inline-start: 4px; }
.tz-difftable tr[data-today="1"] { background: var(--bg-alt); }
.tz-difftable tr[data-today="1"] th[scope=row] { font-weight: 650; }

/* 时区分组的标题行，占满一整行 */
.tz-zonehead {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 10px 2px 4px; margin-top: 4px;
}
.tz-zonehead:first-child { margin-top: 0; }

/* 省 / 州、时区切换、其它时间写法共用的紧凑表 */
.tz-changes th[scope=col] { width: auto; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tz-changes th[scope=row] { width: auto; font-weight: 400; white-space: nowrap; }

/* ---------- 最近查询 ---------- */
.tz-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tz-recent li {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); padding: 7px 10px; font-size: 13.5px;
}
.tz-recent__meta { color: var(--muted); font-size: 12px; }
.tz-recent__drop { color: var(--muted); font-size: 12px; background: transparent; border: 0; padding: 2px 6px; border-radius: var(--r-1); }
.tz-recent__drop:hover { color: var(--danger-ink); background: var(--danger-bg); }
.tz-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* ---------- 对比 ---------- */
.tz-compare { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tz-compare__side { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); padding: 12px 14px; min-width: 0; }
.tz-compare__role { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.tz-compare__city { font-weight: 600; margin: 2px 0 4px; }
.tz-compare__summary { margin: 12px 0 0; font-size: 15px; }
.tz-compare__option { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 12px 14px; margin: 10px 0 0; }
.tz-compare__option h3 { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.tz-warn {
  border: 1px solid rgba(143,28,28,.28); background: var(--danger-bg); color: var(--danger-ink);
  border-radius: var(--r-2); padding: 10px 12px; font-size: 13.5px; margin: 0 0 12px;
}
.tz-form__grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tz-modes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.tz-modes label { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); font-weight: 400; }

/* ---------- 国家导航 ---------- */
.tz-continent { margin: 0 0 18px; }
.tz-continent h3 { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tz-countries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; }
.tz-countries li { min-width: 0; }
.tz-countries .tz-countries__n { color: var(--muted-2); font-size: 11.5px; }

/* ---------- 分页 ---------- */
.tz-pager { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; margin: 14px 0 0; }
.tz-pager__status { color: var(--muted); }

@media (max-width: 640px) {
  .tz-compare, .tz-form__grid { grid-template-columns: 1fr; }
  .tz-sun-grid { gap: 10px 20px; }
  .tz-sun-grid dd.tz-sun-big { font-size: 1.35rem; }
  /* 窄屏用「09-15 周二」这种紧凑写法，五列不用横向滚动就能放下 */
  .tz-sun-date-full { display: none; }
  .tz-sun-date-short { display: inline; }
  .tz-sun-table { font-size: 13px; }
  .tz-sun-table th, .tz-sun-table td { padding: 7px 6px; }
  .tz-sun-delta { font-size: 11.5px; }
  .tz-hours th[scope=row] { width: 34%; }
  .tz-difftable th[scope=row] { width: 46%; }
  .tz-difftable th[scope=row] .tz-card__meta { display: block; margin-inline-start: 0; }
  .tz-facts th { width: 42%; white-space: normal; }
  .tz-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}