/* ============================================================
 * market_site.css - 市场化工具集与「新能源助手」站点外框的衔接层
 *
 * 与 css/tools_site.css 的关系：本文件最后加载，负责把 7 个市场化
 * 分类页（m_price / m_vpp / m_direct / m_stor / m_wind / m_dist /
 * m_eng）的外观与布局对齐既有工具页（如 tools/wind.asp）。
 *
 * 四件事：
 *   1) 默认宽度：取消各页 CSS 的 1240px 定宽，与 .tools-wrap 一致铺满内容区
 *   2) 菜单风格：直接复用 .tools-subnav .nav-btn（服务端渲染的胶囊按钮）
 *   3) 单工具显示：.mk-wrap > .panel 默认隐藏，仅 .on 显示，一页一工具
 *   4) 多分辨率：1600 / 1280 / 1024 / 900 / 760 / 640 / 480 七档断点
 *
 * 各页 CSS（m_*.css）只保留主题令牌与组件外观，布局一律由本文件接管。
 * ============================================================ */

/* ---------- 1. 宽度对齐既有工具页（.tools-wrap） ---------- */
.mk-wrap {
  max-width: none;          /* 覆盖各页 CSS 的 1240px 定宽 */
  margin: 0 auto 20px;
  padding: 0 4px 28px;
}

/* ---------- 2. 单工具显示：默认全隐藏，仅当前工具显示 ---------- */
/* 首屏由 ASP 内联的 #tN{display:block} 直出（ID 选择器优先级更高），
   脚本接管后由 .on 控制，两者并存不冲突（同 wind.asp 的 twInitStyle）。 */
.mk-wrap > .panel { display: none; }
.mk-wrap > .panel.on { display: block; }
/* 只显示一个工具时，不再需要面板之间的虚线分隔 */
.mk-wrap > .panel {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ---------- 3. 单行导航：返回 + 本页工具 ---------- */
.mk-navpanel { padding-top: 12px; padding-bottom: 12px; }
.mk-subnav {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  align-items: center;
}
/* 工具数量多时（如 15 个）按钮行允许更高，不做裁切 */
.mk-subnav .nav-btn { white-space: normal; text-align: center; }

/* ---------- 3b. 图表自适应：限制最大高度，保持原始比例 ---------- */
/* 各页 CSS 里 canvas 为 width:100%;height:auto，宽屏下会按比例被拉得过高；
   改为以原始比例显示并封顶，避免图表占据过多页面高度、更自然。 */
.mk-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
}

/* ---------- 4. 多分辨率自适应 ---------- */

/* 4K / 大屏：左参数栏加宽，右结果区充分利用横向空间 */
@media (min-width: 1600px) {
  .mk-wrap .grid { grid-template-columns: 380px 1fr; }
  .mk-wrap .grid.wide { grid-template-columns: 420px 1fr; }
  .mk-wrap .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}
/* 常见桌面 1280–1599 */
@media (min-width: 1280px) and (max-width: 1599px) {
  .mk-wrap .grid { grid-template-columns: 352px 1fr; }
  .mk-wrap .grid.wide { grid-template-columns: 384px 1fr; }
}
/* 小笔电 / 平板横屏 1024–1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-wrap .grid { grid-template-columns: 320px 1fr; }
  .mk-wrap .grid.wide { grid-template-columns: 340px 1fr; }
  .mk-wrap .kpis { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
}
/* 平板竖屏 / 小窗 901–1023：保留双列但进一步收窄 */
@media (min-width: 901px) and (max-width: 1023px) {
  .mk-wrap .grid { grid-template-columns: 296px 1fr; }
  .mk-wrap .grid.wide { grid-template-columns: 312px 1fr; }
}
/* ≤900：单列堆叠（参数在上、结果在下） */
@media (max-width: 900px) {
  .mk-wrap .grid,
  .mk-wrap .grid.wide { grid-template-columns: 1fr; }
  .mk-wrap .grid > div { min-width: 0; }
  /* 结果区卡片允许横向滚动，避免宽表撑破页面 */
  .mk-wrap .box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mk-wrap .scroll { max-height: 360px; }
  .mk-wrap .ptitle { font-size: 15px; }
}
/* ≤760：三列输入组降为两列，表格与画布收紧 */
@media (max-width: 760px) {
  .mk-wrap { font-size: 13.6px; }
  .mk-wrap .row3 { grid-template-columns: 1fr 1fr; }
  .mk-wrap table { font-size: 12px; }
  .mk-wrap th, .mk-wrap td { padding: 5px 6px; }
  .mk-wrap .kpis { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
  .mk-wrap .kpi b { font-size: 17px; }
  .mk-wrap .scroll { max-height: 320px; }
  .mk-subnav .nav-btn { font-size: 12.5px; padding: 6px 11px; }
}
/* ≤640：导航按钮缩小，画布降低高度占比 */
@media (max-width: 640px) {
  .mk-wrap { padding: 0 2px 22px; }
  .mk-wrap .box { padding: 14px 14px; border-radius: 12px; }
  .mk-wrap .row2 { grid-template-columns: 1fr 1fr; }
  .mk-wrap .row3 { grid-template-columns: 1fr 1fr; }
  .mk-wrap canvas { min-height: 160px; max-height: 240px; }
  .mk-navpanel { padding: 12px 14px; }
}
/* ≤480：手机竖屏，全部单列 */
@media (max-width: 480px) {
  .mk-wrap .row2,
  .mk-wrap .row3 { grid-template-columns: 1fr; }
  .mk-wrap .kpis { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .mk-wrap .ptitle { font-size: 14.5px; padding: 6px 10px; }
  .mk-subnav .nav-btn { font-size: 12px; padding: 5px 10px; }
  .mk-wrap .box { padding: 12px 12px; }
}

/* ---------- 5. 无障碍：尊重「减少动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-wrap button { transition: none; }
  .mk-wrap button:hover { transform: none; }
}

/* ---------- 6. 导航按钮下方的工具说明区 ----------
 * 由页面 JS 把当前工具的 .src 说明文字镜像到这里（仅在 RELOCATE 列表内的工具）；
 * 面板内的 .src 会被隐藏以避免重复显示。样式与 .src 保持一致但作为导航区卡片。 */
.mk-tooldesc {
  margin: 10px 0 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tx3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: 8px;
}
.mk-tooldesc:empty { display: none; }
.mk-tooldesc b { color: var(--tx2); font-weight: 600; }

/* ---------- 7. 工具版本号徽章 ----------
 * 由 market/js/market_ver.js 注入在每个工具面板标题（.ptitle）之后。
 * 造型与 tools/css/ui_enhance.css 里 .tools-wrap .tool-ver 一致，
 * 保证 5 个设计页与 7 个市场化页的版本号外观统一。 */
.mk-wrap .tool-ver,
.ptitle .tool-ver {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line2);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: .5em;
  vertical-align: middle;
  white-space: nowrap;
}