/*
 * PROCESS + ENERGY HIERARCHY V10
 * Page-local refinement layered after system-hierarchy-v10.css.
 * The shared navigation/header is intentionally not addressed here.
 */

/* -------------------------------------------------------------------------- */
/* Process: one continuous stage judgment band, with a decisive active stage. */
/* -------------------------------------------------------------------------- */

body[data-page="process"] .process-flow-body {
  grid-template-rows: minmax(260px, 1fr) 78px;
  gap: 10px;
  padding: 12px 15px 10px;
}

body[data-page="process"] .flow-detail {
  position: relative;
  display: grid;
  grid-template-columns: 1.42fr 1.04fr 1.04fr .94fr;
  gap: 0;
  min-height: 78px;
  overflow: hidden;
  border: 1px solid rgba(68, 212, 228, .34);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(8, 64, 81, .64), rgba(3, 34, 57, .82) 31%, rgba(3, 29, 51, .92) 70%, rgba(52, 42, 18, .46)),
    url("./assets/image2-deep-water-bg-v2.png") center 55% / cover no-repeat;
  box-shadow: inset 0 1px rgba(171, 232, 248, .045), 0 10px 24px rgba(0, 8, 20, .22);
}

body[data-page="process"] .flow-detail::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v10-aqua), var(--v10-cyan) 46%, rgba(52, 140, 228, .34) 76%, var(--v10-amber));
  opacity: .78;
  content: "";
}

body[data-page="process"] .flow-detail .stat-box,
body[data-page="process"] .flow-detail .stat-box:first-child {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 9px 18px !important;
  justify-content: center;
  border: 0 !important;
  border-left: 1px solid rgba(68, 212, 228, .18) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="process"] .flow-detail .stat-box:first-child {
  border-left: 0 !important;
}

body[data-page="process"] .flow-detail .stat-box:last-child {
  background: linear-gradient(90deg, rgba(252, 196, 68, .035), rgba(252, 196, 68, .09)) !important;
}

body[data-page="process"] .flow-detail .stat-box span {
  color: var(--v10-text-3);
  font-size: 12px;
  line-height: 1.2;
}

body[data-page="process"] .flow-detail .stat-box strong,
body[data-page="process"] .flow-detail .stat-box:first-child strong {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: var(--v10-text);
  font-size: 20px;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="process"] .flow-detail .stat-box:first-child strong {
  color: #7bf0de;
  font-size: 24px;
}

body[data-page="process"] .flow-detail .stat-box:last-child strong {
  color: var(--v10-amber);
  font-size: 22px;
}

body[data-page="process"] .flow-detail .stat-box small {
  margin-left: 5px;
  color: var(--v10-text-3);
  font-size: 11px;
}

