/*
 * advisor_renderer.css
 * Purpose : Shared styles for the AMI Advisor structured-report renderer
 *           (window.AdvisorRenderer in /shared/js/advisor_renderer.js).
 *           Sourced verbatim from atm_advisor.html so both pages render
 *           the same envelope shape (summary banner + section cards +
 *           KPI grid + risk matrix + timeline + action cards + table).
 * Depends : Hex design-system tokens (--text-muted, --accent-green, etc.)
 *           — load /shared/css/hex-design-system.css before this file.
 */

/* ── Inline report wrapper ───────────────────────────────────────────── */
.report-output { max-width: 1100px; }

/* Demo watermark */
.demo-bar {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 6px 16px; font-size: 11px;
  color: var(--accent-orange);
  text-align: center; margin-bottom: 12px;
}

/* ── Summary banner ──────────────────────────────────────────────────── */
.summary-ban {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
}
.sum-gauge { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.sum-gauge svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.sum-gauge .trk { fill: none; stroke: var(--border-color); stroke-width: 5; }
.sum-gauge .fl  { fill: none; stroke-width: 5; stroke-linecap: round; }
.sum-gauge .ctr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sum-gauge .sc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 800;
}
.sum-gauge .rt {
  font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sum-text { flex: 1; }
.sum-hl { font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 4px; }
.sum-km { font-size: 12px; color: var(--text-muted); }
.sum-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-dim);
  margin-top: 6px; display: flex; gap: 14px;
}
.rec-badge {
  display: inline-block; padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 10px; border-radius: 4px;
}
.rec-CLOSE       { background: rgba(239, 68, 68, 0.15);  color: var(--accent-red);    border: 1px solid rgba(239, 68, 68, 0.3); }
.rec-RETAIN      { background: rgba(16, 185, 129, 0.15); color: var(--accent-green);  border: 1px solid rgba(16, 185, 129, 0.3); }
.rec-RENEGOTIATE { background: rgba(245, 158, 11, 0.15); color: var(--accent-orange); border: 1px solid rgba(245, 158, 11, 0.3); }
.rec-RELOCATE    { background: rgba(59, 130, 246, 0.15); color: var(--hex-blue);      border: 1px solid rgba(59, 130, 246, 0.3); }

