/* ==========================================================================
   概览页 Overview
   ========================================================================== */

/* ---------- 产品切换器（左上角） ---------- */
.ov-switcher { min-width: 0; }
.ov-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 100%;
  height: 56px;
  padding: 0 12px 0 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.ov-switcher-trigger:hover { border-color: var(--c-border-2); }
.ov-switcher-trigger:active { transform: scale(.99); }
.ov-switcher-trigger[aria-expanded="true"] { border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.ov-switcher-trigger .yb-tile { --tile: 40px; transition: background-color var(--dur-2) var(--ease-out); }
.ov-switcher-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ov-switcher-name, .ov-switcher-desc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ov-switcher-name { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1.3; }
.ov-switcher-desc { font-size: var(--fs-12); line-height: 1.4; color: var(--c-text-3); }
.ov-switcher-trigger > .yb-icon { width: 18px; height: 18px; margin-left: 6px; color: var(--c-text-3); }

.ov-switcher-panel { width: 320px; }
.ov-switcher-panel .yb-option { min-height: 52px; gap: 12px; }
.ov-switcher-panel .yb-tile { --tile: 34px; }
.ov-switcher-panel .yb-menu-item { gap: 12px; min-height: 44px; }
.ov-switcher-panel .yb-menu-item > .yb-icon { margin: 0 8px; }
.ov-option-text { display: flex; flex-direction: column; min-width: 0; }
.ov-option-name { font-size: var(--fs-14); line-height: 1.35; }
.ov-option-desc { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: 1.35; color: var(--c-text-3); }

/* ---------- 核心指标 ---------- */
.ov-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.ov-metric { display: flex; flex-direction: column; padding: 18px 20px 0; overflow: hidden; }
.ov-metric[data-metric="downloads"] { --metric-c: var(--c-chart-downloads); }
.ov-metric[data-metric="revenue"]   { --metric-c: var(--c-chart-revenue); }
.ov-metric[data-metric="releases"]  { --metric-c: var(--c-chart-releases); }
.ov-metric-head { display: flex; align-items: center; gap: 10px; }
.ov-metric-head .yb-tile { --tile: 32px; }
.ov-metric-label { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-2); }
.ov-metric-help { margin: -4px -6px -4px auto; }
.ov-metric-value {
  margin-top: 16px;
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.ov-metric-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; margin-top: 10px; }
.ov-metric-hint { font-size: var(--fs-13); color: var(--c-text-3); }

/* 迷你折线：贴着卡片底边，左右出血 */
.ov-spark { display: block; width: calc(100% + 40px); height: 56px; margin: 14px -20px 0; color: var(--metric-c); }
.ov-spark-line { stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }

/* 每周上线柱：同样从卡片底边长出，当前周高亮 */
.ov-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 14px; }
.ov-bar {
  flex: 1;
  height: var(--h, 10%);
  border-radius: 5px 5px 0 0;
  background: var(--c-mint-100);
  transition: height var(--dur-4) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.ov-bar:last-child, .ov-bar:hover { background: var(--c-mint-500); }
.ov-bar.is-empty { background: var(--c-gray-100); }

/* 加载中：稍作延迟再变淡，接口很快返回时不闪烁 */
.ov-dim { transition: opacity var(--dur-2) var(--ease-out); }
.ov.is-loading .ov-dim { opacity: .45; transition-delay: 100ms; }

/* ---------- 数据趋势 ---------- */
.ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}
.ov-trend-controls { display: flex; flex-wrap: wrap; gap: 8px; }

.ov-chart {
  --chart-c: var(--c-chart-downloads);
  position: relative;
  height: 280px;
  margin: 4px -6px 0;
  color: var(--chart-c);
  transition: color var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.ov-chart[data-series="revenue"] { --chart-c: var(--c-chart-revenue); }
.ov-chart-svg { display: block; overflow: visible; touch-action: pan-y; }
.ov-chart-grid line { stroke: var(--c-gray-150); stroke-dasharray: 3 4; }
.ov-chart-grid line.is-base { stroke: var(--c-gray-200); stroke-dasharray: none; }
.ov-chart-grid text, .ov-chart-x text { font-family: var(--font-num); font-size: 11px; fill: var(--c-text-3); }
.ov-chart-grid.is-fresh text { animation: ov-fade var(--dur-3) var(--ease-out); }
.ov-chart-line { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-chart-guide { stroke: var(--c-gray-300); stroke-dasharray: 3 3; opacity: 0; }
.ov-chart-dot { fill: var(--c-surface); stroke: currentColor; stroke-width: 2.5; opacity: 0; }
.ov-chart.is-hover .ov-chart-guide, .ov-chart.is-hover .ov-chart-dot { opacity: 1; }

.ov-chart-tip {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  min-width: 136px;
  padding: 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  color: var(--c-text-1);
  white-space: nowrap;
  pointer-events: none;
  transition: transform 90ms var(--ease-out);
}
.ov-chart-tip-date { font-size: var(--fs-12); color: var(--c-text-3); }
.ov-chart-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-2); }
.ov-chart-tip-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-c); }
.ov-chart-tip-value { margin-left: auto; padding-left: 16px; font-weight: var(--fw-semibold); color: var(--c-text-1); }
@keyframes ov-fade { from { opacity: 0; } }

/* ---------- 最近发布 ---------- */
.ov-releases .yb-card-body { padding-top: 6px; padding-bottom: 8px; }
.ov-release-list {
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.ov-release-list.is-swapping { opacity: 0; transform: translateY(4px); }
.ov-release { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.ov-release + .ov-release { border-top: 1px solid var(--c-divider); }
.ov-release .yb-tile { --tile: 36px; }
.ov-release-main { flex: 1; min-width: 0; }
.ov-release-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ov-release-name { font-weight: var(--fw-semibold); white-space: nowrap; }
.ov-release-ver { font-size: var(--fs-12); color: var(--c-text-3); }
.ov-release-desc {
  margin-top: 2px;
  overflow: hidden;
  font-size: var(--fs-13);
  color: var(--c-text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ov-release-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.ov-release-time { font-size: var(--fs-12); color: var(--c-text-3); }

/* ---------- 响应式：按内容区宽度（容器查询），侧边栏收起时也能正确适配 ---------- */
@container main (max-width: 1060px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
}
@container main (max-width: 880px) {
  .ov-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-metric[data-metric="releases"] { grid-column: 1 / -1; }
}
@container main (max-width: 560px) {
  .ov .page-head { flex-wrap: nowrap; }
  .ov-switcher { flex: 1; }
  .ov-switcher-trigger { width: 100%; min-width: 0; }
  .ov .page-meta { display: none; }
  .ov-metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
  .ov-metric[data-metric="releases"] { grid-column: auto; }
  .ov-metric-value { font-size: 28px; }
  .ov-grid { gap: 12px; }
  .ov-chart { height: 220px; }
}