body[data-page="process"] .process-node {
  opacity: .82;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

body[data-page="process"] .process-node:hover,
body[data-page="process"] .process-node:focus-visible {
  opacity: 1;
}

body[data-page="process"] .process-node.active {
  z-index: 8;
  opacity: 1;
  border-color: rgba(101, 235, 255, .92);
  box-shadow: 0 22px 48px rgba(0, 5, 13, .46), 0 0 0 2px rgba(68, 212, 228, .10), 0 0 30px rgba(68, 212, 228, .18);
  transform: translateY(-10px) scale(1.055);
}

body[data-page="process"] .process-node.warning.active {
  border-color: rgba(252, 196, 68, .92);
  box-shadow: 0 22px 48px rgba(0, 5, 13, .46), 0 0 0 2px rgba(252, 196, 68, .10), 0 0 32px rgba(252, 196, 68, .18);
}

body[data-page="process"] .process-node.active::before {
  color: #b9f8ff;
  font-size: 10px;
  content: "当前 · " counter(process-stage, decimal-leading-zero);
}

body[data-page="process"] .process-node.warning.active::before {
  color: #ffdc83;
}

body[data-page="process"] .process-node.active b {
  color: #f7fdff;
  font-size: 15px;
  font-weight: 740;
}

body[data-page="process"] .process-node.active > span:not(.stage-symbol):not(.process-direction) {
  color: #d6eef4;
  font-size: 11px;
}

body[data-page="process"] .process-node.active small {
  color: #9ab7c2;
  font-size: 10px;
}

body[data-page="process"] .process-bottom {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

body[data-page="process"] .pq-axis {
  fill: #8299aa;
  font-size: 10.5px;
}

/* -------------------------------------------------------------------------- */
/* Energy: the flow/decision field leads; the 7-day chart uses its full area. */
/* -------------------------------------------------------------------------- */

body[data-page="energy"] .page-kpi-rail {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

body[data-page="energy"] .energy-layout {
  grid-template-columns: minmax(270px, .52fr) minmax(790px, 1.88fr) minmax(340px, .64fr);
  grid-template-rows: minmax(0, 1.46fr) minmax(228px, .54fr);
}

body[data-page="energy"] .energy-center {
  grid-template-rows: minmax(0, 1fr) 90px;
}

body[data-page="energy"] .energy-center > .ops-panel:nth-child(2) {
  border-color: rgba(68, 212, 228, .64) !important;
  box-shadow: inset 0 1px rgba(164, 220, 245, .045), 0 20px 44px rgba(0, 7, 20, .30), 0 0 30px rgba(52, 140, 228, .08) !important;
}

body[data-page="energy"] .energy-sankey {
  grid-template-columns:
    clamp(150px, 9.8cqw, 190px)
    minmax(66px, .9fr)
    minmax(350px, 3.45fr)
    minmax(38px, .46fr)
    clamp(148px, 8.9cqw, 174px);
  padding: 13px 18px;
}

body[data-page="energy"] .energy-source strong,
body[data-page="energy"] .energy-output strong {
  font-size: 18px;
}

body[data-page="energy"] .energy-source span,
body[data-page="energy"] .energy-output span,
body[data-page="energy"] .energy-source small,
body[data-page="energy"] .energy-output small {
  font-size: 11px;
}

body[data-page="energy"] .energy-node {
  min-height: 44px;
  padding: 5px 12px 4px 15px;
  font-size: 12px;
}

body[data-page="energy"] .energy-node b {
  font-size: 11.5px;
}

body[data-page="energy"] .energy-node small {
  color: #789aaa;
  font-size: 10.5px;
}

body[data-page="energy"] .energy-right > .ops-panel:nth-child(2) {
  border-color: rgba(252, 196, 68, .36) !important;
}

body[data-page="energy"] .energy-decision-card h3 {
  font-size: 12.5px;
}

body[data-page="energy"] .energy-decision-card p,
body[data-page="energy"] .energy-decision-card > div:first-child,
body[data-page="energy"] .energy-decision-card dt {
  font-size: 10.5px;
}

body[data-page="energy"] .energy-decision-card dd {
  font-size: 17px;
}

body[data-page="energy"] .energy-bottom {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .45fr);
}

body[data-page="energy"] .energy-bottom > .ops-panel:first-child {
  border-color: rgba(68, 212, 228, .46) !important;
}

body[data-page="energy"] .energy-bottom > .ops-panel:first-child .ops-panel-body {
  padding: 8px 12px 10px;
}

body[data-page="energy"] .energy-v10-trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 14cqw, 270px);
  gap: 12px;
  height: 100%;
  min-height: 0;
}

body[data-page="energy"] .energy-v10-chart {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
}

body[data-page="energy"] .energy-v10-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

