/* ==========================================================================
   components.css — civic study (forest plot dashboard)
   Builds on theme.css (shared CIMI tokens). Adds the controls, legend,
   chart container and highlights box.
   ========================================================================== */

.subtitle { text-align: center; color: var(--text-muted); max-width: 820px; margin: 6px auto 0; font-size: .95rem; }

main { padding: 26px 0 56px; }

/* ---- controls (two dropdowns) ------------------------------------------ */
.controls {
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: flex-end;
}
.control-group { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1 1 280px; max-width: 420px; }
.control-group label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cimi-bluedark); }
.control-group select {
  appearance: none; font: inherit; font-weight: 600; color: var(--cimi-blue);
  padding: 10px 36px 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%232A60A3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer; width: 100%;
}
.control-group select:focus { outline: none; border-color: var(--cimi-blue); box-shadow: 0 0 0 3px rgba(42,96,163,.12); }

/* ---- legend ------------------------------------------------------------- */
.legend { display: flex; justify-content: center; gap: 26px; margin: 18px 0 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.legend .dot { width: 14px; height: 14px; border-radius: 3px; }
.legend .dot.sig { background: var(--cimi-blue); }
.legend .dot.not-sig { background: var(--cimi-teal); }

/* ---- chart -------------------------------------------------------------- */
.chart-card { padding: 18px 14px 10px; overflow: hidden; }
#chart-box { position: relative; width: 100%; height: 560px; }

/* ---- highlights --------------------------------------------------------- */
.highlights { margin-top: var(--gap); }
.highlights h3 { font-size: 1rem; color: var(--cimi-blue); margin-bottom: 12px; }
.highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.highlights li {
  position: relative; padding-left: 18px; color: var(--text); font-size: .94rem; line-height: 1.55;
  border-left: 3px solid var(--cimi-teal);
}
.highlights li::before { content: ""; }
.highlights li span { display: block; }
.highlights li span + span { margin-top: 8px; }

@media (max-width: 560px) {
  .controls { gap: 14px; }
  .control-group { min-width: 0; flex-basis: 100%; }
  #chart-box { height: 620px; }
}