/* MPPM shared output parity for Full/Planning calculators.
 * Scope: result header, primary result, KEY METRICS, metric cards and interpretation only.
 */

/* -------- Shared output header -------- */
#mppm-roas-page .results-panel .panel-head,
.mppm-margin-page .mppm-margin-results-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:20px 20px 16px!important;
  border-bottom:1px solid #dfe6ef!important;
  background:#fff!important;
}
#mppm-roas-page .results-panel .panel-head h3,
.mppm-margin-page .mppm-margin-results-head h3{
  margin:0!important;
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:21px!important;
  line-height:1.2!important;
  letter-spacing:-.55px!important;
  font-weight:850!important;
}
#mppm-roas-page .results-panel .panel-head p,
.mppm-margin-page .mppm-margin-results-head p{
  margin:1px 0 0 auto!important;
  max-width:360px!important;
  color:#53687d!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:12px!important;
  line-height:1.5!important;
  font-weight:400!important;
  text-align:right!important;
}

/* -------- Primary result -------- */
#mppm-roas-page .result-status,
.mppm-margin-page .mppm-margin-primary-result{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:15px!important;
  margin:20px 20px 0!important;
  padding:17px!important;
  border:1px solid #d9e6f5!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#0b2443,#0d3d6f)!important;
  color:#fff!important;
}
#mppm-roas-page .status-copy small,
.mppm-margin-page .mppm-margin-primary-result small{
  display:block!important;
  margin:0!important;
  color:#8fc1ef!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.045em!important;
}
#mppm-roas-page .status-copy strong,
.mppm-margin-page .mppm-margin-primary-result strong{
  display:block!important;
  margin-top:4px!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:1.06!important;
  letter-spacing:-.8px!important;
  font-weight:850!important;
}
#mppm-roas-page .status-copy p,
.mppm-margin-page .mppm-margin-primary-result p{
  margin:5px 0 0!important;
  color:#dce7f1!important;
  font-size:11px!important;
  line-height:1.45!important;
  font-weight:400!important;
}
#mppm-roas-page .status-pill,
.mppm-margin-page .mppm-margin-result-pill{
  flex:none!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:#e7f7f1!important;
  color:#08775d!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
}

/* -------- KEY METRICS bar -------- */
#mppm-roas-page .results-section-label,
.mppm-margin-page .mppm-margin-results-label{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:15px 20px 0!important;
}
#mppm-roas-page .results-section-label span,
.mppm-margin-page .mppm-margin-results-label span{
  color:#071d37!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
#mppm-roas-page .results-section-label small,
.mppm-margin-page .mppm-margin-results-label small{
  margin:0!important;
  color:#748398!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:400!important;
}

/* -------- Metric cards -------- */
#mppm-roas-page .metric-grid{
  gap:10px!important;
  margin-top:12px!important;
}
#mppm-roas-page .metric,
.mppm-margin-page .mppm-margin-metrics article{
  min-width:0!important;
  min-height:98px!important;
  padding:14px!important;
  border:1px solid #e1e8f0!important;
  border-radius:14px!important;
  background:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
#mppm-roas-page .metric .metric-label,
.mppm-margin-page .mppm-margin-metric-label{
  display:flex!important;
  align-items:flex-start!important;
  gap:5px!important;
  min-height:0!important;
  margin:0!important;
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:10.5px!important;
  line-height:1.28!important;
  font-weight:850!important;
  font-style:normal!important;
}
#mppm-roas-page .metric strong,
.mppm-margin-page .mppm-margin-metrics article>strong{
  display:block!important;
  margin:6px 0 0!important;
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:20px!important;
  line-height:1.1!important;
  letter-spacing:-.45px!important;
  font-weight:850!important;
}
#mppm-roas-page .metric em,
.mppm-margin-page .mppm-margin-metrics article>small{
  display:block!important;
  margin:auto 0 0!important;
  padding-top:6px!important;
  color:#718399!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:9.5px!important;
  line-height:1.38!important;
  font-style:normal!important;
  font-weight:400!important;
}

/* -------- Shared output info icon -------- */
#mppm-roas-page .metric-info,
.mppm-margin-page .mppm-margin-output-info{
  position:relative!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  flex:0 0 15px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #cbd9e8!important;
  border-radius:50%!important;
  background:#f7faff!important;
  color:#55718e!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:850!important;
  cursor:pointer!important;
}
.mppm-margin-page .mppm-margin-output-info::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:40;
  width:220px;
  max-width:min(220px,70vw);
  padding:9px 10px;
  border-radius:9px;
  background:#071d37;
  color:#fff;
  box-shadow:0 10px 24px rgba(7,29,55,.2);
  font-size:10px;
  line-height:1.45;
  font-weight:500;
  text-align:left;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:.15s ease;
}
.mppm-margin-page .mppm-margin-output-info.open::after,
.mppm-margin-page .mppm-margin-output-info:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}

/* -------- MPPM interpretation -------- */
#mppm-roas-page .result-explainer,
.mppm-margin-page .mppm-margin-interpretation{
  margin:12px 20px 0!important;
  padding:15px 16px!important;
  border:1px solid #cfe7dd!important;
  border-radius:15px!important;
  background:#f2fbf7!important;
  text-align:left!important;
}
#mppm-roas-page .result-explainer>small,
.mppm-margin-page .mppm-margin-interpretation>small{
  display:block!important;
  margin:0!important;
  color:#128264!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
#mppm-roas-page .result-explainer h3,
.mppm-margin-page .mppm-margin-interpretation h3{
  margin:6px 0 4px!important;
  color:#071d37!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:-.2px!important;
}
#mppm-roas-page .result-explainer p,
.mppm-margin-page .mppm-margin-interpretation p{
  margin:0!important;
  color:#476457!important;
  font-size:11px!important;
  line-height:1.5!important;
  font-weight:400!important;
}

@media(max-width:700px){
  #mppm-roas-page .results-panel .panel-head,
  .mppm-margin-page .mppm-margin-results-head{display:block!important}
  #mppm-roas-page .results-panel .panel-head p,
  .mppm-margin-page .mppm-margin-results-head p{margin-top:5px!important;max-width:none!important;text-align:left!important}
}