/*
 * Forecast Cone — chart styles（spec §1.7 UI）。
 *
 * 配對 shared/viz/forecast-cone.js。原本內嵌於 ainav.html，抽出後可被未來
 * 真實 forecast 頁面直接 <link>，不需 copy ainav.html 的 <style>。
 *
 * 依賴 shared/vars.css 提供的 design tokens（--primary / --surface / --border 等）。
 */

/* ========== Prediction Trumpet Chart Section ========== */
.viz-section { background: var(--card); }
.viz-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.viz-toggle {
  display: flex;
  width: fit-content;
  margin: 0 auto 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.viz-tab {
  padding: 10px 22px;
  font-size: var(--fs-small);
  font-family: inherit;
  font-weight: 500;
  background: transparent;
  color: var(--text2);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.viz-tab:hover { color: var(--primary); }
.viz-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,107,94,0.25);
}

/* ===== Density selector ===== */
.viz-density {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-width: 820px;
}
.viz-density-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text2);
  padding-right: 6px;
}
.viz-density-btn {
  flex: 1;
  min-width: 130px;
  padding: 8px 14px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: inherit;
}
.viz-density-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.viz-density-btn.active {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(15,107,94,0.15);
}
.viz-density-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
}
.viz-density-btn.active .viz-density-title { color: var(--primary-dark); }
.viz-density-desc {
  font-size: var(--fs-caption);
  color: var(--text3);
}
.viz-density-count {
  font-family: "Noto Serif TC", serif;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
  margin-top: 2px;
}
.viz-density-btn.active .viz-density-count { color: var(--accent); }
.viz-density-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--primary-dark);
  font-weight: 600;
  padding: 4px 10px;
  background: var(--primary-light);
  border-radius: 999px;
  margin-left: auto;
}
.viz-density-hint svg { width: 14px; height: 14px; }

/* Density dot overlays on past line */
.viz-density-dots circle {
  opacity: 0.85;
  transition: opacity 0.3s;
}
.viz-fan { transition: d 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

@media (max-width: 640px) {
  .viz-density { flex-direction: column; align-items: stretch; }
  .viz-density-btn { min-width: 0; width: 100%; }
  .viz-density-hint { margin-left: 0; text-align: center; justify-content: center; }
}

.viz-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.viz-chart-wrap {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  border: 1px solid var(--border);
}
.viz-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.viz-grid line { stroke: var(--border); stroke-width: 1; }
.viz-axis-label {
  font-size: 11px;
  fill: var(--text3);
  font-family: "Noto Sans TC", sans-serif;
}
.viz-now-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  animation: vizNowPulse 2.4s ease-in-out infinite;
}
.viz-now-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--primary);
  font-family: "Noto Sans TC", sans-serif;
}
@keyframes vizNowPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.viz-mode { transition: opacity 0.35s ease; }
.viz-mode.viz-mode--hidden { opacity: 0; pointer-events: none; }
.viz-metric-label {
  font-size: 11px;
  font-weight: 700;
  font-family: "Noto Sans TC", sans-serif;
}

/* Animated reveal — single 10s loop covers all phases */
.viz-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: vizDrawLine 10s ease-in-out infinite;
}
.viz-line--future {
  animation: vizDrawFuture 10s ease-in-out infinite;
}
.viz-fan {
  opacity: 0;
  transform-origin: 782px 200px;
  animation: vizFanReveal 10s ease-in-out infinite;
}
.viz-dot {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: vizDotPop 10s ease-in-out infinite;
}
.viz-dot-pulse {
  fill: none;
  stroke-width: 2;
  opacity: 0;
  animation: vizDotRing 10s ease-in-out infinite;
}

