/* ==========================================================================
   Projects VISUALS — interactive math-tool cards for the unit
   culminating-project wizard pages. Companion to projects-visuals.js;
   same contract as the PRO / GOLD / PUBLISHER layers (body.pro-projects
   scoped, additive, print-safe). The manipulatives themselves
   (shared/projects/manip-*.js) inject their own scoped styles — this file
   only styles the wrapper card that frames them inside a step panel.
   ========================================================================== */

body.pro-projects .viz-card {
  margin: 18px 0 6px;
  border: 2px solid var(--blue, #1763c7);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 99, 199, 0.06), rgba(23, 99, 199, 0.01));
  padding: 14px 16px 16px;
}

body.pro-projects .viz-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

body.pro-projects .viz-icon {
  font-size: 1.5rem;
  line-height: 1;
}

body.pro-projects .viz-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--navy, #10243e);
}

body.pro-projects .viz-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue, #1763c7);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

body.pro-projects .viz-why {
  margin: 4px 0 10px;
  font-size: 0.95rem;
  color: var(--muted, #54677c);
}

/* ---- Student-owned Math Workspace --------------------------------------- */
body.pro-projects .mw-card {
  margin: 16px 0 8px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(255, 255, 255, 0.8));
  overflow: hidden;
}

body.pro-projects .mw-summary {
  display: grid;
  gap: 2px;
  padding: 13px 16px;
  cursor: pointer;
  color: var(--navy, #10243e);
}

body.pro-projects .mw-summary::marker { color: var(--teal, #0f766e); }
body.pro-projects .mw-kicker { color: var(--teal, #0f766e); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
body.pro-projects .mw-title { font-size: 1rem; }
body.pro-projects .mw-body { padding: 0 16px 16px; }
body.pro-projects .mw-intro { margin: 0 0 13px; color: var(--muted, #54677c); font-size: .92rem; }
body.pro-projects .mw-grid { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 9px; }
body.pro-projects .mw-label { display: grid; gap: 4px; color: var(--navy, #10243e); font-size: .78rem; font-weight: 800; }
body.pro-projects .mw-input, body.pro-projects .mw-explain { width: 100%; border: 1.5px solid #b9d5d1; border-radius: 9px; background: #fff; color: #172033; font: inherit; padding: 8px 9px; }
body.pro-projects .mw-input:focus, body.pro-projects .mw-explain:focus { outline: 3px solid rgba(13, 148, 136, .22); border-color: var(--teal, #0f766e); }
body.pro-projects .mw-result { display: grid; gap: 2px; margin: 13px 0; padding: 11px 13px; border-radius: 10px; background: #fff; color: var(--navy, #10243e); }
body.pro-projects .mw-result-label { color: var(--teal, #0f766e); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
body.pro-projects .mw-result strong { font-size: 1.05rem; }
body.pro-projects .mw-result small { color: var(--muted, #54677c); }
body.pro-projects .mw-explain { min-height: 58px; resize: vertical; }

@media (max-width: 700px) { body.pro-projects .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Interactive-only helper: the student's real work still lives in the
   page's own inputs, so the tool card stays out of printed reports. */
@media print {
  body.pro-projects .viz-card {
    display: none !important;
  }
  body.pro-projects .mw-card { display: none !important; }
}