/* === _chart-frame.css === */
/* _chart-frame.css
 * 所有圖表元件共用的「框 + figcaption」layout。
 * 各圖表元件(time-allocation-chart / solution-flow / data-foundation 等)
 * 在 figure 內直接放單一 .chart-object SVG。圖表內容不要用 HTML grid / list 重排,
 * 讓手機與 PDF 都只縮放同一張固定比例的圖。
 *
 * 新增圖表元件時:
 *   1. 在自己的 .css 內定義內部結構樣式(如 .my-chart__stack)
 *   2. 把 figure 的 class name 加入下面的 selector 群組
 *   3. figcaption 預設置於底部、置中對齊
 */

.report-page .page-body > figure.time-allocation-chart,
.report-page .page-body > figure.solution-flow,
.report-page .page-body > figure.data-foundation,
.report-page .page-body > figure.revenue-line-chart,
.report-page .page-body > figure.milestone-roadmap,
.report-page .page-body > figure.cost-donut,
.time-allocation-chart,
.solution-flow,
.data-foundation,
.revenue-line-chart,
.milestone-roadmap,
.cost-donut {
  width: 100%;
  max-width: none;
  margin: var(--qj-space-3) 0 var(--qj-space-4);
  margin-left: 0;
  margin-right: 0;
  padding: var(--qj-space-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--qj-color-document);
  box-sizing: border-box;
  break-inside: avoid;
}

.chart-object {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.report-page .page-body > figure.cost-donut,
.cost-donut {
  width: min(78%, 128mm);
  margin-left: auto;
  margin-right: auto;
}

.time-allocation-chart figcaption,
.solution-flow figcaption,
.data-foundation figcaption,
.revenue-line-chart figcaption,
.milestone-roadmap figcaption,
.cost-donut figcaption {
  font-size: clamp(10px, 1.05cqw, 11px);
  color: var(--qj-color-muted);
  letter-spacing: 0.04em;
  line-height: 1.55;
  margin-top: var(--qj-space-3);
  text-align: center;
}

/* === cost-donut.css === */
/* cost-donut
 * Donut, center label, and legend are now one inline SVG. The figure gets a
 * smaller width cap in _chart-frame.css so it no longer dominates phone views.
 */

/* === data-foundation.css === */
/* data-foundation
 * The layered diagram is a single inline SVG. The fixed viewBox keeps layer
 * widths, labels, and relationship notes stable across report and mobile views.
 */

/* === milestone-roadmap.css === */
/* milestone-roadmap
 * The roadmap is a single inline SVG. Axis ticks, phases, and the current
 * marker share one coordinate system instead of separate HTML layout rules.
 */

/* === revenue-line-chart.css === */
/* revenue-line-chart
 * 三年營收趨勢折線圖。SVG-based,搭配 area fill、3 個 data point 與年度標籤。
 * 結構:<figure class="revenue-line-chart"> > <svg class="revenue-line-chart__svg"> + <figcaption>。
 * 外框、寬度、figcaption 統一由 _chart-frame.css 處理。
 */

.revenue-line-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(180px, 32cqw, 260px);
}

.revenue-line-chart .grid {
  stroke: var(--qj-color-line);
  stroke-width: 1;
}

.revenue-line-chart .grid-soft {
  stroke: var(--qj-color-line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}

.revenue-line-chart .axis-label {
  fill: var(--qj-color-muted);
  font-size: 10px;
  font-family: var(--qj-font-body);
  letter-spacing: 0.04em;
}

.revenue-line-chart .axis-unit {
  fill: var(--qj-color-muted);
  font-size: 9px;
  font-family: var(--qj-font-body);
  letter-spacing: 0.08em;
}

.revenue-line-chart .area {
  fill: var(--qj-chart-coral);
  fill-opacity: 0.07;
}

.revenue-line-chart .line {
  fill: none;
  stroke: var(--qj-chart-coral);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.revenue-line-chart .dot {
  fill: var(--qj-color-document);
  stroke: var(--qj-chart-coral);
  stroke-width: 1.8;
}

.revenue-line-chart .value-label {
  fill: var(--qj-color-ink);
  font-size: 11px;
  font-family: var(--qj-font-serif);
  font-weight: 500;
  text-anchor: middle;
  letter-spacing: 0.02em;
}

.revenue-line-chart .x-label {
  fill: var(--qj-color-ink);
  font-size: 10px;
  font-family: var(--qj-font-body);
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.revenue-line-chart .x-sub {
  fill: var(--qj-color-muted);
  font-size: 9px;
  font-family: var(--qj-font-body);
  text-anchor: middle;
  letter-spacing: 0.02em;
}

/* === solution-flow.css === */
/* solution-flow
 * The flow diagram is a single inline SVG. Keeping all labels inside the SVG
 * prevents narrow screens from reflowing the stages independently.
 */

/* === time-allocation-chart.css === */
/* time-allocation-chart
 * The chart is now a single inline SVG. Frame sizing and scaling are handled
 * by _chart-frame.css so mobile and PDF output scale the whole graphic.
 */