/* ── Section ──────────────────────────────────────────────────────────── */
.sec {
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid var(--border-color);
  margin-bottom: 12px; overflow: hidden;
}
.sec-hdr {
  padding: 12px 18px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.sec-body { padding: 10px 18px 16px; }

/* Narrative */
.narr { font-size: 13.5px; line-height: 1.8; color: var(--text-main); }
.narr p { margin-bottom: 8px; }

/* Traffic Light */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tl-card { padding: 12px 14px; border-left: 4px solid; background: rgba(17, 24, 39, 0.4); }
.tl-card.GREEN { border-color: var(--accent-green); }
.tl-card.AMBER { border-color: var(--accent-orange); }
.tl-card.RED   { border-color: var(--accent-red); }
.tl-dim { font-weight: 700; font-size: 12px; }
.tl-sc  { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); }
.tl-det { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* KPI strip */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.kpi-card { padding: 12px 14px; background: rgba(17, 24, 39, 0.5); border: 1px solid var(--border-color); }
.kpi-card.GREEN { border-left: 3px solid var(--accent-green); }
.kpi-card.AMBER { border-left: 3px solid var(--accent-orange); }
.kpi-card.RED   { border-left: 3px solid var(--accent-red); }
.kpi-lbl   { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.kpi-val   { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; }
.kpi-unit  { font-size: 10px; color: var(--text-dim); font-weight: 400; }
.kpi-d     { font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-top: 3px; }
.kpi-d.up   { color: var(--accent-green); }
.kpi-d.down { color: var(--accent-red); }
.kpi-bench { font-size: 9px; color: var(--text-dim); margin-top: 1px; }

/* Action cards */
.act { border: 1px solid var(--border-color); padding: 14px 16px; margin-bottom: 8px; transition: border 0.2s; }
.act:hover { border-color: var(--hex-blue); }
.act-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; flex-wrap: wrap; gap: 4px; }
.act-t { font-weight: 700; font-size: 13px; }
.act-imp { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--accent-green); }
.eff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase; margin-left: 6px;
}
.eff.LOW    { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.eff.MEDIUM { background: rgba(245, 158, 11, 0.15); color: var(--accent-orange); }
.eff.HIGH   { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.act-det { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* Risk matrix */
.risk { border-left: 3px solid; padding: 10px 14px; margin-bottom: 6px; background: rgba(17, 24, 39, 0.3); }
.risk.CRITICAL { border-color: var(--accent-red); }
.risk.HIGH     { border-color: #f97316; }
.risk.MEDIUM   { border-color: var(--accent-orange); }
.risk.LOW      { border-color: var(--accent-green); }
.risk-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.risk-t { font-weight: 700; font-size: 12px; }
.sev {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
}
.sev.CRITICAL { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.sev.HIGH     { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.sev.MEDIUM   { background: rgba(245, 158, 11, 0.15); color: var(--accent-orange); }
.sev.LOW      { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.risk-det { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.risk-mit { font-size: 11px; color: var(--hex-blue); margin-top: 3px; font-style: italic; }

/* Timeline */
.tl-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.phase { background: rgba(17, 24, 39, 0.4); border: 1px solid var(--border-color); padding: 12px 14px; border-top: 3px solid var(--hex-blue); }
.phase-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--hex-blue); margin-bottom: 6px; }
.phase ul { padding-left: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.7; }

/* Gauge breakdown */
.gauge-brkdn { margin-top: 10px; }
.g-row    { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.g-lbl    { font-size: 11px; color: var(--text-muted); min-width: 100px; }
.g-bar-bg { flex: 1; height: 5px; background: var(--border-color); border-radius: 3px; overflow: hidden; }
.g-bar-fl { height: 100%; border-radius: 3px; }
.g-sc     { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; min-width: 24px; text-align: right; }

/* Radar */
.radar-wrap { display: flex; justify-content: center; padding: 6px 0; }

/* Data table */
.dtbl { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.dtbl th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 7px 10px; border-bottom: 2px solid var(--border-color); }
.dtbl td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--text-muted); }
.dtbl tr:hover td { background: rgba(59, 130, 246, 0.04); }

/* Chart placeholder when caller passes skipChartSections */
.advisor-chart-placeholder {
  font-size: 11px; color: var(--text-muted);
  font-style: italic; padding: 10px 14px;
  background: rgba(17, 24, 39, 0.3);
  border: 1px dashed var(--border-color);
}

/* ── Loading state (window.AdvisorRenderer.renderLoading) ──────────────
   Honest in-flight feedback while the LLM generates the report. No fake
   stage progress — indeterminate sweep + elapsed timer. */
.advisor-loading {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 48px 24px;
  font-family: 'Inter', system-ui, sans-serif;
}
.advisor-loading-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-cyan, #06b6d4);
  border-radius: 50%;
  animation: advisor-loading-spin 0.9s linear infinite;
}
@keyframes advisor-loading-spin {
  to { transform: rotate(360deg); }
}
.advisor-loading-headline {
  font-size: 14px; font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.02em;
}
.advisor-loading-bar {
  width: 220px; height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.advisor-loading-bar-fill {
  width: 40%; height: 100%;
  background: linear-gradient(90deg,
    rgba(6, 182, 212, 0) 0%,
    rgba(6, 182, 212, 0.9) 50%,
    rgba(59, 130, 246, 0) 100%);
  border-radius: 2px;
  animation: advisor-loading-sweep 1.6s ease-in-out infinite;
}
@keyframes advisor-loading-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.advisor-loading-elapsed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.04em;
}
.advisor-loading-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  font-style: italic;
  max-width: 320px;
  line-height: 1.55;
  text-align: center;
}