body[data-page="energy"] .energy-v10-svg-host {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-page="energy"] .energy-v10-grid {
  stroke: rgba(112, 160, 190, .17);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body[data-page="energy"] .energy-v10-axis,
body[data-page="energy"] .energy-v10-limit-label {
  fill: #8199aa;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 12.5px;
}

body[data-page="energy"] .energy-v10-limit {
  stroke: rgba(252, 196, 68, .78);
  stroke-width: 1.2;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
}

body[data-page="energy"] .energy-v10-series {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

body[data-page="energy"] .energy-v10-series.is-energy {
  stroke: var(--v10-cyan);
  filter: drop-shadow(0 0 5px rgba(68, 212, 228, .28));
}

body[data-page="energy"] .energy-v10-series.is-water {
  stroke: var(--v10-blue);
  stroke-width: 2.5;
}

body[data-page="energy"] .energy-v10-point {
  cursor: pointer;
  outline: none;
  stroke: #041d31;
  stroke-width: 2;
}

body[data-page="energy"] .energy-v10-point.is-energy {
  fill: #74edf3;
}

body[data-page="energy"] .energy-v10-point.is-water {
  fill: #62aaf4;
}

body[data-page="energy"] .energy-v10-point:focus-visible {
  stroke: #fff;
  stroke-width: 3;
}

body[data-page="energy"] .energy-v10-insight-rail {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 12px 14px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-left: 1px solid rgba(68, 212, 228, .25);
  background: linear-gradient(100deg, rgba(7, 47, 75, .66), rgba(3, 29, 51, .26));
}

body[data-page="energy"] .energy-v10-insight-label {
  color: var(--v10-text-3);
  font-size: 11px;
}

body[data-page="energy"] .energy-v10-insight-rail > strong {
  margin-top: 5px;
  color: #78edf1;
  font-size: 29px;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body[data-page="energy"] .energy-v10-insight-rail > strong small {
  margin-left: 5px;
  color: #88a3b2;
  font-size: 11px;
  font-weight: 500;
}

body[data-page="energy"] .energy-v10-insight-summary {
  margin: 6px 0 0;
  color: var(--v10-text-2);
  font-size: 12px;
  line-height: 1.35;
}

body[data-page="energy"] .energy-v10-insight-summary b {
  color: var(--v10-aqua);
  font-weight: 680;
}

body[data-page="energy"] .energy-v10-insight-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

body[data-page="energy"] .energy-v10-insight-metrics span {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(52, 140, 228, .22);
  background: rgba(2, 25, 45, .58);
  color: var(--v10-text-3);
  font-size: 10px;
}

body[data-page="energy"] .energy-v10-insight-metrics b {
  display: block;
  margin-top: 2px;
  color: var(--v10-text);
  font-size: 13px;
}

body[data-page="energy"] .energy-v10-tooltip {
  position: absolute;
  z-index: 8;
  min-width: 128px;
  padding: 8px 10px;
  border: 1px solid rgba(68, 212, 228, .42);
  border-radius: 4px;
  background: rgba(3, 23, 41, .97);
  box-shadow: 0 12px 28px rgba(0, 5, 14, .34);
  color: var(--v10-text-2);
  font-size: 11px;
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, -52%);
  transition: opacity .14s ease;
}

body[data-page="energy"] .energy-v10-tooltip.visible {
  opacity: 1;
}

body[data-page="energy"] .energy-v10-tooltip b {
  display: block;
  margin-bottom: 2px;
  color: var(--v10-text);
  font-size: 12px;
}

body[data-page="energy"] .energy-bottom > .ops-panel:nth-child(2) .ops-table th,
body[data-page="energy"] .energy-bottom > .ops-panel:nth-child(2) .ops-table td {
  font-size: 12px;
}

@container console-screen (max-width: 1500px) {
  body[data-page="process"] .ops-panel-head h2,
  body[data-page="energy"] .ops-panel-head h2 {
    font-size: 16px;
  }

  body[data-page="process"] .process-flow-body {
    grid-template-rows: minmax(190px, 1fr) 66px;
    gap: 7px;
    padding: 8px 10px 7px;
  }

  body[data-page="process"] .flow-detail {
    grid-template-columns: 1.3fr 1fr 1fr .9fr;
    min-height: 66px;
  }

  body[data-page="process"] .flow-detail .stat-box,
  body[data-page="process"] .flow-detail .stat-box:first-child {
    padding: 7px 11px !important;
  }

  body[data-page="process"] .flow-detail .stat-box span {
    font-size: 12px;
  }

  body[data-page="process"] .flow-detail .stat-box strong,
  body[data-page="process"] .flow-detail .stat-box:first-child strong {
    font-size: 17px;
  }

  body[data-page="process"] .flow-detail .stat-box:first-child strong {
    font-size: 19px;
  }

  body[data-page="process"] .flow-detail .stat-box:last-child strong {
    font-size: 18px;
  }

  body[data-page="process"] .process-node.active {
    transform: translateY(-7px) scale(1.035);
  }

  body[data-page="process"] .process-range-readout b,
  body[data-page="process"] .process-node b,
  body[data-page="process"] .process-node > span:not(.stage-symbol):not(.process-direction),
  body[data-page="process"] .return-line,
  body[data-page="process"] .return-line span,
  body[data-page="process"] .control-row,
  body[data-page="process"] .control-row b,
  body[data-page="process"] .notice-copy b {
    font-size: 12px;
  }

  body[data-page="process"] .process-range-readout span,
  body[data-page="process"] .process-node small,
  body[data-page="process"] .notice-copy p,
  body[data-page="process"] .notice-copy small {
    display: none;
  }

  body[data-page="process"] .pq-axis,
  body[data-page="process"] .pq-process-trend-summary span,
  body[data-page="process"] .pq-process-trend-summary b {
    font-size: 12px;
  }

  body[data-page="process"] .pq-process-trend-summary p,
  body[data-page="process"] .pq-process-trend-summary em {
    display: none;
  }

  body[data-page="energy"] .page-kpi-rail .kpi-item {
    padding-right: 8px;
    padding-left: 8px;
  }

  body[data-page="energy"] .page-kpi-rail .kpi-label {
    font-size: 12px;
  }

  body[data-page="energy"] .page-kpi-rail .kpi-meta {
    font-size: 12px;
  }

  body[data-page="energy"] .page-kpi-rail .kpi-label > span:last-child,
  body[data-page="energy"] .page-kpi-rail .kpi-meta > span:last-child {
    display: none;
  }

  body[data-page="energy"] .page-kpi-rail .kpi-value strong {
    font-size: 22px;
  }

  body[data-page="energy"] .energy-layout {
    grid-template-columns: minmax(230px, .48fr) minmax(0, 1.74fr) minmax(286px, .58fr);
    grid-template-rows: minmax(0, 1fr) 178px;
  }

  body[data-page="energy"] .energy-center {
    grid-template-rows: minmax(0, 1fr) 145px;
  }

  body[data-page="energy"] .energy-sankey {
    grid-template-columns: 124px minmax(34px, .54fr) minmax(270px, 2.9fr) minmax(26px, .34fr) 126px;
    padding: 8px 9px;
  }

  body[data-page="energy"] .energy-nodes {
    gap: 4px;
  }

  body[data-page="energy"] .energy-left > .ops-panel:nth-child(2) .ops-panel-head {
    padding-right: 6px;
    padding-left: 6px;
  }

  body[data-page="energy"] .energy-left > .ops-panel:nth-child(2) .ops-panel-head h2 {
    letter-spacing: 0;
    white-space: nowrap;
  }

  body[data-page="energy"] .energy-left > .ops-panel:nth-child(2) .segmented button {
    min-width: 38px;
    padding-right: 6px;
    padding-left: 6px;
  }

  body[data-page="energy"] .energy-source strong,
  body[data-page="energy"] .energy-output strong {
    font-size: 15px;
  }

  body[data-page="energy"] .energy-source span,
  body[data-page="energy"] .energy-output span,
  body[data-page="energy"] .energy-node,
  body[data-page="energy"] .energy-node b,
  body[data-page="energy"] .energy-unit-row,
  body[data-page="energy"] .energy-unit-row strong,
  body[data-page="energy"] .energy-decision-card > div:first-child,
  body[data-page="energy"] .energy-decision-card dt {
    font-size: 12px;
  }

  body[data-page="energy"] .energy-source small,
  body[data-page="energy"] .energy-output small,
  body[data-page="energy"] .energy-node small,
  body[data-page="energy"] .energy-decision-card p {
    display: none;
  }

  body[data-page="energy"] .energy-node {
    min-height: 32px;
    padding: 3px 8px 3px 10px;
  }

  body[data-page="energy"] .energy-bottom {
    grid-template-columns: minmax(0, 1.62fr) minmax(320px, .58fr);
  }

  body[data-page="energy"] .energy-v10-trend-layout {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 7px;
  }

  body[data-page="energy"] .energy-v10-axis,
  body[data-page="energy"] .energy-v10-limit-label {
    font-size: 12px;
  }

  body[data-page="energy"] .i2-chart-axis,
  body[data-page="energy"] .energy-mini-chart-head,
  body[data-page="energy"] .energy-mini-chart-head b,
  body[data-page="energy"] .energy-mini-chart-head strong {
    font-size: 12px;
  }

  body[data-page="energy"] .energy-v10-insight-rail {
    padding: 7px 9px;
  }

  body[data-page="energy"] .energy-v10-insight-rail > strong {
    font-size: 23px;
  }

  body[data-page="energy"] .energy-v10-insight-label,
  body[data-page="energy"] .energy-v10-insight-rail > strong small {
    font-size: 12px;
  }

  body[data-page="energy"] .energy-v10-insight-summary {
    font-size: 12px;
  }

  body[data-page="energy"] .energy-v10-insight-metrics {
    gap: 4px;
    margin-top: 5px;
  }

  body[data-page="energy"] .energy-v10-insight-metrics span {
    padding: 3px 5px;
    font-size: 12px;
  }

  body[data-page="energy"] .energy-v10-insight-metrics b {
    font-size: 12px;
  }
}

@container console-screen (min-width: 1501px) {
  body[data-page="energy"] .energy-center {
    grid-template-rows: minmax(0, 1fr) 194px;
  }
}

@container console-screen (max-height: 820px) {
  body[data-page="process"] .ops-panel-head h2,
  body[data-page="energy"] .ops-panel-head h2 {
    font-size: 16px;
  }

  body[data-page="process"] .process-flow-body {
    grid-template-rows: minmax(150px, 1fr) 62px;
  }

  body[data-page="process"] .flow-detail {
    min-height: 62px;
  }

  body[data-page="energy"] .energy-layout {
    grid-template-rows: minmax(0, 1fr) 172px;
  }

  body[data-page="energy"] .energy-center {
    grid-template-rows: minmax(0, 1fr) 145px;
  }

  body[data-page="energy"] .energy-mini-chart-head {
    display: none;
  }

  body[data-page="energy"] .energy-bottom > .ops-panel:first-child .ops-panel-body {
    padding-top: 4px;
    padding-bottom: 5px;
  }

  body[data-page="energy"] .energy-v10-insight-summary {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="process"] .process-node,
  body[data-page="energy"] .energy-v10-tooltip {
    transition: none;
  }
}