@keyframes vizDrawLine {
  0%   { stroke-dashoffset: 100; }
  28%  { stroke-dashoffset: 0; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { opacity: 0.15; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes vizDrawFuture {
  0%, 32%   { stroke-dashoffset: 100; opacity: 0; }
  48%       { stroke-dashoffset: 0; opacity: 0.9; }
  88%       { stroke-dashoffset: 0; opacity: 0.9; }
  96%, 100% { opacity: 0; }
}
@keyframes vizFanReveal {
  0%, 32%   { opacity: 0; transform: scaleY(0.05); }
  52%       { opacity: 0.9; transform: scaleY(1); }
  88%       { opacity: 0.9; transform: scaleY(1); }
  96%, 100% { opacity: 0; transform: scaleY(0.05); }
}
@keyframes vizDotPop {
  0%, 56%   { opacity: 0; transform: scale(0); }
  64%       { opacity: 1; transform: scale(1.5); }
  72%       { opacity: 1; transform: scale(1); }
  88%       { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes vizDotRing {
  0%, 56%   { opacity: 0; r: 4; }
  64%       { opacity: 0.7; r: 14; }
  78%, 100% { opacity: 0; r: 14; }
}

.viz-card.paused .viz-line,
.viz-card.paused .viz-line--future,
.viz-card.paused .viz-fan,
.viz-card.paused .viz-dot,
.viz-card.paused .viz-dot-pulse,
.viz-card.paused .viz-now-line {
  animation-play-state: paused;
}

/* Controls bar */
.viz-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.viz-play-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(15,107,94,0.25);
}
.viz-play-btn:hover { background: var(--primary-dark); transform: scale(1.06); }
.viz-play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viz-play-btn i { width: 16px; height: 16px; }
.viz-cycle-indicator { display: flex; gap: 6px; }
.viz-cycle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s, transform 0.3s;
}
.viz-cycle-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}
.viz-cycle-text {
  font-size: var(--fs-small);
  color: var(--text3);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Right-side callouts */
.viz-callouts dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.viz-callout {
  background: var(--card);
  border-left: 3px solid var(--primary);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 4px rgba(26,35,50,0.04);
}
.viz-callout dt {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.viz-callout dt span {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.04em;
}
.viz-callout dd {
  font-size: var(--fs-small);
  color: var(--text2);
  line-height: 1.65;
  margin: 0;
}
.viz-callout--accent { border-left-color: var(--accent); }
.viz-callout--blue { border-left-color: var(--blue); }

/* Loop legend */
.viz-legend-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--primary-light);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.viz-legend-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text);
}
.viz-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-small);
  flex-shrink: 0;
}
.viz-step-text small {
  display: block;
  color: var(--text3);
  font-size: var(--fs-caption);
  margin-top: 2px;
}
.viz-arrow { width: 18px; height: 18px; color: var(--text3); flex-shrink: 0; }
.viz-arrow-loop {
  color: var(--accent);
  animation: vizLoopSpin 3.2s linear infinite;
}
@keyframes vizLoopSpin {
  0%, 60% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.viz-legend-step {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.35s, box-shadow 0.35s;
  border: 1.5px solid transparent;
}
.viz-legend-step.active {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(15,107,94,0.18);
}
.viz-legend-step.active .viz-step-num {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212,134,10,0.2);
}

.viz-bridge {
  text-align: center;
  margin-top: 22px;
  font-size: var(--fs-small);
  color: var(--text2);
}
.viz-bridge a { font-weight: 600; }

@media (max-width: 960px) {
  .viz-stage { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .viz-card { padding: 20px 16px; }
  .viz-toggle { width: 100%; }
  .viz-tab { flex: 1; padding: 10px 12px; font-size: 13px; }
  .viz-legend-loop {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .viz-arrow { transform: rotate(90deg); align-self: center; }
  .viz-cycle-text { font-size: var(--fs-caption); }
}
@media (prefers-reduced-motion: reduce) {
  .viz-line,
  .viz-line--future,
  .viz-fan,
  .viz-dot,
  .viz-dot-pulse,
  .viz-now-line {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .viz-dot-pulse { opacity: 0 !important; }
}