/**
 * EwoooC Dot Matrix v3.0 — Production
 * ─────────────────────────────────────────────────────────────
 * 受 Nothing Phone Dot Matrix 啟發的點陣視覺語言
 *
 * 適用場景（已導入）：
 *   ① Brand mark    .momo-logo-mark           （在 ewoooc-shell.css）
 *   ② Section divider .momo-dot-divider
 *   ⑥ Active nav     .momo-nav-link.is-active 左側 3 顆豎排 dot
 *   ⑦ Progress bar   .momo-dot-meter, .momo-dot-progress
 *
 * 不適用場景（不要套）：
 *   ❌ 表格背景 / 大面積 paper 底 / 卡片背景 / KPI strip 背景
 *
 * 載入順序：tokens.css → shell.css → dotmatrix.css → page-level
 *
 * 工程備註：
 *   點陣圖樣統一走 background-image: radial-gradient(circle, ...)
 *   color 全部吃 currentColor，由父層字色決定，不要寫死 #
 */

/* ════════════════════════════════════════════════════════
 * ② Section Divider — 點陣分隔線
 * ════════════════════════════════════════════════════════
 *   用法：<div class="momo-dot-divider"></div>
 *   變體：.is-tight (10px 間距) / .is-loose (14px) / .is-wide (18px)
 *        .is-soft (低濃度) / .is-strong (高濃度)
 *        .is-accent (吃群組色，取代 currentColor)
 *   情境：取代 1px solid 線，用於 section / hero / card 分隔
 *   建議：每頁最多用 3-4 條，避免變裝飾 noise
 */
.momo-dot-divider {
  height: 7px;
  width: 100%;
  background-image: radial-gradient(
    circle,
    currentColor var(--momo-dot-radius),
    transparent calc(var(--momo-dot-radius) + 0.5px)
  );
  background-size: var(--momo-dot-size-base) 7px;
  background-repeat: repeat-x;
  background-position: center;
  color: var(--momo-text-tertiary);
  opacity: var(--momo-dot-alpha-strong);
}

.momo-dot-divider.is-tight  { background-size: var(--momo-dot-size-tight)  7px; }
.momo-dot-divider.is-loose  { background-size: var(--momo-dot-size-loose)  7px; }
.momo-dot-divider.is-wide   { background-size: var(--momo-dot-size-wide)   7px; }

.momo-dot-divider.is-soft    { opacity: var(--momo-dot-alpha-mid); }
.momo-dot-divider.is-whisper { opacity: var(--momo-dot-alpha-soft); }

.momo-dot-divider.is-accent  { color: var(--momo-page-accent); opacity: 0.85; }
.momo-dot-divider.is-ink     { color: var(--momo-ink); }

/* 垂直變體 — 用於 column 之間 */
.momo-dot-divider-v {
  width: 7px;
  height: 100%;
  min-height: 32px;
  background-image: radial-gradient(
    circle,
    currentColor var(--momo-dot-radius),
    transparent calc(var(--momo-dot-radius) + 0.5px)
  );
  background-size: 7px var(--momo-dot-size-base);
  background-repeat: repeat-y;
  background-position: center;
  color: var(--momo-text-tertiary);
  opacity: var(--momo-dot-alpha-strong);
}

/* ════════════════════════════════════════════════════════
 * ⑥ Active Nav Indicator — 左側 3 顆豎排 dot
 * ════════════════════════════════════════════════════════
 *   取代原本的 3px 直線 active 指示
 *   附著在 .momo-nav-link.is-active 上
 *   暖色點亮時有「指示燈」感
 *
 *   注意：此 selector 會 override ewoooc-shell.css 的 .is-active 樣式
 */
.momo-nav-link.is-active,
.momo-nav-sublink.is-active {
  position: relative;
}

.momo-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-image: radial-gradient(
    circle,
    var(--momo-page-accent-dark) 1.2px,
    transparent 1.7px
  );
  background-size: 3px 5px;
  background-repeat: repeat-y;
  background-position: center;
  opacity: 1;
}

/* sublink 的 active 是淡底 + 深字，dot 顏色要吃 accent-dark */
.momo-nav-sublink.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background-image: radial-gradient(
    circle,
    var(--momo-page-accent-dark) 1.1px,
    transparent 1.6px
  );
  background-size: 3px 5px;
  background-repeat: repeat-y;
  background-position: center;
}

/* ════════════════════════════════════════════════════════
 * ⑦ Dot Meter / Progress — 點陣刻度
 * ════════════════════════════════════════════════════════
 *   .momo-dot-meter      固定 20 顆 dot（5×4 或單列），用 --filled 控制亮起數量
 *   .momo-dot-progress   橫向長條 dot 刻度，根據百分比亮起
 *   .momo-dot-threshold  3 段閾值（70/85/95）— 對齊 P0/P1/P2 警示語言
 *
 *   設計動機：取代連續長條，視覺上更像「監控儀表」
 *   常用情境：預算用量、配額、健康度、進度、SLA
 */

