/* ============================================================
   关于页 · 工作台(Workbench)样式
   结构: themes/butterfly/layout/includes/page/about.pug
   风格: 数据面板方块布局(白卡+浅描边,暗色深卡),热力图/柱状图为绿色系
   体系: 经 inject.head 全站注入,选择器均圈定在 #about-page 内
   ============================================================ */

/* ---- 页面外壳:去掉 #page 默认卡片边框/内边距 ---- */
#page:has(#about-page) {
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#page:has(#about-page) .page-title {
  display: none;
}

.page:has(#about-page) #footer-wrap {
  opacity: 1;
  overflow: visible;
  height: auto !important;
  min-height: 16px;
}

#web_bg ~ .page:has(#about-page) {
  background: var(--june-background);
}

/* ---- 布局骨架 ---- */
#about-page.wb {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 卡片基础:白底浅描边,无重阴影(同数据面板观感) */
#about-page .wb-card {
  background: var(--june-card-bg, #fff);
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: none;
}

[data-theme="dark"] #about-page .wb-card {
  border-color: #2c2c30;
}

.wb-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--june-fontcolor, #4c4948);
}

.wb-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wb-card-sub {
  font-size: 12px;
  color: var(--june-secondtext, #999);
}

/* ---- 统计磁贴 ---- */
#about-page .wb-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

#about-page .wb-stat {
  background: var(--june-card-bg, #fff);
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

#about-page .wb-stat:hover {
  border-color: #3b70fc;
  transform: translateY(-3px);
}

[data-theme="dark"] #about-page .wb-stat {
  border-color: #2c2c30;
}

#about-page .wb-stat-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--june-fontcolor, #4c4948);
  white-space: nowrap;
}

#about-page .wb-stat-label {
  font-size: 13px;
  color: var(--june-secondtext, #999);
}

/* ---- 两栏行:个人资料 + 快捷导航 ---- */
#about-page .wb-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  align-items: stretch;
}

/* 个人资料卡 */
#about-page .wb-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

#about-page .wb-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e6e9f0;
}

[data-theme="dark"] #about-page .wb-avatar {
  border-color: #2c2c30;
}

#about-page .wb-profile-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--june-fontcolor, #4c4948);
}

#about-page .wb-profile-signature {
  margin-top: 4px;
  font-size: 13px;
  color: var(--june-secondtext, #999);
}

#about-page .wb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

#about-page .wb-chip {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--june-secondbg, #f7f7f9);
  color: var(--june-secondtext, #666);
}

[data-theme="dark"] #about-page .wb-chip {
  background: #30343f;
  color: #a1a2b8;
}

#about-page .wb-profile-line {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--june-secondtext, #666);
}

/* 快捷导航卡 */
#about-page .wb-nav .wb-card-title {
  display: block;
  margin-bottom: 14px;
}

#about-page .wb-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

#about-page .wb-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 12px;
  background: var(--june-secondbg, #f7f7f9);
  border: 1px solid transparent;
  color: var(--june-fontcolor, #4c4948);
  font-size: 15px;
  transition: all 0.3s ease;
}

#about-page .wb-nav-btn i {
  font-size: 15px;
}

#about-page .wb-nav-btn:hover {
  border-color: #3b70fc;
  color: #3b70fc;
  background: transparent;
  transform: translateY(-2px);
}

[data-theme="dark"] #about-page .wb-nav-btn {
  background: #30343f;
}

[data-theme="dark"] #about-page .wb-nav-btn:hover {
  color: #6b97ff;
  border-color: #6b97ff;
}

/* ---- 创作热力图 ---- */
#about-page .wb-heat-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

#about-page .wb-heat-inner {
  min-width: 640px;
}

/* 53 列 × 7 行,大圆角格子,大小随卡片宽度伸缩 */
#about-page .wb-heat-grid {
  display: grid;
  grid-template-rows: repeat(7, 22px);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
}

#about-page .wb-heat-cell {
  border-radius: 5px;
  background: #f0f2f0;
}

#about-page .wb-heat-cell.lv1 { background: #d8eedd; }
#about-page .wb-heat-cell.lv2 { background: #aadcb9; }
#about-page .wb-heat-cell.lv3 { background: #7cc99a; }
#about-page .wb-heat-cell.lv4 { background: #4db87d; }
#about-page .wb-heat-cell.future { opacity: 0.45; }

