/**
 * forecast.css — public forecaster workspace styles.
 *
 * Bridges the Status Spectrum tokens (normally scoped to [data-design-v2] in
 * assets/css/design-v2/tokens.css) into the public .mm-fc scope, so the
 * workspace JS can use the same --pace-* variables without pulling in the
 * entire design-v2 system.
 *
 * Task 9 (feat/forecast-redesign P2): emit bundle JSON + Calm CSS bridge.
 */

/* ── Spectrum token bridge (scoped to public surface only) ───────────────── */
.mm-fc {
  --pace-secure: #1C5BA0; --pace-secure-paper: #E8F0FB; --pace-secure-border: #BFD6EF;
  --pace-caution: #985A0E; --pace-caution-paper: #FBEAD2; --pace-caution-border: #ECCF9C;
  --pace-risk: #A53A1A; --pace-risk-paper: #F7DCD1; --pace-risk-border: #E8B9A8;
  max-width: 960px; margin: 0 auto; padding: 28px 20px 8px;
}

/* ── Workspace grid ──────────────────────────────────────────────────────── */
.mm-fc__workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .mm-fc__workspace { grid-template-columns: 1fr; } }

/* ── Verdict state colors (workspace JS reads data-state) ───────────────── */
.mm-fc__verdict[data-state="on_track"] { background: var(--pace-secure); }
.mm-fc__verdict[data-state="on_pace"]  { background: var(--mm-navy, #0E1F3B); }
.mm-fc__verdict[data-state="short"]    { background: var(--mm-navy, #0E1F3B); }

/* ── Trip-row builder (Task 11; only rendered once JS enhances) ──────────── */
.mm-fc__add-trip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 9px 14px;
  font: 600 13px/1.2 var(--mm-font-body);
  color: var(--mm-navy, #0E1F3B);
  background: var(--mm-white, #ffffff);
  border: 1px dashed var(--mm-accent, #FF6810); border-radius: 8px;
}
.mm-fc__add-trip:hover { background: var(--mm-amber, #FFE8D6); }
.mm-fc__add-trip:focus-visible { outline: 2px solid var(--mm-accent, #FF6810); outline-offset: 1px; }

.mm-fc[data-fc-enhanced="1"] #mm-fc-rows { display: grid; gap: 12px; margin: 0 0 14px; }
.mm-fc__row {
  border: 1px solid var(--mm-border, #E2E7F0); border-radius: 10px;
  padding: 14px; background: var(--mm-white, #ffffff);
}
.mm-fc__row-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.mm-fc__row-type {
  font: 600 11px/1.3 var(--mm-font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--mm-fg-muted, #6B7A99);
}
.mm-fc__row-rm {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 28px; height: 28px; padding: 4px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mm-fg-muted, #6B7A99);
  background: transparent; border: 1px solid var(--mm-border, #E2E7F0);
}
.mm-fc__row-rm:hover { color: var(--mm-navy, #0E1F3B); background: var(--mm-paper, #F4F6FA); }
.mm-fc__row-rm:focus-visible { outline: 2px solid var(--mm-accent, #FF6810); outline-offset: 1px; }
.mm-fc__row-rm svg { width: 16px; height: 16px; display: block; }
.mm-fc__row-body, .mm-fc__row-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-fc__row-foot { margin: 10px 0 0; }
@media (max-width: 480px) { .mm-fc__row-body, .mm-fc__row-foot { grid-template-columns: 1fr; } }
.mm-fc__row-f { display: block; }
.mm-fc__row-f--check {
  display: flex; align-items: center; gap: 8px; grid-column: 1 / -1;
  font: 400 13px/1.4 var(--mm-font-body); color: var(--mm-fg, #1F2937);
}
.mm-fc__row-f--check .mm-fc__row-l { font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0; }
.mm-fc__row-l {
  display: block; font: 600 11px/1.4 var(--mm-font-body); text-transform: uppercase;
  letter-spacing: .04em; color: var(--mm-fg-muted, #6B7A99); margin: 0 0 5px;
}
.mm-fc__row-est { font: 500 12px/1.45 var(--mm-font-body); color: var(--mm-fg-muted, #6B7A99); margin: 10px 0 0; }

/* Verdict pace + ladder icon sizing. mm_render_svg_icon() puts the class on the
 * <svg> itself, and workspace.js mirrors that, so these rules size BOTH the
 * server no-JS render and the live JS render identically (parity). */
.mm-fc__pace { display: flex; align-items: center; gap: 8px; }
.mm-fc__pace-ico { flex: 0 0 auto; width: 16px; height: 16px; display: block; }
.mm-fc__ladder { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mm-fc__rung { display: flex; align-items: center; gap: 8px; }
.mm-fc__rung-ico { flex: 0 0 auto; width: 18px; height: 18px; display: block; }
.mm-fc__rung-name { flex: 1 1 auto; }
.mm-fc__rung-thr { flex: 0 0 auto; opacity: .85; }

/* ── Task 12: Accessibility + freshness additions ────────────────────────── */

/* Meter fill transition — owned here so the reduced-motion override below wins. */
.mm-fc__meter span { transition: width 0.35s ease; }

/* prefers-reduced-motion: disable the meter fill transition (Task 12). */
@media (prefers-reduced-motion: reduce) {
  .mm-fc__meter span { transition: none; }
}

/* Non-color verdict status label. The data-state-label CSS attr approach from
 * the brief is an alternative; we render the text in PHP/JS directly (simpler).
 * This rule keeps the label visually subtle inside the colored verdict box. */
.mm-fc__verdict-status {
  font: 600 11px/1.3 var(--mm-font-body);
  letter-spacing: .10em; text-transform: uppercase;
  opacity: .72; margin: 0 0 10px;
}

/* Freshness / provenance line (below the tier ladder, inside the verdict box). */
.mm-fc__freshness {
  font: 400 11px/1.5 var(--mm-font-body);
  opacity: .72; margin: 12px 0 0;
}
.mm-fc__freshness a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Stale-data caution note: caution-bordered inset, same palette as --pace-caution. */
.mm-fc__freshness--stale {
  margin: 12px 0 0; padding: 8px 10px;
  border-radius: 6px;
  background: var(--pace-caution-paper, #FBEAD2);
  border: 1px solid var(--pace-caution-border, #ECCF9C);
  color: var(--pace-caution, #985A0E);
  opacity: 1;
}
.mm-fc__freshness--stale a { color: inherit; }

/* Error-summary region (Task 12: JS-populated, hidden until needed). */
.mm-fc__error-summary {
  background: var(--mm-amber, #FFE8D6);
  border: 1px solid var(--mm-accent, #FF6810);
  border-radius: 8px;
  padding: 10px 12px;
  font: 500 14px/1.5 var(--mm-font-body);
  color: var(--mm-navy, #0E1F3B);
  margin: 0 0 14px;
}