/* Margin ROAS Simulator — scoped to .mrs-root so it cannot leak into or inherit from the theme. */

.mrs-root{
  font-family:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#242424;
  line-height:1.4;
  -webkit-text-size-adjust:100%;
  text-align:left;
}
.mrs-root *,
.mrs-root *::before,
.mrs-root *::after{box-sizing:border-box;}

/* Reset elements the theme is most likely to restyle. */
.mrs-root p,
.mrs-root figure,
.mrs-root output,
.mrs-root label,
.mrs-root h2{margin:0;padding:0;border:0;}
/* Force text colour to follow the simulator's own cascade, not the theme's
   element rules (e.g. a theme `output{color:red}` or `p{color:#...}`). The
   coloured exceptions below are all `.mrs-root .class` so they stay stronger. */
.mrs-root p,
.mrs-root h2,
.mrs-root label,
.mrs-root output,
.mrs-root span{color:inherit;}
.mrs-root button{margin:0;border-radius:0;font-family:inherit;line-height:normal;text-transform:none;letter-spacing:normal;color:inherit;}
.mrs-root output{display:inline;}

/* --- Frame --------------------------------------------------------------- */
.mrs-fig{margin:0;border:2px solid #242424;background:#FFFFFF;}

.mrs-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:8px 24px;padding:14px 24px;background:#242424;color:#F7F5EF;
}
.mrs-root .mrs-title{font-weight:700;font-size:16px;}
.mrs-root .mrs-note{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#D8D3C6;}
.mrs-root .mrs-reset{
  border:0;background:none;padding:0;font:inherit;color:#FF8A3D;
  text-decoration:underline;cursor:pointer;
}
.mrs-root .mrs-reset:hover{color:#FF8A3D;}

.mrs-body{display:flex;flex-wrap:wrap;gap:0;}

/* --- Controls ------------------------------------------------------------ */
.mrs-controls{
  flex:1 1 340px;min-width:0;padding:24px;
  display:flex;flex-direction:column;gap:18px;
  border-right:1px solid #D8D3C6;
}
.mrs-field-top{display:flex;justify-content:space-between;gap:12px;font-size:15px;}
.mrs-field-top label{font-weight:600;}
.mrs-field-top output{font-family:'IBM Plex Mono',ui-monospace,monospace;}

.mrs-root input[type=range]{
  -webkit-appearance:auto;appearance:auto;
  width:100%;height:32px;margin:0;padding:0;
  background:transparent;accent-color:#FF6A00;cursor:pointer;
}

/* --- Readout ------------------------------------------------------------- */
.mrs-readout{flex:1.4 1 420px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:22px;}

.mrs-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;}
.mrs-root .mrs-metric-k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;color:#5C5852;
}
.mrs-metric-v{margin:4px 0 0;font-weight:800;font-size:28px;letter-spacing:-0.02em;}
.mrs-root .mrs-be{color:#A84400;}

.mrs-bars{display:flex;flex-direction:column;gap:10px;}
.mrs-bar-row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;}
.mrs-bar-lbl{font-size:13px;font-weight:600;}
.mrs-track{height:36px;background:#EFEBE1;}
.mrs-track-split{display:flex;}
.mrs-bar-rev{height:36px;width:0;background:#242424;transition:width .2s;}
.mrs-bar-cogs{height:36px;width:0;background:#8A857C;transition:width .2s;}
.mrs-bar-spend{height:36px;width:0;background:#FF6A00;transition:width .2s;}

.mrs-root .mrs-legend{
  display:flex;flex-wrap:wrap;gap:6px 18px;padding-left:108px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:#5C5852;
}
.mrs-legend>span{display:flex;gap:6px;align-items:center;}
.mrs-sw{display:block;width:10px;height:10px;}
.mrs-sw-rev{background:#242424;}
.mrs-sw-cogs{background:#8A857C;}
.mrs-sw-spend{background:#FF6A00;}

.mrs-verdict{padding:16px 18px;}
.mrs-verdict-k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;
}
.mrs-verdict-v{margin:4px 0 0;font-weight:900;font-size:34px;letter-spacing:-0.03em;}
.mrs-verdict-text{margin:6px 0 0;font-size:15px;line-height:1.45;}

/* Focus visibility (matches the original orange focus ring). */
.mrs-root a:focus-visible,
.mrs-root button:focus-visible,
.mrs-root input:focus-visible{outline:3px solid #FF6A00;outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .mrs-root *{transition:none !important;}
}