[data-theme="dark"] #about-page .wb-heat-cell { background: #2d333b; }
[data-theme="dark"] #about-page .wb-heat-cell.lv1 { background: #0e4429; }
[data-theme="dark"] #about-page .wb-heat-cell.lv2 { background: #006d32; }
[data-theme="dark"] #about-page .wb-heat-cell.lv3 { background: #26a641; }
[data-theme="dark"] #about-page .wb-heat-cell.lv4 { background: #39d353; }

/* 月份标签:1月→12月 均匀分布 */
#about-page .wb-heat-months {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

#about-page .wb-heat-months span {
  font-size: 14px;
  color: var(--june-secondtext, #999);
}

/* ---- 图表行:左每月发布柱状图,右每日趋势折线图 ---- */
#about-page .wb-trend-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items: stretch;
}

#about-page .wb-card.wb-monthly,
#about-page .wb-card.wb-trend {
  display: flex;
  flex-direction: column;
}

/* 每月发布柱状图:灰轨道 + 圆角绿色填充,数量/月份在轨道下方 */
#about-page .wb-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 6px;
}

#about-page .wb-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#about-page .wb-bar-track {
  width: 100%;
  max-width: 48px;
  height: 200px;
  border-radius: 8px;
  background: #f0f2f5;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

[data-theme="dark"] #about-page .wb-bar-track {
  background: #26262a;
}

#about-page .wb-bar-fill {
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #63cc8e 0%, #2ea968 100%);
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] #about-page .wb-bar-fill {
  background: linear-gradient(180deg, #39d353 0%, #0e4429 100%);
}

#about-page .wb-bar-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--june-secondtext, #888);
  line-height: 1;
}

#about-page .wb-bar-label {
  font-size: 14px;
  color: var(--june-secondtext, #999);
}

/* 折线图卡:svg 撑满剩余高度(等高对齐) */
#about-page .wb-trend-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--june-secondtext, #999);
}

#about-page .wb-trend-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ea968;
}

#about-page .wb-trend-body {
  flex: 1;
  min-height: 220px;
}

#about-page .wb-trend-svg {
  width: 100%;
  height: 100%;
  display: block;
}

#about-page .wb-trend-line {
  fill: none;
  stroke: #2ea968;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#about-page .wb-trend-dot {
  fill: #fff;
  stroke: #2ea968;
  stroke-width: 2;
}

[data-theme="dark"] #about-page .wb-trend-line { stroke: #39d353; }
[data-theme="dark"] #about-page .wb-trend-dot { fill: #1b1c20; stroke: #39d353; }

#about-page .wb-trend-xlabel {
  font-size: 11px;
  fill: var(--june-secondtext, #999);
}

[data-theme="dark"] #about-page .wb-trend-xlabel { fill: #a1a2b8; }

/* 本期概览小磁贴(整行六块) */
#about-page .wb-ov-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

/* ---- 文章统计图表:加高容器(压过插件注入的 300px 默认) ---- */
#about-page #posts-chart,
#about-page #tags-chart {
  height: 350px !important;
}

#about-page #categories-chart {
  height: 500px !important;
}

#about-page .wb-ov-tile {
  background: var(--june-secondbg, #f7f7f9);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

[data-theme="dark"] #about-page .wb-ov-tile {
  background: #30343f;
}

#about-page .wb-ov-label {
  font-size: 12px;
  color: var(--june-secondtext, #999);
}

#about-page .wb-ov-numline {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

#about-page .wb-ov-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--june-fontcolor, #4c4948);
  white-space: nowrap;
}

#about-page .wb-ov-unit {
  font-size: 12px;
  color: var(--june-secondtext, #999);
}

#about-page .wb-ov-sub {
  font-size: 11px;
  color: var(--june-secondtext, #999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 响应式 ---- */
@media screen and (max-width: 1100px) {
  #about-page .wb-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  #about-page .wb-row {
    grid-template-columns: 1fr;
  }

  #about-page .wb-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  #about-page .wb-stat {
    padding: 14px 10px;
  }

  #about-page .wb-stat-num {
    font-size: 26px;
  }

  #about-page .wb-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #about-page .wb-card {
    padding: 14px 16px;
  }

  #about-page .wb-trend-row {
    grid-template-columns: 1fr;
  }

  #about-page .wb-ov-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}