/* ════════════════════════════════════════════════════════════════
   components.css —— 两站共用的 CSS 组件层
   建在 tokens.css 之上，本文件内不出现任何字面色值。
   加载顺序：tokens.css → report-tokens.css → report-template.css
             → components.css → tailwind.css
   样板页：/components
   ════════════════════════════════════════════════════════════════ */

/* ── 徽章 ────────────────────────────────────────────────────────
   底色与文字色成对：soft 作底，基色作字。两者由同一个 --*-hsl 派生，
   所以不可能出现「底色换了而文字色没跟上」。原先另有一组 --t-*-ink
   做文字色，校准之后它们与基色完全相同，四个全是，已删。
   命名按「它表示什么」，不按「它是什么颜色」。
   站上原有三套并行的命名：按色（badge-green）、按严重度
   （badge-high）、按用途（badge-free）。按色命名的那套没法换肤，
   因为类名本身就承诺了颜色。下面这套是规范名，色名作为别名保留，
   让已发布的 17 篇文章可以原地不动。 */
.badge {
  display: inline-block;
  padding: .12rem .45rem;
  border-radius: var(--t-r-sm);
  font-size: var(--t-fs-micro);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge + .badge { margin-left: .25rem; }

.badge--up      { background: var(--t-up-soft);      color: var(--t-up); }
.badge--down    { background: var(--t-down-soft);    color: var(--t-down); }
.badge--warn    { background: var(--t-warn-soft);    color: var(--t-warn); }
.badge--info    { background: var(--t-info-soft);    color: var(--t-info); }
.badge--accent  { background: var(--t-accent-soft);  color: var(--t-accent-hi); }
.badge--neutral { background: var(--t-neutral-soft); color: var(--t-neutral-ink); }

/* 色名别名：已发布文章在用，不要在新页面里用 */
.badge-green  { background: var(--t-up-soft);      color: var(--t-up); }
.badge-red    { background: var(--t-down-soft);    color: var(--t-down); }
.badge-amber  { background: var(--t-warn-soft);    color: var(--t-warn); }
.badge-cyan   { background: var(--t-info-soft);    color: var(--t-info); }
.badge-violet { background: var(--t-accent-soft);  color: var(--t-accent-hi); }
.badge-gray   { background: var(--t-neutral-soft); color: var(--t-neutral-ink); }

/* 严重度别名：内部跟踪页在用。medium 刻意用品牌紫而非黄，
   这样「需要注意」与「高」在一眼之间就能分开。 */
.badge-medium   { background: var(--t-accent-soft); color: var(--t-accent-hi); }
.badge-high     { background: var(--t-warn-soft);   color: var(--t-warn); }
.badge-critical { background: var(--t-down-soft);   color: var(--t-down); }

/* ── 提示块的标签 ───────────────────────────────────────────────
   .callout 本体在 report-template.css，这里只补它的标签。 */
.callout-label,
.callout strong.callout-label {
  color: var(--t-accent-hi);
  font-weight: 700;
  margin-right: .4rem;
}

/* ── 滚动条 ─────────────────────────────────────────────────────
   深色站点上浏览器默认的浅色滚动条会像一道白边切在版面上。
   WebKit 与 Firefox 两套写法都要给，Firefox 只认 scrollbar-color。
   此前这一整块在 35 个页面里各有一份拷贝。 */
html {
  scrollbar-color: var(--t-scroll-thumb) var(--t-bg-page);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--t-bg-page); }
::-webkit-scrollbar-thumb {
  background: var(--t-scroll-thumb);
  border-radius: 6px;
  border: 2px solid var(--t-bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--t-scroll-thumb-hi); }
::-webkit-scrollbar-corner { background: var(--t-bg-page); }

/* ── 网格底 ─────────────────────────────────────────────────────
   .orb 曾有 1000px 宽、把视口撑出 307px 的横向滚动，
   所以这里要 clip 住。 */
.grid-bg {
  background-image:
    linear-gradient(var(--t-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--t-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  overflow-x: clip;
}