/* 7-1: 點陣長條（單列） */
.momo-dot-progress {
  --momo-dot-progress-pct: 0;        /* 0-100 */
  --momo-dot-progress-track: var(--momo-text-tertiary);
  --momo-dot-progress-fill: var(--momo-page-accent);

  position: relative;
  display: block;
  height: 12px;
  background-image: radial-gradient(
    circle,
    var(--momo-dot-progress-track) 1.2px,
    transparent 1.7px
  );
  background-size: 8px 12px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 1;
}

.momo-dot-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--momo-dot-progress-pct) * 1%);
  background-image: radial-gradient(
    circle,
    var(--momo-dot-progress-fill) 1.4px,
    transparent 1.9px
  );
  background-size: 8px 12px;
  background-repeat: repeat-x;
  background-position: left center;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 7-2: 三段閾值刻度（70/85/95） */
.momo-dot-threshold {
  position: relative;
  display: grid;
  grid-template-columns: 70fr 15fr 10fr 5fr;
  gap: 4px;
  height: 14px;
}

.momo-dot-threshold > span {
  display: block;
  height: 100%;
  background-image: radial-gradient(
    circle,
    currentColor 1.2px,
    transparent 1.7px
  );
  background-size: 8px 14px;
  background-repeat: repeat-x;
  background-position: left center;
  border-radius: 1px;
}

.momo-dot-threshold > span:nth-child(1) { color: var(--momo-success); }
.momo-dot-threshold > span:nth-child(2) { color: var(--momo-warning); }
.momo-dot-threshold > span:nth-child(3) { color: var(--momo-page-accent); }
.momo-dot-threshold > span:nth-child(4) { color: var(--momo-danger); }

/* 失活段：濃度降到 whisper */
.momo-dot-threshold.is-stage-1 > span:nth-child(n+2) { opacity: var(--momo-dot-alpha-whisper); }
.momo-dot-threshold.is-stage-2 > span:nth-child(n+3) { opacity: var(--momo-dot-alpha-whisper); }
.momo-dot-threshold.is-stage-3 > span:nth-child(n+4) { opacity: var(--momo-dot-alpha-whisper); }
/* stage-4 全亮 */

.momo-dot-threshold-labels {
  display: grid;
  grid-template-columns: 70fr 15fr 10fr 5fr;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--momo-font-mono);
  font-size: var(--momo-text-label-tiny);
  color: var(--momo-text-tertiary);
  letter-spacing: 0.04em;
}

.momo-dot-threshold-labels > span {
  text-align: right;
}

/* 7-3: 5×4 矩陣（20 點，用於緊湊空間，例如 KPI 卡內） */
.momo-dot-meter {
  --momo-dot-meter-filled: 0;        /* 0-20 */
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 2px;
  height: 8px;
  width: 100%;
  max-width: 180px;
}

.momo-dot-meter > span {
  display: block;
  height: 8px;
  border-radius: 50%;
  background: var(--momo-text-tertiary);
  opacity: var(--momo-dot-alpha-soft);
}

/* :nth-child 控制亮起前 N 顆 — 配合 inline style --momo-dot-meter-filled 不夠彈性，
   實務做法：在 HTML 直接給前 N 顆 .is-on class，後 20-N 顆不加 */
.momo-dot-meter > span.is-on {
  background: var(--momo-page-accent);
  opacity: 1;
}

.momo-dot-meter.is-warn > span.is-on { background: var(--momo-warning); }
.momo-dot-meter.is-danger > span.is-on { background: var(--momo-danger); }

/* ════════════════════════════════════════════════════════
 * 共用：載入點陣（為將來 ④ Loading 預留 hook）
 * ════════════════════════════════════════════════════════ */
@keyframes momo-dot-scan {
  0%, 100% { opacity: var(--momo-dot-alpha-soft); }
  50% { opacity: var(--momo-dot-alpha-strong); }
}

/* ════════════════════════════════════════════════════════
 * ⑧ Brand Mark 強化（針對 .momo-logo-mark 已存在於 shell.css）
 * ════════════════════════════════════════════════════════
 *   ewoooc-shell.css 已有 .momo-logo-mark，這裡額外提供：
 *   .momo-logo-mark.is-accent   底色改為群組 accent
 *   .momo-logo-mark.is-large    32×32 用於 hero
 *   .momo-logo-mark.is-tiny     18×18 用於 inline
 */
.momo-logo-mark.is-accent {
  background: var(--momo-page-accent);
  color: var(--momo-page-inverse);
}

.momo-logo-mark.is-large {
  width: 32px;
  height: 32px;
  gap: 2px;
  padding: 5px;
}

.momo-logo-mark.is-tiny {
  width: 18px;
  height: 18px;
  gap: 1px;
  padding: 2.5px;
  border-radius: 1px;
}

/* hero 點陣大標 — 取代裝飾性 mono 標籤 */
.momo-dot-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: var(--momo-bg-paper);
  border: 1px solid var(--momo-border-light);
  border-radius: var(--momo-radius-pill);
  font-family: var(--momo-font-mono);
  font-size: var(--momo-text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--momo-text-secondary);
}

.momo-dot-eyebrow .momo-logo-mark {
  width: 14px;
  height: 14px;
  gap: 1px;
  padding: 1.5px;
  border-radius: 1px;
}