/* ============================================================
   Ztor — Badge / Inline metric pill / Status dot
   Three patterns:
   1. Inline metric pill (icon + label, used in hero subtitle prose)
   2. Plain pill (status / category chip)
   3. Status dot (8px solid circle, used in dashboard demos)
   ============================================================ */

/* 1. Inline metric pill */
.ztor-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-10);

  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--foreground);

  background: var(--card);
  border: 1px solid var(--border);   /* Q4 2026-07-13：真 border 取代陰影模擬 */
  border-radius: var(--radius-md);

  vertical-align: middle;
}
.ztor-metric-pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 2. Plain badge */
.ztor-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-8);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-comfy);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  box-shadow: var(--shadow-hairline);
}

/* Tints mix the status hue into --card (same approach as .badge below),
   so they track light/dark automatically instead of freezing the light-mode rgb. */
.ztor-badge--success {
  background: color-mix(in srgb, var(--status-success) 12%, var(--card));
  color: var(--status-success);
  box-shadow: none;
}
.ztor-badge--error {
  background: color-mix(in srgb, var(--status-error) 16%, var(--card));
  color: var(--status-error);
  box-shadow: none;
}
.ztor-badge--info {
  background: color-mix(in srgb, var(--status-info) 12%, var(--card));
  color: var(--status-info);
  box-shadow: none;
}
.ztor-badge--warning {
  background: color-mix(in srgb, var(--status-warning) 18%, var(--card));
  /* warning hue is too light to read as text — darken with foreground (≈ the old #7A6A1F in light mode, auto-lightens in dark) */
  color: color-mix(in srgb, var(--status-warning) 50%, var(--foreground));
  box-shadow: none;
}

/* 3. Status dot */
.ztor-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}
.ztor-dot--success { color: var(--status-success); }
.ztor-dot--error   { color: var(--status-error); }
.ztor-dot--info    { color: var(--status-info); }
.ztor-dot--warning { color: var(--status-warning-ink); }
.ztor-dot--black   { color: var(--foreground); }  /* neutral dot — tracks light/dark */

/* ============================================================
   Badge (project namespace) — status indicator pill
   5 status variants + __dot sub-element. Used in dashboard alerts,
   earnings transactions table, payouts history, etc. Promoted from
   shared.css .pill on 2026-05-26.
   ============================================================ */
/* Soft category-tag look (2026-06-05): flat tinted background + saturated same-hue
   text, rounded-rectangle corners, NO status dot, NO ring. One component change
   restyles every badge across the app (status pills + category chips alike). The
   .badge__dot markup is kept but hidden, so no per-page sweep is needed. Tints use
   color-mix against --card, so they track light/dark automatically. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--radius-md);
  background: var(--muted);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--foreground-muted);
  white-space: nowrap;
}
.badge__dot { display: none; }   /* soft-tag look carries no status dot */

/* [hidden] 必須蓋過上面的 display:inline-flex，否則 JS 設 el.hidden=true 的徽章照樣顯示
   （UA 的 [hidden]{display:none} 特異度輸給 .badge）。同 alert.css／button.css／
   album-tracks.css 已有的處置。2026-07-27 發現：manage-ip 的驗證徽章、create-event 的
   #ce-pv-type、register-ip 的 #ri-list-note 都掛 hidden，先前三處都藏不掉。 */
.badge[hidden] { display: none; }

/* orange: same soft-tag recipe as the other status variants — tinted bg + SAME-hue saturated text.
   Was the odd one out (30% tint + --primary-foreground = white/black, unreadable as a soft tag,
   e.g. black「進行中」at night). Fixed 2026-07-24 to 16% tint + --primary text like success/info/error. */
/* 2026-07-28（/impeccable polish，43 頁掃描）：整組 soft-tag 徽章原本是
   「飽和原色當文字 ＋ 同色淡染當底」。這個配方在亮色模式先天不可能過 AA——
   把一個亮色相壓在它自己的淡色版上，對比一定接近 1。實測（亮色）：
     --orange  #ffa33f on 16% 橘染  → 1.78:1
     --warning 60% 混色 on 22% 黃染 → 1.78:1
     --success #22C55E on 16% 綠染  → 2.28:1
   底維持原色（--status-*，淡染），文字改吃同色相的 -ink：深色主題 -ink ＝ 原色，
   所以深色外觀完全不變；只有亮色會壓深。這與今天 .kpi__delta 的 fill／ink 分工是同一條規則：
   **填色歸原色、墨色歸 -ink**。實測亮色改後：success 6.22:1、info 5.68:1、accent 5.87:1、
   warning 4.92:1、orange 6.45:1。 */
.badge--orange  { background: color-mix(in srgb, var(--primary)        16%, var(--card)); color: var(--brand-ink); }
.badge--warning { background: color-mix(in srgb, var(--status-warning) 22%, var(--card)); color: var(--status-warning-ink); }
.badge--success { background: color-mix(in srgb, var(--status-success) 16%, var(--card)); color: var(--status-success-ink); }
.badge--error   { background: color-mix(in srgb, var(--status-error)   16%, var(--card)); color: var(--destructive-ink); }
.badge--info    { background: color-mix(in srgb, var(--status-info)    14%, var(--card)); color: var(--status-info-ink); }
.badge--accent  { background: color-mix(in srgb, var(--status-accent)  16%, var(--card)); color: var(--status-accent-ink); }
.badge--neutral { background: var(--muted); color: var(--foreground-muted); }

/* --inline：接在標題文字後的「安靜限定詞」標籤（如「4 variants」「限量」）。
   字重降回 regular（比狀態 pill 輕，不搶標題）、與同行文字基線對齊、左側小間距。
   用於清單／細節標題後的次要標記。 */
.badge--inline {
  font-weight: var(--fw-regular);
  vertical-align: middle;
  margin-left: var(--sp-6);
}